• Автор:

    Flesha
  • Добавлено:

    июн 17, 2015
  • Комментариев:

    1
  • Просмотров:

    2 483

Хак Рейтинг (ТИП 3) на чистом CSS3 DLE 10.4

Хак Рейтинг (ТИП 3) на чистом CSS3 DLE 10.4

Новое оформление стандартного рейтинга на чистом CSS3 без использования изображений. После правок Ваш рейтинг станет как на скрине!

Установка:

В 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]


Заменяем на:
[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;
}


Готово!

Версия DLE: 10.4
Автор: onneuha dle
Вернуться

Комментарии:


  1. trdnepr → 19 апреля 2016 15:35
    Отлично, благодарю
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.