ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Стильный вид рейтинга в полосу для uCoz

Стильный вид рейтинга в полосу для uCoz

Стильный вид рейтинга в полосу для uCoz
Кому то нравится рейтинг, который идет по умолчанию, кто то сразу его меняет на что то оригинальное, которое бы подошло под дизайн. Здесь же оригинальный по своему рейтинг отличается от других. Но первое, он идет в полосу, а также вы можете видеть циферблат, на котором отражается клик по нему. И можно с уверенностью утверждать, что он подойдет под любой оттенок портала и безусловно тематика у него обширная.

Это на светлом фоне.

Вид рейтинга для сайта

Да, вы скажите что желтый оттенок не очень то идет под белый лист. Но для этого сделал несколько видов, а точнее привлек фотошоп и там просто покрасил. Дальше, вы спросите как быть с тем, что цифры выводятся в антологичном оттенке. Все очень просто, с ним идут стили и вы сами можете поставить ту гамму, которая вам нужна.

Вот пример, проверил на тестовом сайте.

Красивый рейтинг для сайта

И вот мы видим уже совершенно другой по оттенку и уже ярко выражен он на интернет ресурсе. Ставить его нужно в сам материал и комментариев. Если у вас там стоит уже, просто убираем и на его место устанавливаем.

Подборка:



Здесь делал под светлый и покрасил, возможно кому пригодиться.

Установка:

Основной код, который выводит.

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


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;}


Хоть стили не большие, но отлично настраивают, можно сделать чтоб не все знаки большие были а только заглавная, но и вывести гамму цвета, ту что вам нужна.

Источник: http://divvvy.ru/
18 Марта 2016 Просмотров: 1918 Комментариев: (21)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 21
Сафрон
Сафрон 18 Марта 2016 00:181
0
Не чего себе рейтинг, мне вот в полосу нравиться, а что там выдает, как то все ровно. Костен объясни, как сделать, чтоб одна заглавная буква, но понимаешь первая была, не люблю когда все с большой идет и все потом.
Kosten
Kosten 18 Марта 2016 00:232
0
Сафрон, но что ты так, но мог со стилями поиграть и понял бы. Вот поменяй все стили, которые идут на этот рейтинг.

Код
.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: #136EE2;


Сопрано
Сопрано 18 Марта 2016 00:273
0
Мне больше нравиться без всяких надписей, и еще, если на тестовом проверял, то стазу появляется обновление или нужно перезагружать. Так как есть рейтинг не на PHP и работают по клику появляется цифра.
Kosten
Kosten 18 Марта 2016 00:325
0
Trantel, нет, здесь нужно страницу перегружать, так как вот недавно рейтинг цифровой загружал, там работает как на php но сами можете заметить, что код намного больше обычного.
Сафрон
Сафрон 18 Марта 2016 00:294
0
Kosten, другое дело, но ты же в курсе, что мне нужно долго мозги и темечко напрягать, а здесь пока на сайте быстро спросить.
Kosten
Kosten 18 Марта 2016 00:346
0
Так это понятно, что полностью решил ставить, или просто полосы, там в материале есть 2 покрашенных и один который шел по умолчанию, и как видно на главном изображение, под темный дизайн.
ucozmental
ucozmental 18 Марта 2016 00:357
0
Много места занимает, хотел поставить простые звезды, то немного последняя звезда не вся появилась.
tsakonter
tsakonter 18 Марта 2016 00:398
0
Причина этого явно в самом размере содержится, не в размере самих там звезд или лайк, а самого фона, на чем они нарисованы. Просто сделайте такой как идет и наложите на его что хотите и все нормально по идее должно быть.
Сафрон
Сафрон 18 Марта 2016 00:489
0
Смотри понравилось, вот на сайте то теперь будет что то новое.
Kosten
Kosten 18 Марта 2016 00:5310
0
Траст, не знаю какой точно нужен, сделал 3 вида, возможно какой то и подойдет.

1 2 »
avatar