Новый вид рейтинга материалов для uCoz
Всем привет, вот увидел на одном PSD макете красивый рейтинг материала
И решил реализовать его в системе uCoz
Думаю ясно как он будет выглядеть посмотрев анимацию к материалу
Перейдём к установке этого рейтинга:
1) Открываем
ПУ (Панель управления) -> Дизайн -> Управление Дизайном -> МОДУЛЬ Где хотите видеть иконку (Например: Каталог файлов) -> Страница материала и комментариев к нему или Вид материалов
Находим что-нибудь подобное (код самих звездочек)
Просто в зависимости от шаблона у всех этот код немного различается:
И заменяем этот код на этот:
2) Заходим в "Таблицу стилей(CSS)" и вставляем в конец этот код:
Всё - готово.
Вопросы пишем в комментарии...
И решил реализовать его в системе uCoz
Думаю ясно как он будет выглядеть посмотрев анимацию к материалу
Перейдём к установке этого рейтинга:
1) Открываем
ПУ (Панель управления) -> Дизайн -> Управление Дизайном -> МОДУЛЬ Где хотите видеть иконку (Например: Каталог файлов) -> Страница материала и комментариев к нему или Вид материалов
Находим что-нибудь подобное (код самих звездочек)
Просто в зависимости от шаблона у всех этот код немного различается:
Code
<?$RSTARS$('12','/.s/img/stars/3/12.png','1','float')?>
И заменяем этот код на этот:
Code
<div class="ratoro"><?$RSTARS$('13','http://uwebo4ka.3dn.ru/scripts/rating/new_vid_reitinga_123.png','1','float')?></div>
2) Заходим в "Таблицу стилей(CSS)" и вставляем в конец этот код:
Code
.ratoro ul{list-style:none;margin:auto;padding:0px;width:65px;height:16px;position:relative; background: url('http://uwebo4ka.3dn.ru/scripts/rating/new_vid_reitinga_123.png') top left repeat-x !important;}.ratoro ul li{padding:0px;margin:0px;}.ratoro ul li a{display:block;width:13px;height: 16px;line-height:16px;text-decoration:none; text-indent:-9000px;z-index:4;position:absolute;padding: 0px;overflow:hidden;}.ratoro ul li a:hover{background: url('http://uwebo4ka.3dn.ru/scripts/rating/new_vid_reitinga_123.png') left center !important;z-index:3;left:0px;border:none;}.ratoro ul a.u-one-star{left:0px;}.ratoro ul a.u-one-star:hover{width:13px;}.ratoro ul a.u-two-stars{left:13px;}.ratoro ul a.u-two-stars:hover{width:26px;}.ratoro ul a.u-three-stars{left:26px;}.ratoro ul a.u-three-stars:hover{width:39px;}.ratoro ul a.u-four-stars{left:39px;}.ratoro ul a.u-four-stars:hover{width:52px;}.ratoro ul a.u-five-stars{left:52px;}.ratoro ul a.u-five-stars:hover{width:65px;}.ratoro ul li.u-current-rating{top:0 !important; left:0 !important;margin:0 !important;padding:0 !important;outline:none; background: url('http://uwebo4ka.3dn.ru/scripts/rating/new_vid_reitinga_123.png') left bottom !important;position: absolute;height:16px !important;line-height:16px !important;display:block;text-indent:-9000px;z-index:2;}
.ratoro {
width: 97px;
background: url(http://uwebo4ka.3dn.ru/scripts/rating/new_vid_reitinga_12.png);
}
.ratoro {
width: 97px;
background: url(http://uwebo4ka.3dn.ru/scripts/rating/new_vid_reitinga_12.png);
}
Всё - готово.
Вопросы пишем в комментарии...
О материале:
Дата добавления: 26.10.2012 в 14:28
Материал просмотрен: 1238 раз
Категория: Скрипты и модификации для uCoz
Оставлены: 0 комментария
Рейтинг материала
По мнению пользователей
3.0
Поделиться
Комментарии
0 комментариев
Навигация
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Онлайн никого нет