Цифровой рейтинг на чистом CSS3 для DLE

Рубрика: Хаки для DLE » Хак DLE 11.2, 11.1, 11.0, 10.6, 10.5, 10.4, 10.3, 10.2, 10.1, 10.0, 9.8, 9.7, 9.6, 9.5, 9.4, 9.3, 9.2, 9.0
Цифровой рейтинг на чистом CSS3 для DLE
Представляем вам хак «Цифровой рейтинг на чистом CSS3 для DLE 10.4» - это новое оформление стандартного рейтинга на чистом CSS3 DataLife Engine без использования изображений. После этих простых движений Ваш рейтинг станет как на скрине! Красивый дизайн рейтинга (тип 3) на чистом css3 или рейтинг (ТИП 3) на чистом CSS3 for DLE 10.4 или версии выше Dle 10.5 от автора onneuha смотрится довольно приятно.

Установка хака Цифровой рейтинг на чистом CSS3 для DLE 10.4!

В шаблоне dle найдите файлы shortstory.tpl и fullstory.tpl в коде
Находим

[rating-type-3]<div class="ratebox3">
<ul class="reset">
<li>[rating-minus]<img src="{THEME}/images/ratingminus.png" title="Не нравится" alt="Не нравится" style="width:14px;" />[/rating-minus]</li>
<li>{rating}</li>
<li>[rating-plus]<img src="{THEME}/images/ratingplus.png" title="Нравится" alt="Нравится" style="width:14px;" />[/rating-plus]</li>
</ul>
</div>[/rating-type-3]


Заменяем на
[url=http://www.dle9.com/]дле[/url]

[rating-type-3]
<div class="mwrating" style="margin: 10px 0px 0px 0px;">
    <div class="wmminus">[rating-minus]-[/rating-minus]</div>
    <div class="mwrat">{rating}</div>
    <div class="wmplus">[rating-plus]+[/rating-plus]</div>
</div>
[/rating-type-3]


В engine.css добавляем

/*----new raring 3-----*/

.mwrating {
    display: inline-block;
    width: 96px;
    height: 28px;
}

.wmminus, .wmplus {
    width: 22px;
    height: 28px;
}

.mwrat {
    width: 42px;
    height: 28px;
}

.wmminus, .mwrat, .wmplus {
    display: inline-block;
    float: left;
    text-align: center;
    line-height: 28px;
    position: relative;
}

.wmminus a {
    transition: all 0.2s;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 22px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%);
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border: 1px solid #D60A07;
    border-right: 0px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.24);
    font-family: 'Tahoma';
    font-size: 24px;
    font-weight: 400;
    color: #fff;
    text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.62);
}

.wmplus a {
    transition: all 0.2s;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 22px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: linear-gradient(to bottom, #97d624 0%,#7cbc0a 100%);
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border: 1px solid #7EBE0C;
    border-left: 0px;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.24);
    font-family: 'Tahoma';
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.33);
}

.wmminus a:hover, .wmplus a:hover {
    text-decoration: none;
    text-shadow: 0px 0px 5px #fff;
}

.wmminus a:active, .wmplus a:active {
    opacity: 0.5;
}

.mwrat {
    background: linear-gradient(to bottom, #F0F0F0 0%,#D5D5D5 100%);
    border-top: 1px solid #DDD;
    border-bottom: 1px solid #C3C3C3;
    box-shadow: inset 0px 1px 0px #fff;
    font-family: 'Arial';
    font-weight: 600;
    font-size: 14px;
    text-shadow: 0px 1px 1px #fff;
}


Готово!

Внимание!
В панели дле Настройки >>Настройка вывода новостей >> необходимо выбрать

Тип рейтинга публикаций
Укажите тип рейтинга для публикаций, которые могут выставляться посетителями сайта. Могут использоваться следующие типы:

Оценка - при данном типе используется пятизвездочный рейтинг публикации. Посетители могут выставлять оценку новости от 1 до 5 и рейтинг выводится в виде усредненной оценки.

Только 'Нравится' - при данном типе, посетитель может выставить что ему нравится данная публикация (система лайков) и выводится количество пользователей которым понравилась ваша публикация.

'Нравится' или 'Не нравится' - при данном типе посетители отмечают нравится ли им публикация или не нравится. В данном случае выводится общее значение рейтинга, например, +20 или -10 и т.д.


Нужно установить 'Нравится' или 'Не нравится' , то есть 3 тип рейтинга тогда будет отображаться, третий тип рейтинга, как на скрине.

Версия DataLife Engine: 10.4 и выше
Автор: onneuha

Скачать из рубрики хаки для dle, хак цифровой рейтинг на чистом CSS3 для DLE
  • 100
Рубрика: DLE хаки » Хак для DLE
Ранее » Ссылки на следующую и предыдущую новость DLE« Далее Mail Comments NewsTitle DLE
Добавление комментарияОставить комментарий
  • № :5
  • 28 октября 2015 05:56
Цитата: vennik21
Reyting-TIP-3-na-chistom-CSS3-for-DLE-10.4.rar

читайте комментарий ниже
  • № :4
  • 28 октября 2015 01:29
на 10.5 не идет. выставлено все по инструкции. словно не хватает картинок
  • № :3
  • 12 июля 2015 21:05
Цитата: dle9.com
Цитата: HidaN20
на 10,5 не работает

от версии не завесит, это просто стили, так что должен работать

проверил все работает, только нужно установить третий тип рейтинга в настройках движка, выше инструкцию читайте.
  • № :2
  • 11 июля 2015 19:54
Цитата: HidaN20
на 10,5 не работает

от версии не завесит, это просто стили, так что должен работать
  • № :1
  • 11 июля 2015 17:12
на 10,5 не работает