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

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

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

Мир шаблонов » Полезности, хаки 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
Публикацию посмотрели 521 раз(а) и написали 0 комментариев.

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

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

последние комментарии
  • seriy99 10.12.2016
    Maxshop - Store Responsive Ope ... (2)
    seriy99-фото
    Хорошее настроение. ! Если нужны проблемы и куча доплачивать бабок - ставьте русские сборки - там обновления каждый день. Если конкретный мега маркет - посылайте всех и ставьте тупо оригинал и просто русифицируйте . Окшоп , Оксторе , Максисторе и тому подобных - херня - может и серьезный проект * а не детство. !!! После создания магазина , не забудьте обезапосить себя - свои деньги * свой магазин - Всегда нужно думать вперед - вот сборка такая то - что она ведет в концовке, модуль такой то , взят с бесплатного источника , куда он ведет ? в вашу копилку ? Проверенно только оксторе - ребята стараются и делают и просто чистый опенкарт . А там все - просто срубл бабла . Удачи всем и хорошего настроения !
  • jimmykoks 09.12.2016
    Maxshop - Store Responsive Ope ... (2)
    jimmykoks-фото
    После установки русского языка вылезли ошибки:
    Notice: Undefined index: title in /home/......./catalog/controller/module/so_newletter_custom_popup.php on line 60
    Notice: Undefined index: newsletter_promo in /home/......./catalog/controller/module/so_newletter_custom_popup.php on line 61
    Notice: Undefined index: title in /home/......./catalog/controller/module/so_newletter_custom_popup.php on line 60
    Notice: Undefined index: newsletter_promo in /home/......./catalog/controller/module/so_newletter_custom_popup.php on line 61
    Не подскажете как исправить?
  • Стас2056 25.11.2016
    ВИДЖЕТПАК 3.0 - 150 лучших вид ... (17)
    Стас2056-фото
    Настоящий адекватный ресурс, где админы и пользователи как одна команда! [right][/right]Спасибо!
  • seriy99 25.11.2016
    Factor - Multipurpose Landing ... (2)
    seriy99-фото
    Цитата: face2005
    архив весь битый

    Ничего не может быть бито! Смотря чем вы распаковуете и учитывайте длину - для этого достаточно переименовать папку с архивом шаблона например на 1 - перед тем как распаковуете, чтоб длина символов не влияла на распаковку, так как в архиве много папок и подпапок.
  • DenJo 24.11.2016
    OpenCart шаблон "StoreFlex" (3)
    DenJo-фото
    хороший шаблон, уже успел с ним поработать. layout builder полезная штука и моим клиентам понравились clients categories.
    жду апдейта)
поддержать проект
подписаться на новости
OpenCart
Подписаться на канал RSS Добавить сайт в закладки
популярные публикации
партнеры сайта

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