Главная » Файлы » Всё для Dle » Хаки для Dle | [ Добавить материал ] |
Cpojer - вид ссылок в новостях.
[ · Скриншот ] | 06.03.2011, 23:26 |
Представляю Вам хак трансформации ссылок для DataLife Engine. Работает на CSS2.0, хорошо работает на новых браузерах по типу Opera 10, плохо конткачит с IE. Фишка в том, что при наведение на ссылку она анимируется и её фон вертится влево или вправо. Очень красиво будет смотреться в любом дизайне! Установка: 1. В css файл (мы возьмём engine.css) вписываем: Code /* Cpojer */ .cpojer a { display: inline-block; padding: 4px; outline: 0; color: #587ed7; /* ====== Цвет обычного текста */ -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; transition-duration: 0.25s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; -webkit-transform: scale(1) rotate(0); -moz-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } .cpojer a:hover { background: #587ed7; /* ====== Цвет фона при линке */ text-decoration: none; color: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-transform: scale(1.05) rotate(-1deg); -moz-transform: scale(1.05) rotate(-1deg); -o-transform: scale(1.05) rotate(-1deg); transform: scale(1.05) rotate(-1deg); } .cpojer a:nth-child(2n):hover { -webkit-transform: scale(1.05) rotate(1deg); -moz-transform: scale(1.05) rotate(1deg); -o-transform: scale(1.05) rotate(1deg); transform: scale(1.05) rotate(1deg); } 2) В файле fullstory.tpl ищите тег {fullstory} и заменяете его на: Code <div class="cpojer">{fullstory}</div> 3) В файле shortstory.tpl ищите тег {shortstory} и заменяете его на: Code <div class="cpojer">{short-story}</div> | |
Просмотров: 322 | Загрузок: 0 | |
Всего комментариев: 0 | |