» »

Кнопки рейтинга комментарии для uCoz

Кнопки рейтинга комментарии для uCoz

Оригинальный вид рейтинга на комментарий сайта на стилях Font Awesome. Они только идут под комментарий и представлена два скрипта. Один из них стандартный, это простые лайки, которые будут в красном и зеленом оттенке цвета. Второй идет более понятный и также актуальный, это плюс и минус, и безусловно в своей гамме цвета. Здесь вы можете выбрать какой вам больше идет. Работает стандартно, ставите и только после перезагрузки появится результат, по этой теме ниже будет представлено изображение. Где вы просто можете прикинуть подойдут или нужно немного переделать, хотя они изначально сделаны под большинство тематических площадок.

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

После установке будет визуально совершенно по другому смотреться, так как все на стилях создано, и кому-то может показаться, что ярко очень они смотрятся, то просто прозрачность немного добавляем и они уже просто будут вписаны в основной дизайн. Сами они при виде ромба, только закругленными углами, но там прописан пиксель, вы можете как больше закруглить или сделать угловатыми. Здесь уже в стилистике вы можете сами что-то оригинальное свое привнести, главное в скрипт не лести, там все настроено под все модули, просто они не перевязаны какому то каталогу, проверяли и все работало на каталоге файлов.

Рассмотрим на светлом как будет:

рейтинг сайта на светлом дизайн сайта

Теперь на темном:

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

Приступаем к установке:

Как уже было указано, они идут и только работать будут на комментариях.

И первым делом подключаем Font Awesome, а это копируем стили и ставим вверх сайта в самый его потолок и сохранить.

Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


Идем в CSS и в самый низ ставим.

Код
/*---Рейтинг---*/
.unit-rating li.current-rating {
  position: absolute; height: 17px; display: block; text-indent: -9000px; z-index: 1;}

.ul-rating {overflow:hidden; border-radius:3px; border:1px solid #304156; display:inline-block; vertical-align:middle;}
.ul-rating li {float:left; border-right:1px solid #304156; height:30px; line-height:30px; background:#222933}
.ul-rating li:first-child {border-top-left-radius:3px; border-bottom-left-radius:3px;}
.ul-rating li:last-child {border-right:none; border-top-right-radius:3px; border-bottom-right-radius:3px;}

.ul-rating li > span {display:block; font-size:14px; padding:0 4px}
.ul-rating li a {display:block; height:30px; line-height:30px; width:30px; text-align:center}
.ul-rating li a i {vertical-align:middle; font-size:18px;}
.ul-rating li.rating-plus a {color:#2ECC71; border-top-left-radius:3px; border-bottom-left-radius:3px; background:#232F3D;}
.ul-rating li.rating-minus a {color:#FC1A3F; border-top-right-radius:3px; border-bottom-right-radius:3px; background:#232F3D;}
.ul-rating li.rating-plus a:hover {
  color:#fff; color:rgba(255,255,255,0.8);
  background:#2ECC71;background:rgba(46,204,113,0.4);}
.ul-rating li.rating-minus a:hover {
  color:#fff; color:rgba(255,255,255,0.8);
  background:#FC1A3F;background:rgba(252,26,63,0.4);}

.ratingzero {color: #6c838e;}
.ratingtypeplusminus {padding: 0px 5px;}
.ratingtypeplus {color: #6c838e;padding: 0px 0px 0px 5px;}
.ratingplus {color: green;}
.ratingminus {color: red;}


Вам предоставлено 2 вида кнопок, выбираем и устанавливаем.

рейтинг плюс

Этот с плюсом:

Код
<ul class="ul-rating">  
<li class="rating-plus"><a href="$GOOD_COMMENT_URL$"><i class="fa fa-plus-circle"></i></a></li>  
<li><span class="<?if($COMMENT_RATING$<0)?>ratingminus<?else?><?if($COMMENT_RATING$=0)?>ratingzero<?else?>ratingplus<?endif?><?endif?>"><?if($COMMENT_RATING$>0)?>+<?endif?>$COMMENT_RATING$</span></li>  
<li class="rating-minus"><a href="$BAD_COMMENT_URL$"><i class="fa fa-minus-circle"></i></a></li>  
</ul>


скрипт на лайк для сайта

Этот с лайками:

Код
<ul class="ul-rating">  
<li class="rating-plus"><a href="$GOOD_COMMENT_URL$"><i class="fa fa-thumbs-o-up"></i></a></li>  
<li><span class="<?if($COMMENT_RATING$<0)?>ratingminus<?else?><?if($COMMENT_RATING$=0)?>ratingzero<?else?>ratingplus<?endif?><?endif?>"><?if($COMMENT_RATING$>0)?>+<?endif?>$COMMENT_RATING$</span></li>  
<li class="rating-minus"><a href="$BAD_COMMENT_URL$"><i class="fa fa-thumbs-o-down fa-flip-horizontal"></i></a></li>  
</ul>


После всего, как все поставили на место и вывели кнопки там где нужно, можете заняться их стилистикой, так как говорил, на светлом сайте они могут для кого то быть яркими, а кому то отлично, так что все уже после установки решаем, или оставить а также немного редактировать.
06.03.2017 Просмотров: 800 Комментарий: (8)

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

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

Комментарий: 8
Kolinkor
Kolinkor 06.03.2017 21:591
+1
Вот это хорошие кнопочки, понимаю. Поставлю себе, а что за зря шрифтовые подключил. Странник, ты все удивляешь, плюс тебе.
Sтранник
Sтранник 06.03.2017 22:063
0
Спасибо, И костен тоже помог мне )
tsakonter
tsakonter 06.03.2017 22:062
0
Сейчас вообще шрифтовые иконки очень популярны, и не возможно представить их без рейтинг, это пока конструктор на ссылках работает, но зато дает веб мастерам им ставить, это хоть хорошо. А эти рейтинг просто как понял были вероломно выдраны с одного шаблона. Правильно, они и на других должны работать, не думал что на светлый подойдут, а нет как свои, родные смотрятся.
Kosten
Kosten 06.03.2017 22:084
0
Sтранник, да ладно, что тут сделал, только стили почистил, основное Странник сделал и еще под 2 вида, чтоб выбор был.
Сафрон
Сафрон 06.03.2017 22:145
0
Sтранник, начинал если не ошибаюсь с шаблонов, сейчас их разбираешь на раз, растет поколение, а так нужные рейтинг, на темный попробую поставить.
Sтранник
Sтранник 06.03.2017 22:406
0
Сначала скрипты начну делать, Ну можно сказать начну делать с легко-го до сложного ))))
csretven
csretven 06.03.2017 23:037
0
А что здесь тоже шрифтовые иконки, также на ссылках и смотрится не лучше и не хуже от Font Awesome. Просто есть сайты, где все построено на них, там понимаю, а здесь только вертикальное меню. И вообще для чего комментарий оценивать, нужно файлы.
Kosten
Kosten 06.03.2017 23:108
0
Не вижу не каких препятствий виде совмещение шрифтовых и нарисованных.
avatar