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

XF 1.2 User Group Styling for groups other than staff

Discussion in 'Styling and Customization Questions' started by Twitchy, May 28, 2014.

  1. Twitchy

    Twitchy New Member

    So I have been reading this guide a ton, but still cant seem to find my answer.

    In the guide, I was able to make changes to staff class. For example:

    .staff .avatarHolder {
    background-color: @primaryLighter !important;
    }

    .staff .messageUserBlock {
    background-color: @primaryLightish;
    border-color: @primaryLightish;
    }

    .staff .messageUserBlock .arrow {
    border-left-color: @primaryLightish;
    }

    .staff .messageUserBlock .arrow span {
    border-left-color: @primaryLighter;
    }


    i would like to do the same for other user groups. Like our VIP group could have a gold background color for the avatarHolder spot. For example:

    .VIP .avatarHolder {
    background-color: gold;
    }

    Im editing in the EXTRA.css template, but cant figure this out! Any suggestions?
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    There are no classes for the user groups, only staff, so you can't utilise the same concept.
     
  3. Twitchy

    Twitchy New Member

    Would there be any way to accomplish my goal without having different classes for the usergroups then?
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    You would need to edit the templates and use conditional statements utilising the user group ID.
     
  5. Twitchy

    Twitchy New Member

    Ok great. Ill check the FAQ out on conditonal's. Thanks!
     
  6. celebrir

    celebrir Member

    Where can I find this template?

    Currently I created a class of the Original poster and for myself as the Manager of the forum. I use the tutorial by @Shelley: https://xenforo.com/community/resources/threadstarter-ribbon.2274/

    This piece of code in message_user_info:
    PHP:
    <div class="avatarHolder">
                <
    xen:if is="{$post.user_id} == {$thread.user_id} "><span class="op" title="Original Poster"></span></xen:if>
                <
    xen:if is="{$post.user_id} == 45 "><span class="celeb"></span></xen:if>
                <
    xen:avatar user="$usersize="m" img="true" />
                <!-- 
    slotmessage_user_info_avatar -->
            </
    div>
    And this in EXTRA.css:
    Code:
    .thread_view .message .avatarHolder .op{
      display: block;
      position: absolute;
      top: -4px;
      left: 2px;
      content: "";
      background: url("@imagePath/xenforo/icons/OP2.png") no-repeat  transparent;
      height: 107px;
      width: 107px;
      background-size: 50%;
    }
    .conversation_view .quickReply .avatarHolder .op {display:none;}
    .avatarHolder .celeb{
      display: block;
      position: absolute;
      top: -5px;
      left: 54px;
      content: "";
      background: url("@imagePath/xenforo/icons/FM1.png") no-repeat  transparent;
      height: 107px;
      width: 107px;
      background-size: 68%;
      z-index: 1;
    }
    Well, it does Work, but not as reliable as the .staff class.
    Sometimes it displayes the badges to anyone in the quickReply, sometimes it doesn't display them at all.

    That's how they should look like:
    [​IMG]

    Another issue is that when the width is under X pxl, then it completely messes them up, so I'd need an IF for that.
    [​IMG]

    Well, I'm pretty new to Xenforo and I have not found a big tutorial yet on how to do certain things. I have googled for this issue a good while and this here is my last hope.
    I'd be really thankful for a reply @Shelley @Brogan
     

Share This Page