XF 1.2 User Group Styling for groups other than staff

[Twitchy]

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?

 

[Paul B]

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

 

[Twitchy]

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

 

[Paul B]

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

 

[Twitchy]

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

 

[celebrir]

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

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:

<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="$user" size="m" img="true" />
            <!-- slot: message_user_info_avatar -->
        </div>

And this in EXTRA.css:

.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:

Spoiler: Picture

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.

Spoiler: Picture

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