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

CSS to show group titles and images on members forum profile

Tracy Perry

Well-known member
Something similar to this may already be posted, and if so this can be deleted. I have spent some time reading and haven't come across this exactly yet so it's posted here for those who wish to use it. I'm not a technical writer by any means (ex cop, hardware geek and motorcycle rider/mechanic).

This code snippet was modified from what I have found here. What it will do is give you a colorized group below the user name/avatar, and allow you to post an image in it (I use it for the rank promotions). It needs to be placed in EXTRA.css

CSS Code:

.custom-title-vend {
background:magenta url('images/images/gold_coin_redgreen.png') no-repeat left top;
border: 1px solid @primaryDarker;
border-radius: 4px;
padding: 4px;
margin: 4px 0;
text-align: center;
color: white;

.sidebar .custom-title-vend {
margin-left: 43px;
max-width: 80px;

And then in your "Groups" choose the "Use the following user title". Place similar code to this in the box below (this fits for the above snippet):

<div class="custom-title-vend">Vendor</div>

The "custom-title-vend" section must match the CSS code of .custom-title-vend (you can use anything you want as long as it is not code the replicates existing - this was easier to keep up with and is what the example that I shamelessly borrowed this from used).
This will give you something similar to the image attached.


Tracy Perry

Well-known member
Duhhh.. just learning where everything goes.. and I really didn't think it was that great of a "improvement"... just something I slapped together real quick. Will move it over there.