Регистрация | Забыли пароль?
Раздер Название темы Ответов Последний
Графика для сайта Shareman 3.70 RUS/2010 0 mandelsonsouggisse
Изготовление контента Нужен контент 10 ali7875
DataLife Engine Проблема регистрации. 1 JimaX
DataLife Engine Модальное окно в DataLife Engine 3 lionprizrak
DataLife Engine Настройка robots.txt 8 Prizrak_2012
Стол заказов на cmsko.ru Мини-чат. 2 JimaX
Общение пользователей Статьи 3 nastroenie
Хостинг TneHost - Хстинг провайдер 10 ali7875
DataLife Engine Установка банеров 9 JimaX
DataLife Engine Помогите с установой. dle95 2 nastroenie
Яндекс Apdate
Апдейты Яndex тИЦ
11.02.2014Последний |
24.01.2014
25.09.2013
Апдейты Яndex выдачи
18.02.2014Последний |
13.02.2014
09.02.2014
Апдейты ЯКаталога
18.02.2014Последний |
17.02.2014
13.02.2014
Навигация
Последние комментарии
Популярные новости

Информация
Главная страница » DLE » DLE Хаки » Красивая навигация как на zagruzka.zt.ua
Красивая навигация как на zagruzka.zt.ua
» Просмотров: 2069 » Дата: 23-11-2011, 21:30 » Автор: Naice
Красивая навигация как на zagruzka.zt.ua

Довольно таки красивая и совсем новая навигация для DLE сайтов 9-ой линейки.

И так, приступим к установке (она очень проста).
Нужно просто вставить это в Ваш файл со стилями (у меня это main.css):

/* Навигация */
.navigation {background: rgb(61,61,61);background: -moz-linear-gradient(top, rgba(61,61,61,1) 0%, rgba(38,38,38,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(61,61,61,1)), color-stop(100%,rgba(38,38,38,1)));background: -webkit-linear-gradient(top, rgba(61,61,61,1) 0%,rgba(38,38,38,1) 100%);background: -o-linear-gradient(top, rgba(61,61,61,1) 0%,rgba(38,38,38,1) 100%);background: -ms-linear-gradient(top, rgba(61,61,61,1) 0%,rgba(38,38,38,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d3d3d', endColorstr='#262626',GradientType=0 );background: linear-gradient(top, rgba(61,61,61,1) 0%,rgba(38,38,38,1) 100%);margin:6px;padding:4px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;display:inline-block;}
.navigation .pages a {display:inline-block;width:30px;background: rgb(160,160,160);background: -moz-linear-gradient(top, rgb(160,160,160) 0%, rgb(160,160,160) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(160,160,160)), color-stop(100%,rgb(160,160,160)));background: -webkit-linear-gradient(top, rgb(160,160,160) 0%,rgb(160,160,160) 100%);background: -o-linear-gradient(top, rgb(160,160,160) 0%,rgb(160,160,160) 100%);background: -ms-linear-gradient(top, rgb(160,160,160) 0%,rgb(160,160,160) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 );background: linear-gradient(top, rgb(160,160,160) 0%,rgb(160,160,160) 100%);text-align:center;padding:2px 0;font-weight:700;color:#000;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-transition:all .2s ease;-webkit-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;}
.navigation .pages a:hover {color:#333;box-shadow:0 0 5px #a7a7a7;-moz-box-shadow:0 0 5px #a7a7a7;-webkit-box-shadow:0 0 5px #a7a7a7;}
.navigation .pages a:active {color:#000;box-shadow:0 0 5px #a7a7a7;-moz-box-shadow:0 0 5px #a7a7a7;-webkit-box-shadow:0 0 5px #a7a7a7;}

.navigation .pages span {display:inline-block;width:30px;background: rgb(136,136,136);background: -moz-linear-gradient(top, rgb(136,136,136) 0%, rgb(136,136,136) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(136,136,136)), color-stop(100%,rgb(136,136,136)));background: -webkit-linear-gradient(top, rgb(136,136,136) 0%,rgb(136,136,136) 100%);background: -o-linear-gradient(top, rgb(136,136,136) 0%,rgb(136,136,136) 100%);background: -ms-linear-gradient(top, rgb(136,136,136) 0%,rgb(136,136,136) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffce47', endColorstr='#febf04',GradientType=0 );background: linear-gradient(top, rgb(136,136,136) 0%,rgb(136,136,136) 100%);text-align:center;padding:2px 0;font-weight:700;color:#fff;box-shadow:0 0 5px #989898;-moz-box-shadow:0 0 5px #989898;-webkit-box-shadow:0 0 5px #989898;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-transition:all .2s ease;-webkit-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;}
.navigation .pages span.nav_ext {display:none;}
.navigation .p-prev {display:none;}
.navigation a .p-prev{display:inline-block;width:30px;background: rgb(160,160,160);background: -moz-linear-gradient(top, rgb(160,160,160) 0%, rgb(160,160,160) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(160,160,160)), color-stop(100%,rgb(160,160,160)));background: -webkit-linear-gradient(top, rgb(160,160,160) 0%,rgb(160,160,160) 100%);background: -o-linear-gradient(top, rgb(160,160,160) 0%,rgb(160,160,160) 100%);background: -ms-linear-gradient(top, rgb(160,160,160) 0%,rgba(160,160,160) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a64ff', endColorstr='#0485fe',GradientType=0 );background: linear-gradient(top, rgb(160,160,160) 0%,rgb(160,160,160) 100%);text-align:center;padding:2px 0;font-weight:700;color:#000;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-transition:all .2s ease;-webkit-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;}
.navigation a:hover .p-prev {color:#000;box-shadow:0 0 5px #a7a7a7;-moz-box-shadow:0 0 5px #a7a7a7;-webkit-box-shadow:0 0 5px #a7a7a7;}
.navigation a:active .p-prev {color:#000;box-shadow:0 0 5px #a7a7a7;-moz-box-shadow:0 0 5px #a7a7a7;-webkit-box-shadow:0 0 5px #a7a7a7;}
.navigation .p-next {display:none;}
.navigation a .p-next{display:inline-block;width:30px;background: rgb(160,160,160);background: -moz-linear-gradient(top, rgb(160,160,160) 0%, rgb(160,160,160) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(160,160,160)), color-stop(100%,rgb(160,160,160)));background: -webkit-linear-gradient(top, rgb(160,160,160) 0%,rgb(160,160,160) 100%);background: -o-linear-gradient(top, rgb(160,160,160) 0%,rgb(160,160,160) 100%);background: -ms-linear-gradient(top, rgb(160,160,160) 0%,rgba(254,191,4,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 );background: linear-gradient(top, rgb(160,160,160) 0%,rgb(160,160,160) 100%);text-align:center;padding:2px 0;font-weight:700;color:#000;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-transition:all .2s ease;-webkit-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;}
.navigation
a:hover
.p-next {color:#000;box-shadow:0 0 5px #a7a7a7;-moz-box-shadow:0 0 5px #a7a7a7;-webkit-box-shadow:0 0 5px #a7a7a7;}
.navigation a:active
.p-next {color:#000;box-shadow:0 0 5px #a7a7a7;-moz-box-shadow:0 0 5px #a7a7a7;-webkit-box-shadow:0 0 5px #a7a7a7;}
/* ---------------- */

А это в navigation.tpl:

<center> <span class="navigation">[prev-link]<span title="Предыдущая страница" class="p-prev"><img src="http://zagruzka.zt.ua/templates/Default/images/go-back.png" border="0"></span>[/prev-link] <span class="pages">{pages}</span>  [next-link]<span title="Следующая страница" class="p-next" ><img src="http://zagruzka.zt.ua/templates/Default/images/go-next.png" border="0"></span>[/next-link]</span> </center>

Вот и все! feel



Комментарии: 0 Теги: навигация, dle, zagruzka.zt.ua, новая, прикольная
 (голосов: 3)
Рекомендуем также:
Уважаемый посетитель, Вы зашли к нам на сайт как незарегистрированный пользователь. Мы рекомендуем Вам бесплатно зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

© CMSKO.ru 2010-2012. Все права защищены. Администрация не несёт ответственности за содержающие файлы на данном сайте.