Getting Group Colors to Show

[Eloell]

Hope this is the right place!

So on the site I'm working on we want our different groups to change account colors. It is set up correctly in the group area, but I think there is a code in the theme I downloaded that overrides the display of group colors?

If that's the case, can anyone give me a hint as to where to find that code? I've been combing through the CSS and can't locate it (I'm a newbie). If not, is there a way to override THAT code and return group colors to names? THANKS!

[Eloell]

All these coding wizards and nobody knows?!

[Kitty Katt]

Hello, Eloell.

Have you tried disabling the Style Tag plugin to see if that corrects the issue?

[Eloell]

Thank you for this suggestion!

I just turned it off and nothing has changed.

[Todge]

What have you tried so far?

[Eloell]

1. Turning off Style Tag plugin.
2. Combed through CSS trying to find the code. randomly plugged in color:[current_user.color]--or something like that. A code I found somewhere else.

It just seems like something is blocking the group colors from showing. I'm ASSUMING it is a code somewhere in the theme. I've taken hours just looking and can't seem to locate it. Then again, I don't know what the code for group color names would look like. If you have any idea about that code then I'm sure I can find it and hopefully render it.

[Todge]

I'm sorry, I don't know templates too well, so if it's a template problem you'd need to ask for help in the Templates board.

Assuming it is NOT a template problem.. Have you tried using straight CSS to change group colors?

[Lynx]

Also, keep in mind that a member must have that group as their display group (Profile > Edit Profile > Settings (tab) > Display Group) in order for the color associated with that group to show.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Sept 30, 2017 18:48:58 GMT -8 Eloell said:

Hope this is the right place!

So on the site I'm working on we want our different groups to change account colors. It is set up correctly in the group area, but I think there is a code in the theme I downloaded that overrides the display of group colors?

If that's the case, can anyone give me a hint as to where to find that code? I've been combing through the CSS and can't locate it (I'm a newbie). If not, is there a way to override THAT code and return group colors to names? THANKS!

From everything I'm seeing it says that the color is dictated by class "container"
and is the default color
Nothing is trying to change it's color.
Perhaps I'm looking at the wrong groups?

[Chris]

a {
    cursor: pointer;
    color: #029292 !important;
    font: 100% Arial,Verdana;
    text-decoration: none!important;
}

The use of the !important nuclear option should be a last resort... it can destroy the cascade and blot out the sun for a 1000 years.

[Eloell]

Todge: I have not tried using straight CSS - I don't know how to write it, only edit it, and I'm afraid I don't have a clue about which code would account for the group colors.

MSG: Yes, it is set on that! When you go to look at someone's profile the appropriate group color shows...it just doesn't show anywhere else (like when you see their name that they replied to a thread, in their mini profiles, etc)

P??a?s??t?u?le?o?2?3??: I know very little about what you just said... xD So should I come through my CSS and change the places that say container? But what would I change them to? Or are you just saying in general that no code is messing with group colors?

Chris: The "!important" is all over this theme's CSS! Are you saying I should delete them all? THEY SHALL NOT TAKE MY SUN AWAYYYYYYYYY.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Oct 12, 2017 17:10:03 GMT -8 Eloell said:

Todge: I have not tried using straight CSS - I don't know how to write it, only edit it, and I'm afraid I don't have a clue about which code would account for the group colors.

MSG: Yes, it is set on that! When you go to look at someone's profile the appropriate group color shows...it just doesn't show anywhere else (like when you see their name that they replied to a thread, in their mini profiles, etc)

P??a?s??t?u?le?o?2?3??: I know very little about what you just said... xD So should I come through my CSS and change the places that say container? But what would I change them to? Or are you just saying in general that no code is messing with group colors?

Chris: The "!important" is all over this theme's CSS! Are you saying I should delete them all? THEY SHALL NOT TAKE MY SUN AWAYYYYYYYYY.

If you want the color to appear other places, you will have to apply the class to all the stylesheets that u want modified. If !important is everywhere, God rest your soul. Removing !important would be harmful though. Your in a bad spot. You might have to go through your advanced css and add the class that changes the colors to each element with the !important modifier to combat the default style important modifier

[Chris]

The specific rule with the important modifier that I highlighted in red is what is responsible for suppressing the inline colors supplied by Proboards for the user links. It is only this important modifier that is relevant to this problem.

Using !important in your CSS usually means you're narcissistic & selfish or lazy. Respect the devs to come...

SPOILER: Click to show

My previous comment is just a commentary on the general abuse of important modifiers. Rather than working out the specificity required to construct a rule that would override another rule and stay within the intended cascade system, someone instead resorts to using the easy way out with important modifiers then the only way to counteract that is with an even stronger important modifier (and once again we're back to calculating specificity) and so nothing is accomplished except an arms race leading to the eventual destruction of the cascaded system.

It isn't even that hard to work out the specificity nowadays with every browser having an inspect element showing the rules that apply to an element and which one is taking precedence through being more specific or by other means.

Somewhere in that theme that rule lives . I personally cannot see into your forum (an @admin can) to tell you exactly where so you'll need to find it and figure out why someone decided to use the modifier rather than construct a rule with a bit more weight to offset whatever that modifier was intended to combat.

CSS Specificity Poker Analogy

---

If you're not from the programming world and CSS seems a bit confusing, perhaps this analogy may help clear some concepts up. Think of CSS rules as poker hands. The best hand determines an element's style.

SPOILER: Click to show

Your Hand

Cards in this analogy would be the selectors within a CSS rule. Most CSS rules consist of element selectors, class selectors, and ID selectors.

• element selectors such as div
• class selectors such as .sidenote matches elements with an attribute class="sidenote"
• ID selectors such as #navigation matches the element with attribute id="navigation"

Ace High to Open

The weakest rules contain only element selectors.

h1 p { font-size: 1em; }

That rule is basically deuce high. Two element selectors, h1 and p. Pseudo-elements are considered elements for the purpose of specificity computation, so these two rules are equal in their specificity:

p:first-line adiv p a

However, we all know that a 5 beats a 3. In the same way, the most elements included in a rule will win the specificity hand. Five elements...

body div div h1 p

...beats three elements...

div h1 p

Tie-Breakers

If two rules have identical specificity as they do above, then the last rule processed wins. There's no direct poker analogy, but in blackjack, the dealer plays last and wins ties.

Pairs Beat Ace High

Even a pair of 2s beats a single Ace. In the same way, including a class selector beats any number of element selectors.

p.introduction

...or just...

.introduction

...beats...

html body div div h2 p

...as long as rules apply to the same p element. Also keep in mind that a class specification doesn't have to be associated with the final HTML element. This definition will also beat any element-only rule:

div.introduction p

Just the presence of the class specification anywhere within a CSS rule will give you a winning hand over any element-only declaration. And rules with more classes beat rules with fewer classes:

div.content div.summary p.intro

...beats...

div.content div p.intro

Pseudo-classes are considered classes for the purposes of computing specificity, making these two rules equal in their specificity...

div a:linkdiv a.friend

Three-of-a-Kind Beats any Pair

Just as any three-of-a-kind beats any pair, CSS rules with ID selectors beat rules with any number of class selectors.

#content img

...beats...

body div.wrapper div.summary p.intro img

And more ID selectors beat fewer ID selectors in the same way more class selectors beat fewer class selectors.

Full-House Beats Three-of-a-Kind

And, as you would expect, specifying an ID and a class will beat a rule with either one alone.

div#content.summary li

...beats all these...

div#content ul lidiv.content div.secondary lidiv ul li

The Joker is Wild

The ! important specifier is the Joker in the deck. The rules so far are easy and straightforward to follow. "! important" throws a wrench into the system.

In card-playing terms, the Joker trumps all. That means, your "! important" rules let you override otherwise more specific rules.

Use of this selector is discouraged because it disrupts the orderly cascade in play. Often folks add a rule to a style sheet and, when they don't see a change because of normal specificity rules, they slap "! important" to the rule. This is a misuse of the selector, sloppy CSS, and eventually leads to "! important" wars whereby every rule seems to need the selector. For instance:

#pagewrapper div a { color: black; }

...is (improperly) overridden by...

#content a { color: red ! important; }

...when just adding some specificity like this...

#pagewrapper #content a { color: red; }

...would have been a more appropriate way to apply styling to that area of the page.

Know When To Hold 'Em

The strategy I've adopted for styling documents doesn't give away my hand up front and gives me easy control over styling in all areas of the page.

1. Put generic declarations first (body, a) to define the overall styles for the page
2. Override only those values necessary in the different sections with ID or class selectors (#navigation.a, .article)
3. Zero in on specific areas with additional ID or class selectors (#navigation ul.subsection a, #footer p a)

What you want to avoid is starting out by defining styles with high-value selectors, such as

div#pagewrapper div#contentwrapper a

Overriding the anchor styles later on would mean a lot of specification, so be strategic and start generically and build up specification values as you zoom in on specific elements on your page.

Know When To Fold 'Em

Take a look at these XHTML and CSS snippets. What color will the main paragraph text be?

XHTML:<body><div id="pagewrapper"><div class="content"><p>This is the main paragraph.</p></div><div class="secondary"><p>This is the secondary paragraph.</p></div></div></body>CSS:p { color: red; }body div { color: brown; }div#pagewrapper { color: blue; }#pagewrapper div.content { color: green; }

The answer might surprise you. It will be red. Even though parent elements are specified to the gills and color is an inherited attribute, you must look for the element being styled first before taking into account any specificity conflicts.

In this case, all bets are off since the final three rules never targeted the paragraph element.

Alternatively, you can just declare war as suggested by P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ which would entail drafting an entirely new set of overriding rules to mirror and enforce the original inline rules that were provided by Proboards for each and every group color making sure each of those soldiers are equipped with superior weaponry to blow away that important enemy rule. In this particular case though with the enemy rule only uses an html tag name something utilizing the class would be more specific and thus override it so you could do this  .user-link.group-17 {color: #b7f061!important;} and so on for each and every group which to me seems plain mental just because somebody wanted to use a modifier instead of properly work out a weighted rule.

[Eloell]

I have been reduced to the state of an invalid in the midst of coding gods. The words you speak are high--I cannot attain them.

I AM capable, despite me limited mind, to read the underlying message, and I fear the warning is so great (and the forum I am using this theme on is not so important) that I would not jeopardize other various details for the sake of proper group colors...which I would, in my ignorance, inevitably transgress upon.

You guys are great! Thank you SO MUCH for giving me answers. When I originally posted this I was willing to type my fingertips to a pulp to accomplish my task..but nowadays I'm not so driven, so I'll quietly sit back and let the dreaded 'important!' do what the theme's lazy (but talented) creator meant for it to do.