Цифровой рейтинг на чистом 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="/templates/Default/images/ratingminus.png" title="Не нравится" alt="Не нравится" style="width:14px;" />[/rating-minus]</li>
<li>{rating}</li>
<li>[rating-plus]<img src="/templates/Default/images/ratingplus.png" title="Нравится" alt="Нравится" style="width:14px;" />[/rating-plus]</li>
</ul>
</div>[/rating-type-3]

Заменяем на

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

Готово!

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

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



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

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

Скачать из рубрики хаки для dle, хак цифровой рейтинг на чистом CSS3 для DLE

Reyting-TIP-3-na-chistom-CSS3-for-DLE-10.4.rar [4,2 Kb] (cкачиваний: 185)