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

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

07.04.201611205admin

Стандартный рейтинг состоит из 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 – эту ссылку замените на свою.

Источник: http://divvvy.ru/




Сохраните в социальную сеть
Комментарии (5)
Спасибо.
0
Artem 09.04.2016 в 19:31Спам
Страницае отредактируйте :)
0
Денис Абдуллин 10.04.2016 в 13:16
Исправлено
0
jeka 13.04.2016 в 17:33Спам
Красиво)
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт