CSS to show group titles and images on members forum profile

[TPerry]

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.

 

[Jake Bunce]

Thanks. But it would be best to post this as a resource.

http://xenforo.com/community/resources/

 

[TPerry]

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.