Красивая навигация
Довольно таки красивая и совсем новая навигация для DLE сайтов 9-ой линейки.
Довольно таки красивая и совсем новая навигация для 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: