Awesome Group Legends

[Douglas.x]

Go to Look & Feel> Your Theme> Manage Templates & CSS​​> CSS> ipb_style.css 

 

Add at the end:

/*************************************************************/
/* GRUPOS                                                   */
.legendas {
float: left;
padding-top: 2px;
background: #e5e5e5;
height: 18px;
padding-left: 2px;
padding-right: 2px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-bottom: 2px solid #ccc;
border-right: 2px solid #ccc;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
width: 200px;
margin-top: 5px;
margin-bottom: 3px;
}
.legenda1 {
font-size: 12px;
font-weight: bold;
padding: 0px 0px 5px 2px;
}
.admin {text-align:center; background-color:#d60101; width:13px; float:left; height: 13px; margin:2px; font-size:11px; cursor:pointer;}
.moderador {text-align:center; background-color:#17c200; width:13px; float:left; height: 13px; margin:2px; font-size:11px; cursor:pointer;}
.contribuidor {text-align:center; background-color:#7700c2; width:13px; float:left; height: 13px; margin:2px; font-size:11px; cursor:pointer;}
.honrado {text-align:center; background-color:#ff6c00; width:13px; float:left; height: 13px; margin:2px; font-size:11px; cursor:pointer;}
.membros {text-align:center; background-color:#000; width:13px; float:left; height: 13px; margin:2px; font-size:11px; cursor:pointer;}
.banido {text-align:center; background-color:#fc70f7; width:13px; float:left; height: 13px; margin:2px; font-size:11px; cursor:pointer;}

Now go to Templates> Board Index> boardIndexTemplate 

Add at the end:

<div class="legendas">
<div class="admin" onclick="window.location.href='index.php?app=members&amp;section=view&amp;module=list&amp;showall=0&amp;sort_key=members_l_display_name&amp;sort_order=asc&amp;max_results=20&amp;app=members&amp;section=view&amp;module=list&amp;name_box=begins&amp;filter=4'" onmouseover="document.getElementById('admin').style.display='block'" onmouseout="document.getElementById('admin').style.display='none'"></div>
<div class="moderador" onclick="window.location.href='index.php?app=members&amp;section=view&amp;module=list&amp;showall=0&amp;sort_key=members_l_display_name&amp;sort_order=asc&amp;max_results=20&amp;app=members&amp;section=view&amp;module=list&amp;name_box=begins&amp;filter=6'" onmouseover="document.getElementById('moderador').style.display='block'" onmouseout="document.getElementById('moderador').style.display='none'"></div>
<div class="contribuidor" onclick="window.location.href='index.php?app=members&amp;section=view&amp;module=list&amp;showall=0&amp;sort_key=members_l_display_name&amp;sort_order=asc&amp;max_results=20&amp;app=members&amp;section=view&amp;module=list&amp;name_box=begins&amp;filter=7'" onmouseover="document.getElementById('contribuidor').style.display='block'" onmouseout="document.getElementById('contribuidor').style.display='none'"></div>
<div class="honrado" onclick="window.location.href='index.php?app=members&amp;section=view&amp;module=list&amp;showall=0&amp;sort_key=members_l_display_name&amp;sort_order=asc&amp;max_results=20&amp;app=members&amp;section=view&amp;module=list&amp;name_box=begins&amp;filter=8'" onmouseover="document.getElementById('honrado').style.display='block'" onmouseout="document.getElementById('honrado').style.display='none'"></div>
<div class="membros" onclick="window.location.href='index.php?app=members&amp;section=view&amp;module=list&amp;showall=0&amp;sort_key=members_l_display_name&amp;sort_order=asc&amp;max_results=20&amp;app=members&amp;section=view&amp;module=list&amp;name_box=begins&amp;filter=3'" onmouseover="document.getElementById('membro').style.display='block'" onmouseout="document.getElementById('membro').style.display='none'"></div>
<div class="banido" onmouseover="document.getElementById('banido').style.display='block'" onmouseout="document.getElementById('banido').style.display='none'"></div>
<div class="legenda"><div class="legenda1">
<div id="admin" style="display: none; color:#d60101;">Administrador</div>
<div id="moderador" style="display: none; color:#17c200;">Moderador</div>
<div id="contribuidor" style="display: none; color:#7700c2;">Contribuidor</div>
<div id="honrado" style="display: none; color:#ff6c00;">Honrado</div>
<div id="membro" style="display: none; color: rgb(0, 0, 0);">Membro</div>
<div id="banido" style="display: none; color:#fc70f7; text-decoration: line-through;">Banido</div></div></div></div>

Result:

When you pass the mouse over the squares show they belong to which group each color.

Thank's
Sorry for the english, I used the translator.

[Slow_Brothers]

Realy nice Thanks.

[metonator]

Not bad

[vitalz0r]

cool thing banned guy

[M0L0Z]

Awesome work!

[devel]

Great ! Thanks you.

[CyberOn]

great stuff will be adding to my forum

[Jeiko]

as idea is good but i don't like it at all but it's a good idea to create something else based on your idea

[Little Monsters]

Where about on the forum does it appear? Can someone screenshot it?

[SkyDiver]

As stated in the first post

Go to Look & Feel> Your Theme> Manage Templates & CSS​​> CSS> ipb_style.css

which is in the admin cp

[ica]

Thanks!

[LucianDev]

Awesome, thanks. I was looking for something like this!

[majtek]

Is very good ;D

[cl45]

wow looks great. thanks for share

[KareraHekku]

Looks awesome!

Thanks for sharing!