Вид рейтинга в виде полос для uCoz

Вид рейтинга в виде полос для uCoz

22017-04-0726824Денис Абдуллин

Стандартный рейтинг состоит из 5 звезд, новый простой, но уникальный вид представлен как ровные вертикальные полосы. У нас были материалы по теме оформления рейтинга uCoz, это еще один в нашу небольшую, но, согласитесь, хорошую копилку.

Хоть и выглядит это здорово и красиво, логику оформления сложно понять, ведь вместо одной звезды пользователь выбирает по 3 полосы. Куда логичнее использовать 10 или, как в этом случае, 15-значную систему оценки. В общем, выбор за вами, автор лишь предлагает красивое решение.

Вид рейтинга uCoz на темном и светлом фоне

Нужно упомянуть и о том, как здесь подобраны цвета. Смотрится одинаково хорошо, как на светлом, так и на темном фоне.

Установка

1. HTML-код устанавливаем там, где хотим видеть рейтинг. В «Виде материалов» или на «Странице материала и комментариев к нему»:

Код
<div class="rating">  
<div><?$RSTARS$('15','/rating-line.png','1','float')?></div>  
<div>Рейтинг - <span>$RATING$</span> ($RATED$)</div>  
</div>

2. Небольшой CSS-код, который выравнивает рейтинг и текст:

Код
.rating div {line-height: 15px; float: left;}  
.rating div:nth-of-type(2) {margin-left: 12px; font-size: 12px; text-transform: uppercase;}  
.rating span {font-weight: bold; color: #e2d113;}

3. Скачайте прикреплённый файл, и загрузите картинку на свой сайт через Файловый Менеджер.

/rating-line.png – эту ссылку замените на свою.


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (4)
Artem 2016-04-09 в 19:31 / МатериалСпам
Страницае отредактируйте :)
0
jeka 2016-04-13 в 17:33 / МатериалСпам
Красиво)
0
Денис Абдуллин 2016-04-10 в 13:16 / Материал
Исправлено
0
Данил Брумберг 2016-04-07 в 18:02 / МатериалСпам
Спасибо.
1
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.