Цвет комментариев в зависимости от рейтинга для DLE 10.4

Все добрый день. Не прошло их «кучи» лет, как в DLE сделали функцию «лайков». Не так давно для одного проекта сделал маленький скрипт, который меняет фон комментария в зависимости от оценки. Живой пример идеи цветных комментариев можно увидеть на кинопоиске, когда цвет рецензии или комментария меняется в зависимости от оценки пользователей.

Если рейтинг отрицательный то цвет фона красный, а если положительный то зеленый.

Для тех кому  «Покажи что копировать» рассказываю по быстрому.

Шаг 1. Размечаем лайки

Откройте comments.tpl и в начале всего кода вставьте

<div class="comments_wrpapper">

затем после всего кода вставьте

</div>

Шаг 2. Кодим

Для те кто не умеет подключать внешние скрипты к сайту  вот вариант. Вставьте этот код перед </body> в mail.tpl

(function($) {
  $(function() {  
   $(".comments_wrpapper").each( function(event){
      var ratenum = $(this).find(".ratingtypeplusminus").text();
      var ratenumfinal = parseInt(ratenum);
      if (ratenum < 0) {
        $(this).addClass("bad");
      }
      if (ratenum > 0) {
        $(this).addClass("good");
      }
    });
});
})(jQuery)

Шаг 3. Оформим это все

Для те кто не умеет подключать внешние стили к сайту  вот вариант. Вставьте этот код перед </head> в mail.tpl

<style type="text/css">
.comments_wrpapper {
    padding: 15px; //внутренний отступ
}
.comments_wrpapper.good {
    background: #CCF5D1;//цвет гуд комментария
}
.comments_wrpapper.bad {
    background: #F5CCCC;//цвет плохого коммента
}
</style>

И не забудьте включить лайковые комментарии в панели управления DLE.

На этом все. Должно работать..

Теперь не много теории.

Чудо скрипт представляет собой цикл. Который в каждом блоке с классом .comments_wrpapper ищет класс .ratingtypeplusminus. В этом блоке находится число показывающее рейтинг.

Далее скрипт сравнивает это число. Если оно больше нуля то добавляет блоку с классом .comments_wrpapper класс .good ну и если больше нуля то .bad

Такой вид записи стилей .comments_wrpapper.good означает, что свойства будут применены только к тому блоку которому заданы оба стиля.

Вот собственно и вся наука. Удачи =)

 

Понравилась статья? Ставь лайк.

Похожие материалы

Обсуждения

Оставьте свой Email И мы обсудим Вашу идею
*P.S.:Не работаю с бюджетами менее чем 600$