Главная » Файлы » Всё для 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>
Категория: Хаки для Dle | Добавил: Sky_DM | Теги: Cpojer, ссылок, новостях.
Просмотров: 322 | Загрузок: 0 | Рейтинг: 5.0/1
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]