User Group Legend Re-Design

Hi

Here's my forum: http://eternalchaos.forumotion.com/

The group legend at the bottom, I want to completely redesign into a sort of table, and remove the Italics from it. Is this possible?

Code:

em b {
background: none repeat scroll 0 0 #F9F9F9;
border: 1px solid #C7C7C7;
border-radius: 3px 3px 3px 3px;
font-style: normal;
margin: 0 auto;
padding: 4px!important;
}

Change

Code:

background: none repeat scroll 0 0 #F9F9F9;
border: 1px solid #C7C7C7;

With what colour you want to have table.

Thanks RicYui, but that didn't fully work. Now the Legend is cluttered and not spaced out correctly at all. T_T

Code:

em b {
background: none repeat scroll 0 0 #F9F9F9;
border: 1px solid #C7C7C7;
border-radius: 3px 3px 3px 3px;
font-style: normal;
margin: 0 auto;
padding: 4px!important;
line-height: 25px;
}

Try now.

Alright, now how do I remove the [ ] and make it so one group doesn't overflow a line?

Go to Modules>Javascript Codes Management
Enable Javascript code management :Yes
Create a new javascript.
Title: Groups
Check In Homepage.
Add this code.
Make sure you add the proper group ids & font colors to each group.

Code:

jQuery(document).ready(function() {
jQuery('em').replaceWith('<div id="g-legend"><b><font color="#49007d">Legend:</font> <a href="/g1-"><font color="#F50E0E">Administrator</font></a>&nbsp <a href="/g2-"><font color="#000099">Moderator</font></a> </div>');
});

Then add this to your css.

Code:

div#g-legend b a {
background: none repeat scroll 0 0 #F9F9F9;
border: 1px solid #C7C7C7;
border-radius: 3px 3px 3px 3px;
font-style: normal;
margin: 0 auto;
padding: 4px!important;
line-height: 25px;
}

div#g-legend b a:hover{
    color: #FFFFFF;
    text-shadow: -1px 1px 5px #FFFFCC, 1px -1px 5px #FFFFFF
}

Reference: Modified based on this.
http://www.webartzforum.com/t2276-help-me-to-add-2-things-to-this-code

About the word to be in next line, I will provide the solution after you do the above.

Alright, I did that... but now the Legend is showing up twice? ._.

I checked it on Firefox, and it's not showing up twice.. so that's exclusively on Chrome..

Yes, Chrome has issues then.

Update!

So, it turns out it will happen on any browser. It's happening in place of any user who has their status set to "Hidden"; the entire legend is repeated in place of their username.