• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.5 How to change the background color of every post from a certain usergroup?

clove28

Active member
#1
Hi there!

I would like to ask how to highlight or put a background color on every post of certain usergroup? I want to highlight the posts of the VIP usergroup in my forum. How can I do this in Extra CSS? I hope someone could help me with this. Thanks!
 

ncbetz

Formerly Noah Betz
#2
Put the following in your extra.css:
Code:
.staff .messageContent {
    background-color: @primaryLighterStill;
}
You obviously can change the "background-color:", and the user group it affects (.staff).

To learn more, please go to this page.
 

clove28

Active member
#3
Put the following in your extra.css:
Code:
.staff .messageContent {
    background-color: @primaryLighterStill;
}
You obviously can change the "background-color:", and the user group it affects (.staff).

To learn more, please go to this page.
I have read the instruction. But I think it is only applicable for the basic groups. How about the newly created group like premium members? How can I add that class?
 

ncbetz

Formerly Noah Betz
#4
I have read the instruction. But I think it is only applicable for the basic groups. How about the newly created group like premium members? How can I add that class?
I believe you could do:
Code:
.vip .messageContent {
    background-color: @primaryLighterStill;
}
Or maybe you could try it in the custom user styling properties when managing the usergroup?
 

Steve F

Well-known member
#7
I couldn't understand much from the conditionals.. hehe! Could you help me through adding a class Steve? :)
Sure

In the template 'message' find near the top:
Code:
<li id="{$messageId}" class="message
Directly after (with a space before and after) add:
Code:
{xen:if {xen:helper ismemberof, $message, 5}, 'testClass'}
That line should look like this (assuming the template is default here):
Code:
<li id="{$messageId}" class="message {xen:if {xen:helper ismemberof, $message, 5}, 'testClass'} {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_staff}', 'staff'} {xen:if $message.isIgnored, ignored}" data-author="{$message.username}">

Change the red bits to what you need. You can add more groups for that class by separating the group numbers by a comma (5, 6, 7, 8).

Then in EXTRA.css you can target those messages with the "testClass" by doing:
Code:
.testClass
{
        background: red;
}
Depending on your style it may look a bit bad or weird so you may need extra styling.
 

Steve F

Well-known member
#9
Yes, you would need to add it in the message_user_info template inside avatarHolder element. Also would need to switch $message with $user.