Шаг 1 - Установим HTML:
Заходим в Админ панель Пу=> Дизайн => Управления дизайном и выбираем нужным модуль вашего сайта (новости, блог, каталог и т.д.) и на странице материала и комментариев к нему заменяем стандартный код рейтинга:
HTML-Code
Code
if ( $RATING$ )?> <div style = " float : right " > $RSTARS$ ( '12' , '/.s/img/stars/3/12.png' , '1' , 'float' )?> </div> endif ?>
на следующий код:
Для раздела новости (news)
Code
if ( $RATING$ )?> <div id = "rating_os" > <a href = "javascript://" id = "golike" onclick = "$.get('/news/0-0-1-$ID$-15-1',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 ?>
Для раздела каталог статей (publ)
Code
if ( $RATING$ )?> <div id = "rating_os" > <a href = "javascript://" id = "golike" onclick = "$.get('/publ/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 ?>
Для раздела каталог файлов (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 стили для тёмного варианта кнопки:
CSS-Code
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; } /* ---------------------------------------*/
на этом всё...
Ссылка на источник : http://www.center-dm.ru/news/poleznyj_material_dlja_ucoz/2011-12-23-197
+11