CSS Help

[PGen98]

Hi all,

I'm trying to make a Christmas theme for one of my friends' boards, but I'm having a slight issue with the Quote and Edit buttons' text.  I can't seem to just correct the text on those two buttons, and they are the only ones showing the text as white, for some reason.  Can anyone tell what class I'm supposed to call to edit just the text on these two buttons?

Screenshot:

[Lynx]

Dec 3, 2021 12:27:01 GMT -8 PGen98 said:

Hi all,

I'm trying to make a Christmas theme for one of my friends' boards, but I'm having a slight issue with the Quote and Edit buttons' text.  I can't seem to just correct the text on those two buttons, and they are the only ones showing the text as white, for some reason.  Can anyone tell what class I'm supposed to call to edit just the text on these two buttons?

Screenshot:

View Attachment

The green background makes me think you're not using the default theme, so a forum URL would be helpful (it'll need to be open for guests for non-PB Staff to be able to help). A board that allows guest viewing would also be helpful, so the ID's and Classes can be obtained to get you an answer.

[PGen98]

Dec 4, 2021 10:45:45 GMT -8 Lynx said:

Dec 3, 2021 12:27:01 GMT -8 PGen98 said:

Hi all,

I'm trying to make a Christmas theme for one of my friends' boards, but I'm having a slight issue with the Quote and Edit buttons' text.  I can't seem to just correct the text on those two buttons, and they are the only ones showing the text as white, for some reason.  Can anyone tell what class I'm supposed to call to edit just the text on these two buttons?

Screenshot:

<button disabled="" class="c-attachment-insert--linked o-btn--sm">Attachment Deleted</button>

The green background makes me think you're not using the default theme, so a forum URL would be helpful (it'll need to be open for guests for non-PB Staff to be able to help). A board that allows guest viewing would also be helpful, so the ID's and Classes can be obtained to get you an answer.

I'm using the default theme, just in Christmas colours, unfortunately the Christmas theme is not guest viewable, but you can see a guest viewable thread here (it's the same ProBoards default theme, we just re-colour them): gibbysplace.freeforums.net/thread/15029/best-christmas-jumpers-festive-season

I've tried to find the IDs and classes, but I've tried everything from a.button to .button to no avail with those two particular buttons.

[Lynx]

Dec 4, 2021 11:27:12 GMT -8 PGen98 said:

Dec 4, 2021 10:45:45 GMT -8 Lynx said:

The green background makes me think you're not using the default theme, so a forum URL would be helpful (it'll need to be open for guests for non-PB Staff to be able to help). A board that allows guest viewing would also be helpful, so the ID's and Classes can be obtained to get you an answer.

I'm using the default theme, just in Christmas colours, unfortunately the Christmas theme is not guest viewable, but you can see a guest viewable thread here (it's the same ProBoards default theme, we just re-colour them): gibbysplace.freeforums.net/thread/15029/best-christmas-jumpers-festive-season

I've tried to find the IDs and classes, but I've tried everything from a.button to .button to no avail with those two particular buttons.

As a guest, I see the quote button text on the thread you linked.



If you look to the right, you'll see the CSS target for the Quote button I could see.



Without seeing the actual theme the issue is on, the above may or may not work. Only by seeing the actual theme the issue is on would I be able to give you a definitive answer - but the above may give you a starting point.

[PGen98]

Dec 4, 2021 14:42:23 GMT -8 Lynx said:

Dec 4, 2021 11:27:12 GMT -8 PGen98 said:

I'm using the default theme, just in Christmas colours, unfortunately the Christmas theme is not guest viewable, but you can see a guest viewable thread here (it's the same ProBoards default theme, we just re-colour them): gibbysplace.freeforums.net/thread/15029/best-christmas-jumpers-festive-season

I've tried to find the IDs and classes, but I've tried everything from a.button to .button to no avail with those two particular buttons.

As a guest, I see the quote button text on the thread you linked.

<button disabled="" class="c-attachment-insert--linked o-btn--sm">Attachment Deleted</button>

If you look to the right, you'll see the CSS target for the Quote button I could see.

<button disabled="" class="c-attachment-insert--linked o-btn--sm">Attachment Deleted</button>

Without seeing the actual theme the issue is on, the above may or may not work. Only by seeing the actual theme the issue is on would I be able to give you a definitive answer - but the above may give you a starting point.

Unfortunately using that class I can control the background, but the text itself does not change.  It's a very strange issue to be having.

[Lynx]

Dec 4, 2021 19:50:49 GMT -8 PGen98 said:

Dec 4, 2021 14:42:23 GMT -8 Lynx said:

As a guest, I see the quote button text on the thread you linked.

<button disabled="" class="c-attachment-insert--linked o-btn--sm">Attachment Deleted</button>

If you look to the right, you'll see the CSS target for the Quote button I could see.

<button disabled="" class="c-attachment-insert--linked o-btn--sm">Attachment Deleted</button>

Without seeing the actual theme the issue is on, the above may or may not work. Only by seeing the actual theme the issue is on would I be able to give you a definitive answer - but the above may give you a starting point.

Unfortunately using that class I can control the background, but the text itself does not change.  It's a very strange issue to be having.

Try adding a color property to it:


.posts .post .content-head .controls > a {
   color: #000000;
}


Change the #000000 to the color of your liking.

[Chris]

On a normal theme that text color would be governed by a rule that uses an a.button selector to define the color and with subsequent pseudo selector rules for .button:hover and .button:active to define alternate colors for those particular states.

Without seeing the actual theme, as previously stated, it is all guesswork on what is actually in that theme and which rules are taking precedence over other rules which is why the quickest way to a resolution is to have the theme available for inspection. Barring such access we will go on the assumption that the color is currently defined by the normal rule and not by some superseding rule which would require a different weighted rule to be overridden. With that said a rule such as .button:link{color:red;} would supersede the cascade on a standard theme yet still maintain the ability to have hover color and active color still work properly in the cascade if they are actually defined in that mystery Christmas theme.

SPOILER: Click to show

Edit:

---

The rule Lynx gives above since it contains more weight (.posts .post .content-head .controls > a: 4 classes and a tag-name) would override the standard rule (a.button: 1 class and a tag-name) but also override the rules (if exists in this mystery theme) that define pseudo-classes for hover and active states.

[PGen98]

Dec 5, 2021 4:13:50 GMT -8 Lynx said:

Dec 4, 2021 19:50:49 GMT -8 PGen98 said:

Unfortunately using that class I can control the background, but the text itself does not change.  It's a very strange issue to be having.

Try adding a color property to it:


.posts .post .content-head .controls > a {
   color: #000000;
}


Change the #000000 to the color of your liking.

That was precisely what I did try, to no avail. 

[PGen98]

Dec 5, 2021 5:23:10 GMT -8 Chris said:

On a normal theme that text color would be governed by a rule that uses an a.button selector to define the color and with subsequent pseudo selector rules for .button:hover and .button:active to define alternate colors for those particular states.

Without seeing the actual theme, as previously stated, it is all guesswork on what is actually in that theme and which rules are taking precedence over other rules which is why the quickest way to a resolution is to have the theme available for inspection. Barring such access we will go on the assumption that the color is currently defined by the normal rule and not by some superseding rule which would require a different weighted rule to be overridden. With that said a rule such as .button:link{color:red;} would supersede the cascade on a standard theme yet still maintain the ability to have hover color and active color still work properly in the cascade if they are actually defined in that mystery Christmas theme.

SPOILER: Click to show

Edit:

---

The rule Lynx gives above since it contains more weight (.posts .post .content-head .controls > a: 4 classes and a tag-name) would override the standard rule (a.button: 1 class and a tag-name) but also override the rules (if exists in this mystery theme) that define pseudo-classes for hover and active states.

I've tried every class and pseudo-class outlined in these posts so far, and nothing is changing that particular text colour.  I can't understand why, as the only difference between the standard style and the style I have are customizations to .title-bar, #banner-container and .list a.  None of those should interfere with that particular text, to my understanding.  Otherwise it's just colour changes on the default style, nothing else.

[Chris]

All you have to do is make the theme accessible and you will have your answer. If you don't know how to track CSS hierarchy and origins there are many here that can but nobody can definitively tell you what the problem is if they have no access to see what the problem is. Someone will undoubtedly suggest an !important modifier but that will not be the proper solution either and will do more harm than good in the long run.

Set the theme as the default on your test/demo forum, ensure the issue is still there and give the link in a PM if you don't want to post it publicly.

[PGen98]

Dec 5, 2021 20:59:36 GMT -8 Chris said:

All you have to do is make the theme accessible and you will have your answer. If you don't know how to track CSS hierarchy and origins there are many here that can but nobody can definitively tell you what the problem is if they have no access to see what the problem is. Someone will undoubtedly suggest an !important modifier but that will not be the proper solution either and will do more harm than good in the long run.

Set the theme as the default on your test/demo forum, ensure the issue is still there and give the link in a PM if you don't want to post it publicly.

I've set it as the default theme for now -- gibbysplace.freeforums.net

[Chris]

Dec 5, 2021 21:29:41 GMT -8 PGen98 said:

Dec 5, 2021 20:59:36 GMT -8 Chris said:

All you have to do is make the theme accessible and you will have your answer. If you don't know how to track CSS hierarchy and origins there are many here that can but nobody can definitively tell you what the problem is if they have no access to see what the problem is. Someone will undoubtedly suggest an !important modifier but that will not be the proper solution either and will do more harm than good in the long run.

Set the theme as the default on your test/demo forum, ensure the issue is still there and give the link in a PM if you don't want to post it publicly.

I've set it as the default theme for now -- gibbysplace.freeforums.net

There is a CSS rule that specifies -*-text-fill-color for all links within the .list class that overrides any text color specified on those links

.list a {
   background: linear-gradient(to right, #ff7878, #74d680, #d2d2d2, #74d680, #ff7878);
   background-clip: text;
   -webkit-background-clip: text;
   -moz-background-clip: text;
   -moz-text-fill-color: transparent;
   -webkit-text-fill-color:transparent;
}


Commenting out the line that governs my browser allowed the red to shine through once again

[PGen98]

Dec 5, 2021 21:48:06 GMT -8 Chris said:

Dec 5, 2021 21:29:41 GMT -8 PGen98 said:

I've set it as the default theme for now -- gibbysplace.freeforums.net

There is a CSS rule that specifies -*-text-fill-color for all links within the .list class that overrides any text color specified on those links

.list a {
   background: linear-gradient(to right, #ff7878, #74d680, #d2d2d2, #74d680, #ff7878);
   background-clip: text;
   -webkit-background-clip: text;
   -moz-background-clip: text;
   -moz-text-fill-color: transparent;
   -webkit-text-fill-color:transparent;
}


Commenting out the line that governs my browser allowed the red to shine through once again

Right in front of my face the whole time.  I appreciate the help, Chris, thank you so much!