http://www.ibforum.net/forum/tutorials/category/1-iooeeu-aedhaaeceaai/ Sun, 20 May 2012 00:52:05 +0000 1800 מערכת הפורומים IP.Board http://www.ibforum.net/forum/tutorials/article/1-oeo-iaaaoeaau-iuuiuei/
First of all go to the skin you want this to appear on (it could be all of them!).

Then click on the CSS, then go to ipb_styles.css Go down to the bottom and add this code:

.userManagement, .userCustomer, .userMember, .userValidating, .userGuest, .userStaff {color: white;background: #881418;padding: 3px 8px;font-size: 11px;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px;display: inline-block;}


note the:

color: white;
This makes the text white

background: #881418;


This determines the default color of the box, you could even use an image if you wanted! After that add this underneath what you have already added:

.userMember {
color: white;
background: #31B404;
padding: 3px 8px;
font-size: 11px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px;
display: inline-block;
}

.userValidating, .userGuest {
color: white;
background: #EFEFEF;
padding: 3px 8px;
font-size: 11px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px;
display: inline-block;
}


.userStaff {
color: white;
background: #D59944;
padding: 3px 8px;
font-size: 11px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px;
display: inline-block;
}

.userCustomer {
color: white;
background: #8904B1;
padding: 3px 8px;
font-size: 11px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px;
display: inline-block;
}



Now to finish off: Go to "Manage Member Groups" Click on Members,

On the Group Formatting Prefix box add this:

<span class="userMember">


on the Group Formatting Suffix add this:

</span>
and voila! you have your colored background!

Groups and the codes to use:

Spoiler


Remember you can always edit any of the colors simply by changing the HTML color code in the CSS. (Tip: look for a "#")

Once you have done all this you should get something like what is shown in the picture at the top!]]> Sun, 27 Nov 2011 18:49:06 +0000 1 mostang 1