Идея для легенды групп

[Nikolas*]

Здравствуйте. Сегодня с утра пришла идея для легенды групп. И вот решил воплотить её в реальность. При наведении на цвет группы "выкатится" название группы с данным цветом.

Вот так это выглядет.
Приступим.
1. Перейти Admin CP -> Внешний вид -> Ваш шаблон ->Список форумов -> boardIndexTemplate и добавить в нижней части кода следующий код:

<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="contributor" 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('contributor').style.display='block'" onmouseout="document.getElementById('contributor').style.display='none'"></div>
<div class="freelancer" 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('freelancer').style.display='block'" onmouseout="document.getElementById('freelancer').style.display='none'"></div>
<div class="member" 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('member').style.display='block'" onmouseout="document.getElementById('member').style.display='none'"></div>
<div class="ban" onmouseover="document.getElementById('ban').style.display='block'" onmouseout="document.getElementById('ban').style.display='none'"></div>
<div class="legenda"><div class="legenda1">
<div id="admin" style="display: none; color:#FF1515;">Администратор</div>
<div id="moderador" style="display: none; color:#1C86EE;">Модератор</div>
<div id="contributor" style="display: none; color:#7700c2;">Активный</div>
<div id="freelancer" style="display: none; color:#E67E22;">Фрилансер</div>
<div id="member" style="display: none; color: green;">Пользователь</div>
<div id="ban" style="display: none; color:#000; text-decoration: line-through;">Заблокированный</div></div></div></div>

2. Перейдите в АЦ -> Внешний вид -> Ваш шаблон -> Перейдите в раздел css -> ipb_styles.css и добавить в нижней части кода это:

/*************************************************************/
/* GRUPS                                                */
.legendas {
float: left;
padding-top: 2px;
background: #F3F3F3;
border-radius: 3px;
border: 1px solid #DFDFDF;
height: 18px;
padding-left: 2px;
padding-right: 2px;
width: 250px;
margin-top: 5px;
margin-bottom: 3px;
}
.legenda1 {
font-size: 12px;
font-weight: bold;
padding: 0px 0px 5px 2px;
}
.admin {text-align:center; background-color:#FF1515; width:13px; float:left; height: 13px; margin:2px; font-size:11px; cursor:pointer;}
.moderador {text-align:center; background-color:#1C86EE; width:13px; float:left; height: 13px; margin:2px; font-size:11px; cursor:pointer;}
.contributor {text-align:center; background-color:#7700c2; width:13px; float:left; height: 13px; margin:2px; font-size:11px; cursor:pointer;}
.freelancer {text-align:center; background-color:#E67E22; width:13px; float:left; height: 13px; margin:2px; font-size:11px; cursor:pointer;}
.member {text-align:center; background-color:green; width:13px; float:left; height: 13px; margin:2px; font-size:11px; cursor:pointer;}
.ban {text-align:center; background-color:#000; width:13px; float:left; height: 13px; margin:2px; font-size:11px; cursor:pointer;}

На этом всё. Кому понравилось ставьте +сики