Продолжая развивать дизайнерское оформления готового решения под названием кнопки мне нравится, я создал аналогичную кнопку, в тёмном варианте с надписью полезный материал.
Шаг 1 - Установим HTML:
Заходим в Админ панель => Дизайн => Управления дизайном и выбираем нужным модуль вашего сайта (новости, блог, каталог и т.д.) и на странице материала и комментариев к нему заменяем стандартный код рейтинга:
Code
<?if($RATING$)?><div style="float:right"><?$RSTARS$('12','/.s/img/stars/3/12.png','1','float')?></div><?endif?>
Для раздела каталог файлов (load)
Code
<?if($RATING$)?>
<div id="rating_os">
<a href="javascript://" id="golike" onclick="$.get('/load/0-1-1-$ID$-3',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали данный материал!','Ошибка',{w:270,h:60,t:8000}); else {_uWnd.alert('Вы успешно оценили!','Успех',{w:270,h:60,t:8000})};});">
<div id="rating_l">Полезный материал</div>
</a>
<div id="rating_p">+$RATED$</div>
</div>
<?endif?>
Шаг 2 - Установим CSS:
Теперь нам осталось прописать css стили для тёмного варианта кнопки:
Code
#rating_os {
float:right;
font: 11px Verdana,Arial,Helvetica, sans-serif;
color:#F5BF05; text-shadow: 1px 1px 1px #252525;
}
#rating_os a:link,
#rating_os a:visited,
#rating_os a:hover {text-decoration:none; color:#eee;}
#rating_l,
#rating_p{
float:left;
background: #737373;
padding: 3px 7px 3px 7px;
margin: 0px 3px 0px 3px;
border: 1px solid #252525;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#rating_p {
font-weight: bold;
}
#rating_l:hover {
background: #5d5d5d;
}
Skype: yura199925
Icq:
Вконтакте: //vk.com/shudrenkoyura
E-mail: 