Цифровой рейтинг ленты новостей для uCoz
 | |
| Модно созданный цифровой рейтинг для каталога новостей uCoz в красной и зеленом оттенке где цифры выводятся и ставится на вид материала. Сейчас в эпоху функциональности сайта сложно представить ресурс, где нет рейтинга, чтоб можно было оценить ту или иную статью или материал, который можно скачать. Он считается также как отзыв, где пользователь ставит свое мнение, это идет положительное в зеленой гамме и отрицательное в красной гамме и плюс впереди минус в аналогичном оттенке. Он устанавливается прямо на вид, где просматривая категорию, можно понять по нему, какой материал актуален или работает без ошибок. Сам дизайн был немного изменен, по умолчанию просто шли цифры и по сторонам знаки, как плюс и минус, что реально было мало заметно. Здесь поставил ему лайки по сторонам с теме же красками, которые можно как увеличить прямо в коде, так и уменьшить. Также вы можете установить шрифтовые иконки или найти другие картинки, которые бы вас устраивали и подходили под основной дизайн сайта. Все очень просто делается, что и вывел само табло, где и будет показывать рейтинг. Он работает по своей функция как на PHP, но его здесь не нужно, что если производите клик, то сразу появляется число. На его идет стили, где вы можете вывести свой не похожий на другие скрипты такого характера, что ниже представлено. Можно по стилистике сделать по разному, что в положительную идет. 1. В плюс выставлено, где закругленное табло.  2. Это уже на 5 пикселей закруглены углы.  3. Под темной гаммой цвета поставлено в стилях.  Так уже в отрицательную сторону и здесь как сказано было, еще знак минус присутствует. 1.1 Закругленно на 100 пикселей или процентов.  2.2 Ставим аналогичные пять пикселей, чтоб немного уграть острые углы.  3.3 Осталось просто изменить цвет, как на обвод так и на саму основу.  Просто как наглядное пособие, что можно его редактировать по краскам и дизайн. Просмотрев файл, который отвечает за все функций, то он не чем не отличается от этого рейтинга, хотя визуально они совершенно не похоже. Там была прописана реклама в нем, что пришлось все почистить и сейчас чистый код прописан. Приступаем к установке: Идем в админ панель, в новости и открываем вид материала, если у вас там уже стоит рейтинг звезды или другой, то можно его убрать и на это место прописать этот скрипт. Код <script type="text/javascript" src="http://zornet.ru/zorner_ru_1/Veb/zornet.js"></script> <?if($RATE_FORM$)?><a href="#" onclick="rateForm(-1,$ID$);return false"><img style="margin: 0 0 -4px;" alt="" src="http://zornet.ru/zorner_ru_1/Veb/3KrPflikSHWYVnbPTmxudg.png" width="17" border="0" title="Плохой пост"></a><?endif?> <span class="rating-kp-imdb" style="border: 2px solid #aeb7c3"> <b title="Голосов: $RATED$" id="rate_$ID$" class="<?if(($RATING$*$RATED$-2*$RATED$)=0)?>nullRate<?else?><?if(($RATING$*$RATED$-2*$RATED$)<0)?>negativeRate<?else?>positiveRate<?endif?> <?endif?>"><script type="text/javascript">document.write(Math.round(<?($RATING$*$RATED$)?>)-<?2*$RATED$?>)</script></b></span> <?if($RATE_FORM$)?><a href="#" onclick="rateForm(1,$ID$);return false"> <img style="margin: 0 0 -1px;" alt="" src="http://zornet.ru/zorner_ru_1/Veb/CUJOvQWrQ9ihBWRT-Lh7Zg.png" width="17" border="0" title="Хороший пост"> </a><?endif?> Осталось поставить в CSS стили: Код .rating-kp-imdb { padding: 1px; padding-left: 8px; padding-right: 8px; border-radius: 5px; background: #e0d8d8; } .positiveRate {color:#087708;} .negativeRate {color:#e01010;} .nullRate {color:#e01010;} Так проверял его на работоспособность и можете оценить как смотрится на светлом интернет ресурсе.  Первый стиль rating-kp-imdb и все что с ним связано, то они отвечают за цвет отвода, и оттенок цвета основы, это фон, где будут цифры. Второй positiveRate и также все что идет ниже, это за знаки, а точнее за зеленый и красный, что здесь можно как основу поставить под свой портал и настроить цифры, так как возможно другие оттенки, если говорить о темном интернет ресурсе, здесь каждому индивидуальный подход. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 5 | |
|
| |
