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&section=view&module=list&showall=0&sort_key=members_l_display_name&sort_order=asc&max_results=20&app=members&section=view&module=list&name_box=begins&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&section=view&module=list&showall=0&sort_key=members_l_display_name&sort_order=asc&max_results=20&app=members&section=view&module=list&name_box=begins&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&section=view&module=list&showall=0&sort_key=members_l_display_name&sort_order=asc&max_results=20&app=members&section=view&module=list&name_box=begins&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&section=view&module=list&showall=0&sort_key=members_l_display_name&sort_order=asc&max_results=20&app=members&section=view&module=list&name_box=begins&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&section=view&module=list&showall=0&sort_key=members_l_display_name&sort_order=asc&max_results=20&app=members&section=view&module=list&name_box=begins&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.