Оценка - звезды для Dle
Дизайн css + картинки для стандарного рейтинга звездами в DLE. Архив обновлен (21.04.2021) - исправлена ошибка!
Для тех кому нужен стандартная оценка звездами.
Также можно установить плагин для вывода - средней оценки - смотреть
Или заменить звезды на тризуб - смотреть
Вариант дизайна №2:
Файл-картинка самых звезд:
Вставить в полную новость:
[rating][rating-type-1]<div class="rate_stars">{rating}</div>[/rating-type-1][/rating]</div>
Стили:
/*--- Рейтинг - Звездами ---*/
.rate_stars {display:inline-block;padding-top:4px; width:93px;height: 22px;}
.unit-rating {list-style: none;margin: 0;padding: 0;width:120px;height: 22px;position: relative;background: url("../images/rating.png") repeat-x;}
.unit-rating li {text-indent: -90000px;padding: 0;margin:0;float: left;}
.unit-rating li a {display: block;width: 26px;height:22px;text-decoration: none; text-indent: -9000px;z-index: 17;position: absolute;padding: 0;}
.unit-rating li a:hover {background: url("../images/rating.png") 0 -24px;z-index: 2;left: 0;}
.unit-rating a.r1-unit {left: 0;}
.unit-rating a.r1-unit:hover {width:24px;} .unit-rating a.r2-unit {left: 24px;}
.unit-rating a.r2-unit:hover {width: 48px;} .unit-rating a.r3-unit {left: 48px;}
.unit-rating a.r3-unit:hover {width: 72px;} .unit-rating a.r4-unit {left: 72px;}
.unit-rating a.r4-unit:hover {width: 96px;} .unit-rating a.r5-unit {left: 96px;}
.unit-rating a.r5-unit:hover {width: 120px;}
.unit-rating li.current-rating {background: url("../images/rating.png") 0 -48px;position: absolute;height: 24px;display: block;text-indent: -9000px;z-index: 1;}