1. 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?

Discussion in 'Styling and Customization Questions' started by clove28, Jun 21, 2016.

  1. clove28

    clove28 Active Member

    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!
     
  2. ncbetz

    ncbetz Formerly Noah Betz

    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 likes this.
  3. clove28

    clove28 Active Member

    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?
     
  4. ncbetz

    ncbetz Formerly Noah Betz

    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?
     
  5. Steve F

    Steve F Well-Known Member

  6. clove28

    clove28 Active Member

    I couldn't understand much from the conditionals.. hehe! Could you help me through adding a class Steve? :)
     
  7. Steve F

    Steve F Well-Known Member

    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.
     
  8. Brad P

    Brad P Active Member

    Steve, is it possible to use your method on something like the message user info in posts,threads.


    basically having a circular colour around the avatars of the user groups?
     

    Attached Files:

  9. Steve F

    Steve F Well-Known Member

    Yes, you would need to add it in the message_user_info template inside avatarHolder element. Also would need to switch $message with $user.
     
  10. Brad P

    Brad P Active Member

    Something i am doing is wrong
    upload_2016-6-22_9-51-7.png

    Then i added this in extra css
    .adminClass
    {
    background: red;
    }
     

Share This Page