write a reply

Help with User Group Colours in Templates

pronounsshe/her
8written posts
nokiearned bits
offlinecurrently
noki
New Member
noki Avatar
Hi coders!

This is something thats bugged me for a long time and I'm gonna finally bite the bullet. I would like to make the user group colour pop up when using H1 tags throughout the site. So like in posts and stuff. Am I missing something? I know in layout templates you use $[user.group.color]!important but that doesn't work in the CSS. 

Anyone can lend a hand? 
aliasantiviral
pronounsHe/Him
258written posts
Beetleearned bits
offlinecurrently
Beetle
Senior Member
Beetle Avatar
It's been a while since I touched proboards coding, but I took a look, and it seems like this can be achieved in the same way that it's done on jcink, there's just different variables in play!

First step is to go to your forum wrapper and find the <body> tag. Change it to the following:
<body id="$[current_user.group.content_id]">

This will change the body id depending on the group of the user viewing it and is unique to each group.

Then you'll want to go to your CSS and set up variables. For example, if I wanted group 1 as black, group 2 as white, and group 3 as grey I would set it up as:
#group-1 {
--accent: #000;
}

#group-2 {
--accent: #fff;
}

#group-3 {
--accent:#808080;
}


Wherever in the code you want it to change to the group color you would replace the hex code with var(--accent). For example:
h1 {
color:var(--accent);
}


For more information on variables, here's the W3schools article because they can describe it better than me.

Edit: Forgot to mention that you can find the group number by going to edit the group and looking at the URL. The group ID will always be "group-#" with # being the group number found in this URL.


last edit on Sept 8, 2023 18:35:27 GMT by Beetle

Solar Waltz, an 18+ panfandom set in NYC