MyBB Community Forums

Full Version: Change Color Tex "Attached Files"
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Change Color Tex "Attached Files"

Hello community, I keep customizing my little forum ...

I currently have a question, I have searched in Global.Css to customizing the Color Tex (Attached Files) but can see the line to change that...

[Image: attachmed-files.png]

Help or Feedback are welcome.

Thanks in advance for support  Blush
As far as I can see, there is no class defined in elements for attachments, so standard (inherit) colors are used for attachments.
Check this template and edit to fit your needs - adding inline styles or classes for global CSS styling.
Post Bit Templates: "postbit_attachments_attachment"

Example:
<br />{$attachment['icon']}&nbsp;&nbsp;<a class="YOUR_CLASSNAME1" href="attachment.php?aid={$attachment['aid']}" target="_blank" title="{$attachdate}">{$attachment['filename']}</a> <span class="YOUR CLASSNAME2">({$lang->postbit_attachment_size} {$attachment['filesize']} / {$lang->postbit_attachment_downloads} {$attachment['downloads']})</span>

Then add own definitions to global.css like this:
.YOUR_CLASSNAME1 { ... }
.YOUR_CLASSNAME2 { ... }

[ExiTuS]
+1 Thank you for the Support  [ExiTuS]

Changed the Color Tex Via template: Post Bit Templates: "postbit_attachments_attachment" with <span style=

<br />{$attachment['icon']}&nbsp;&nbsp;<a href="attachment.php?aid={$attachment['aid']}" target="_blank" title="{$attachdate}"><span style="font-size: 20pt; font-weight:bold; color:#f9b08a;">{$attachment['filename']}</span></a> <span style="font-size: 14pt; font-weight:bold; color:#c7c30a;">({$lang->postbit_attachment_size} {$attachment['filesize']})</span>

but i still need to change the Text Attached Files, how can change that Text color?

[Image: attachched.png]

Thanks in advance for Support  [ExiTuS]

Smile
This text is the <legend> within the <fieldset> element.
See template: "postbit_attachments"

Changing global.css definitions for "fieldset" or "legend" may affect all other fieldsets all around the forum.

[ExiTuS]
(2021-02-26, 12:06 AM)[ExiTuS] Wrote: [ -> ]This text is the <legend> within the <fieldset> element.
See template: "postbit_attachments"

Changing global.css definitions for "fieldset" or "legend" may affect all other fieldsets all around the forum.

[ExiTuS]

I think the best option at this point is to change the line from golabal.lang to display the style

$l['postbit_attachments'] = "<span style=color:#c7c30a>Attached Files</span>";

Now the Color Text "Attached Files"  are ok

[Image: attachmentt.png]

Big Grin
(2021-02-26, 03:20 AM)DiegoPino Wrote: [ -> ]
(2021-02-26, 12:06 AM)[ExiTuS] Wrote: [ -> ]This text is the <legend> within the <fieldset> element.
See template: "postbit_attachments"

Changing global.css definitions for "fieldset" or "legend" may affect all other fieldsets all around the forum.

[ExiTuS]

I think the best option at this point is to change the line from golabal.lang to display the style

$l['postbit_attachments'] = "<span style=color:#c7c30a>Attached Files</span>";

Now the Color Text "Attached Files"  are ok

[Image: attachmentt.png]

Big Grin

and why? as yes correct, the fieldset would be affected boardwide if you assigned the styling to the primary fieldset styling, but NOT if you actually assign styling to specific fieldset?!! and would be better than styling via the lang file that would get overwritten on core updates...

when instead you could simply do something similar to:

ie:
[Image: Test-Thread.png]

Edit Template: postbit_attachments

<br />
<br />
<fieldset class="attachments-field">
<legend><span class="attachments-legend">{$lang->postbit_attachments}</span></legend>
{$post['attachedthumbs']}
{$post['attachedimages']}
{$post['attachmentlist']}
</fieldset>

and add to css:

fieldset.attachments-field {
  border-color: #4586CB !important;
}

span.attachments-legend {
  color: #c7c30a !important;
  font-weight: bold;
}
* note: you may not need !important in yours but for my examples when made to create the screenshot the style had existing styling that required such.

so for you it would most likely just be simply:

fieldset.attachments-field {
  border-color: #4586CB;
}

span.attachments-legend {
  color: #c7c30a;
  font-weight: bold;
}


also as for the other part that I see you have completed already, I am simply curious why you applied the span styling inline when you could have simply as previously suggested:

ie:
[Image: Forums.png]

Edit Template: postbit_attachments_attachment
<br />{$attachment['icon']}&nbsp;&nbsp;<span class="attachment-link"><a href="attachment.php?aid={$attachment['aid']}" target="_blank" title="{$attachdate}">{$attachment['filename']}</a></span> <span class="attachment-details">({$lang->postbit_attachment_size} {$attachment['filesize']} / {$lang->postbit_attachment_downloads} {$attachment['downloads']})</span>


add css styling:
span.attachment-details {
  color: #BEAE30 !important;
}

span.attachment-link a:link {
  color: #F8B18E !important;
  font-weight: bold;
}
* note: you may not need !important in yours but for my examples when made to create the screenshot the style had existing styling that required such.

so for you it would most likely be simply:
span.attachment-details {
  color: #BEAE30;
}

span.attachment-link a:link {
  color: #F8B18E;
  font-weight: bold;
}

to make your final css base end for the both template edits:

/* Postbit Attachment styling */

/* Fieldset Attachments */

fieldset.attachments-field {
  /* border color */
  border-color: #4586CB;
}

/* Legend Attachments Title Span */

span.attachments-legend {
  /* text color */
  color: #c7c30a;
  /* emulate strong */
  font-weight: bold;
}

/* Attachment Link */

span.attachment-link a:link {
  /* link color */
  color: #F8B18E;
  /* emulate strong */
  font-weight: bold;
  /* decoration */
  text-decoration: none;	
}

/* visited state */

span.attachment-link a:visited {
  /* link color */
  color: #F8B18E;
  /* decoration */
  text-decoration: none;		
}

/* active & hover states */

span.attachment-link a:active,
span.attachment-link a:hover {
  /* link color */
  color: #4586CB;
  /* decoration */
  text-decoration: underline;	
}

/* Attachment Details */

span.attachment-details {
  /* text color */
  color: #BEAE30;
}
*

Final note: You then could also say want to add bg and hover bg to fieldset just for an example by adjusting existing fieldset.attachments-field styling like so:

/* Fieldset Attachments */

fieldset.attachments-field {
  border-color: #4586CB;
  background: #fff;
}

/* fieldset active & hover states */

fieldset.attachments-field:active,
fieldset.attachments-field:hover {
  background: #fff8f9;
}

* I say final base end because this is your base end with links states factored...,  and is the base end done as simply and openly explanatory to the visible eye as to what is what that you then could edit further upon for those two specific templates edited. Wink

......etc, etc?


Best of luck! Big Grin
Thanks in advance @censor_deeznutz for the support and your time

I made the changes you recommended and it worked very well.
I like it better in CSS I have more control of the template and it does not overwrite core files of language.

Thank You for Support @censor_deeznutz  Cool


PD:
Muchas Gracias por el Soporte, Muy agradecido con tu ayuda a mejorar el codigo  Blush

+1 and mark with the Best answer

Big Grin
(2021-02-27, 10:38 PM)DiegoPino Wrote: [ -> ]Thanks in advance @censor_deeznutz for the support and your time

I made the changes you recommended and it worked very well.
I like it better in CSS I have more control of the template and it does not overwrite core files of language.

Thank You for Support @censor_deeznutz  Cool


PD:
Muchas Gracias por el Soporte, Muy agradecido con tu ayuda a mejorar el codigo  Blush

+1 and mark with the Best answer

Big Grin


Cool beans, no worries, glad it was understandable and usable for ya. Big Grin


Happy editing!  ~ V


oh, one other note, the nice thing about this edit is in theory you could also decide to expand upon it displayed by gid....

example:

my user for testing right now is usergroup 4 administrator so we will take the previous tutorial and make it show for posted attachments by usergroup 4


Edit Template: postbit_attachments

<br />
<br />
<fieldset class="attachments-field{$post['usergroup']}">
<legend><span class="attachments-legend{$post['usergroup']}">{$lang->postbit_attachments}</span></legend>
{$post['attachedthumbs']}
{$post['attachedimages']}
{$post['attachmentlist']}
</fieldset>

Edit Template: postbit_attachments_attachment

<br />{$attachment['icon']}&nbsp;&nbsp;<span class="attachment-link{$post['usergroup']}"><a href="attachment.php?aid={$attachment['aid']}" target="_blank" title="{$attachdate}">{$attachment['filename']}</a></span> <span class="attachment-details{$post['usergroup']}">({$lang->postbit_attachment_size} {$attachment['filesize']} / {$lang->postbit_attachment_downloads} {$attachment['downloads']})</span>

modify the existing css because we want to start it by gid #4 for now and the added #3 & #6 placeholders are there for your future editing

/* Postbit Attachment Styling by GID */

/* Usergroup 4 Administrator styling */

/* Fieldset Attachments */

fieldset.attachments-field4 {
  border-color: #4586CB;
  background: #fff;
}

/* fieldset  active & hover states */

fieldset.attachments-field4:active,
fieldset.attachments-field4:hover {
  background: #fff8f9;
}

/* Legend Attachments Title Span */

span.attachments-legend4 {
  color: #c7c30a;
  font-weight: bold;
}

/* Attachment Details */

span.attachment-details4 {
  color: #BEAE30;
}

/* Attachment Link */

span.attachment-link4 a:link {
  color: #F8B18E;
  font-weight: bold;
  text-decoration: none;	
}

span.attachment-link4 a:visited {
  color: #F8B18E;
  font-weight: bold;
  text-decoration: none;		
}

span.attachment-link4 a:active,
span.attachment-link4 a:hover {
  color: #4586CB;
  text-decoration: underline;	
}

/* Usergroup 3 Super Moderator styling */

/* Fieldset Attachments */

fieldset.attachments-field3 {
/* add styling */
}

/* fieldset  active & hover states */

fieldset.attachments-field3:active,
fieldset.attachments-field3:hover {
/* add styling */
}

/* Legend Attachments Title Span */

span.attachments-legend3 {
/* add styling */
}

/* Attachment Details */

span.attachment-details3 {
/* add styling */
}

/* Attachment Link */

span.attachment-link3 a:link {
/* add styling */
}

span.attachment-link3 a:visited {
/* add styling */
}

span.attachment-link3 a:active,
span.attachment-link3 a:hover {
/* add styling */
}

/* Usergroup 6 Moderator styling */

/* Fieldset Attachments */

fieldset.attachments-field6 {
/* add styling */
}

/* fieldset  active & hover states */

fieldset.attachments-field6:active,
fieldset.attachments-field6:hover {
/* add styling */
}

/* Legend Attachments Title Span */

span.attachments-legend6 {
/* add styling */
}

/* Attachment Details */

span.attachment-details6 {
/* add styling */
}

/* Attachment Link */

span.attachment-link6 a:link {
/* add styling */
}

span.attachment-link6 a:visited {
/* add styling */
}

span.attachment-link6 a:active,
span.attachment-link6 a:hover {
/* add styling */
}

You then would copy and modify the aforementioned for each usergroup styling changing the specific gid # ie: "4" to "whatever" usergroups posted attachments you wanted this to be displayed for and edit the specific colors/styling to reflect each preferred gid styling, hopefully that makes sense.

ie:
[Image: Test-Thread-2.png]

here is an example with usergroup 4 =>  administrator, 3 => super moderator, 6 => moderator, 2 => registered, defined:

/* Postbit Attachment Styling by GID */

/* administrator */

/* Fieldset Attachments */

fieldset.attachments-field4 {
  border-color: #008000;
  background: #B1F279;
}

/* fieldset  active & hover states */

fieldset.attachments-field4:active,
fieldset.attachments-field4:hover {
  background: #fff8f9;
}

/* Legend Attachments Title Span */

span.attachments-legend4 {
  color: #008000;
  font-weight: bold;
}

/* Attachment Details */

span.attachment-details4 {
  color: #008000;
}

/* Attachment Link */

span.attachment-link4 a:link {
  color: #008000;
  font-weight: bold;
  text-decoration: none;	
}

span.attachment-link4 a:visited {
  color: #008000;
  font-weight: bold;
  text-decoration: none;		
}

span.attachment-link4 a:active,
span.attachment-link4 a:hover {
  color: #003400;
  text-decoration: underline;	
}

/* moderator */

/* Fieldset Attachments */

fieldset.attachments-field3 {
  border-color: #CC00CC;
  background: #FFD6FC;
}

/* fieldset  active & hover states */

fieldset.attachments-field3:active,
fieldset.attachments-field3:hover {
  background: #fff8f9;
}

/* Legend Attachments Title Span */

span.attachments-legend3 {
  color: #CC00CC;
  font-weight: bold;
}

/* Attachment Details */

span.attachment-details3 {
  color: #CC00CC;
}

/* Attachment Link */

span.attachment-link3 a:link {
  color: #CC00CC;
  font-weight: bold;
  text-decoration: none;	
}

span.attachment-link3 a:visited {
  color: #CC00CC;
  font-weight: bold;
  text-decoration: none;		
}

span.attachment-link3 a:active,
span.attachment-link3 a:hover {
  color: #990099;
  text-decoration: underline;	
}

/* super moderator */

/* Fieldset Attachments */

fieldset.attachments-field6 {
  border-color: #CC00CC;
  background: #FFD6FC;
}

/* fieldset  active & hover states */

fieldset.attachments-field6:active,
fieldset.attachments-field6:hover {
  background: #fff8f9;
}

/* Legend Attachments Title Span */

span.attachments-legend6 {
  color: #CC00CC;
  font-weight: bold;
}

/* Attachment Details */

span.attachment-details6 {
  color: #CC00CC;
}

/* Attachment Link */

span.attachment-link6 a:link {
  color: #CC00CC;
  font-weight: bold;
  text-decoration: none;	
}

span.attachment-link6 a:visited {
  color: #CC00CC;
  font-weight: bold;
  text-decoration: none;		
}

span.attachment-link6 a:active,
span.attachment-link6 a:hover {
  color: #990099;
  text-decoration: underline;	
}

/* registered */

/* Fieldset Attachments */

fieldset.attachments-field2 {
  border-color: #0072BC;
  background: #F5F5F5;
}

/* fieldset  active & hover states */

fieldset.attachments-field2:active,
fieldset.attachments-field2:hover {
  background: #EFEFEF;
}

/* Legend Attachments Title Span */

span.attachments-legend2 {
  color: #0072BC;
  font-weight: bold;
}

/* Attachment Details */

span.attachment-details2 {
  color: #0072BC;
}

/* Attachment Link */

span.attachment-link2 a:link {
  color: #0072BC;
  font-weight: bold;
  text-decoration: none;	
}

span.attachment-link2 a:visited {
  color: #0072BC;
  font-weight: bold;
  text-decoration: none;		
}

span.attachment-link2 a:active,
span.attachment-link2 a:hover {
  color: #005389;
  text-decoration: underline;	
}

You would then need to keep adding for all of your various other usergroups....

etc, etc

this by GID variant is now a tutorial @ https://community.mybb.com/thread-231443...pid1363717