Личные сообщения

Ваши переписки

Логотип сайта
главная правила форум опубликовать полезные сервисы услуги
вход или регистрация обратная связь

Мир шаблонов » Полезности, хаки DLE » Рейтинг (ТИП 3) на чистом CSS3 для DLE
0

Рейтинг (ТИП 3) на чистом CSS3 для DLE

Рейтинг (ТИП 3) на чистом CSS3 для DLE

Новое оформление стандартного рейтинга на чистом 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, CSS3
Публикацию посмотрели 564 раз(а) и написали 0 комментариев.

Похожие публикации

 Стильная поисковая форма на CSS 
Стильная поисковая форма на CSS Одним из часто используемых элементов веб интерфейса является поисковая форма или другими словами - поиск на сайте. Ее красивая и стильная реализация на сайте является простым способом повысить привлекательность веб...
 Цифровой цветной рейтинг новостей для DLE 10.0 
Хак поможет вам реализовать у себя на сайте красивый, цветной цифровой рейтинг на DLE 10.0....
 Красивый вид атача для DLE 9.8 
Еще один из видов attachment (скачивание файлов с сервера) для DLE 9.8 версии....
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
разделы сайта

последние комментарии
поддержать проект
подписаться на новости
OpenCart
Подписаться на канал RSS Добавить сайт в закладки
популярные публикации
партнеры сайта

рекомендуем
Hosting Ukraine
© 2013-2016 mirshablonov.com