▼ Публикации

Навигация

Пользователям

Пользователь:

Пароль:


Запомнить

Регистрация
Забыли пароль?



Пользователей: 4054
Новичок: Whitecolor

Предыдущая ветка системы

0.7.26 Full
Build 6.1 No Prefix

Навигация

Полезные статьи по системе е107 cms → Делaем нaвигaцию по сaйту при помощи css → Улучшаем вид навигации по сайту с помощью css

Улучшаем вид навигации по сайту с помощью css


Автор: Кадников Александр
 10.0 - 73 голосов -

Статья о том, как измененить внешний вид навигации по сайту, т.е. заменить простые текстовые цифры перехода по страницам на графические. Навигация улучшенная и дополненная кнопками «Далее» и «Назад». Навигация применима ко всему сайту, т.е. отображается там, где есть переход по страницам:

Как это будет выглядеть:


Ну что ж, приступим.

Шаг первый:

Находим файл e107.css, который находится по адресу ../files/e107.css, открываем его и в конец файла добавляем следующий код:

  1. /* Навигация по страницам */
  2. /* Оформление подложки под кнопками */
  3. .nextprev {
  4.     border: 0px;
  5.     margin: 10px 4px 10px 4px;
  6.     color: #999;
  7.     text-decoration: none;
  8.     font-size: 100%;
  9.     text-align: center;
  10.         vertical-align: middle;
  11.     padding : 7px 2px;
  12.     background-color: transparent }
  13. .nextprev a, .nextprev a:visited,
  14. .nextprev .PrevLink, .nextprev .NextLink {
  15.         background: #fff;
  16.         background: -moz-linear-gradient(top,  #fff 0%, #f6f6f6 47%, #ededed 100%);
  17.         background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed));
  18.         background: -webkit-linear-gradient(top,  #fff 0%,#f6f6f6 47%,#ededed 100%);
  19.         background: -o-linear-gradient(top,  #fff 0%,#f6f6f6 47%,#ededed 100%);
  20.         background: -ms-linear-gradient(top,  #fff 0%,#f6f6f6 47%,#ededed 100%);
  21.         background: linear-gradient(to bottom,  #fff 0%,#f6f6f6 47%,#ededed 100%);
  22.         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#ededed',GradientType=0 ) }
  23. .nextprev .this-page, .nextprev a:visited:hover,
  24. .nextprev a:hover, .nextprev a:active,
  25. .nextprev .AtStart, .nextprev .AtEnd {
  26.         background: #ededed;
  27.         background: -moz-linear-gradient(top,  #ededed 0%, #f6f6f6 53%, #fff 100%);
  28.         background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(53%,#f6f6f6), color-stop(100%,#fff));
  29.         background: -webkit-linear-gradient(top,  #ededed 0%,#f6f6f6 53%,#fff 100%);
  30.         background: -o-linear-gradient(top,  #ededed 0%,#f6f6f6 53%,#fff 100%);
  31.         background: -ms-linear-gradient(top,  #ededed 0%,#f6f6f6 53%,#fff 100%);
  32.         background: linear-gradient(to bottom,  #ededed 0%,#f6f6f6 53%,#fff 100%);
  33.         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#fff',GradientType=0 ) }
  34. .nextprev .AtStart, .nextprev .AtEnd {
  35.         box-shadow: 0 0 2px rgba(54, 54, 54, 0.3);
  36.         -o-box-shadow: 0 0 2px rgba(54, 54, 54, 0.3);
  37.         -ms-box-shadow: 0 0 2px rgba(54, 54, 54, 0.3);
  38.         -moz-box-shadow: 0 0 2px rgba(54, 54, 54, 0.3);
  39.         -webkit-box-shadow: 0 0 2px rgba(54, 54, 54, 0.3) }
  40. /* оформление посещенной кнопки */
  41. .nextprev a, .nextprev a:visited {
  42.     border: #ccc 1px solid;
  43.     color: #000;
  44.     font-size: 100%;
  45.         font-weight: normal;
  46.     text-align: center;
  47.     padding: 3px 6px }
  48.  /* Оформление кнопки 'Назад' */
  49. .nextprev .PrevLink {
  50.     border: #ccc 1px solid;
  51.     color: #000;
  52.     font-size: 100%;
  53.         font-weight: normal;
  54.     text-align: center;
  55.     padding: 3px 6px;
  56.     margin-right: 15px }
  57. /* Разделитель между кнопками */
  58. .nextprev .break{ padding: 6px 3px; border: none; text-decoration: none; color: #999; background-color: transparent }
  59.  /* Оформление кнопки 'Вперед' */
  60. .nextprev .NextLink {
  61.     border: #ccc 1px solid;
  62.     color: #000;
  63.     font-size: 100%;
  64.         font-weight: normal;
  65.     text-align: center;
  66.     padding: 3px 6px;
  67.     margin-left: 10px }
  68. /* Оформление активной кнопки */
  69. .nextprev .this-page {
  70.     border: #b4c1de solid 1px;
  71.     color: #3a599d;
  72.     font-size: 120%;
  73.     font-weight: bold;
  74.     text-align: center;
  75.     padding: 3px 6px;
  76.     text-decoration: none;
  77.         box-shadow: 0 0 2px rgba(58, 89, 157, 0.5);
  78.         -o-box-shadow: 0 0 2px rgba(58, 89, 157, 0.5);
  79.         -ms-box-shadow: 0 0 2px rgba(58, 89, 157, 0.5);
  80.         -moz-box-shadow: 0 0 2px rgba(58, 89, 157, 0.5);
  81.         -webkit-box-shadow: 0 0 2px rgba(58, 89, 157, 0.5) }
  82. /* Оформление кнопки при наведении курсора */
  83. .nextprev a:visited:hover,
  84. .nextprev a:hover,
  85. .nextprev a:active {
  86.     border: #ccc solid 1px;
  87.     color: #3a599d;
  88.     font-size: 100%;
  89.         font-weight: normal;
  90.     text-align: center;
  91.     padding: 3px 6px;
  92.     text-decoration: none;
  93.         box-shadow: 0 0 2px rgba(58, 89, 157, 0.5);
  94.         -o-box-shadow: 0 0 2px rgba(58, 89, 157, 0.5);
  95.         -ms-box-shadow: 0 0 2px rgba(58, 89, 157, 0.5);
  96.         -moz-box-shadow: 0 0 2px rgba(58, 89, 157, 0.5);
  97.         -webkit-box-shadow: 0 0 2px rgba(58, 89, 157, 0.5) }
  98.  /* Цвет кнопки 'Назад' при окончании списка */
  99. .nextprev .AtStart {
  100.     border: #ccc 1px solid;
  101.     color: #959595;
  102.     font-size: 100%;
  103.     font-weight: normal;
  104.     text-align: center;
  105.     padding: 3px 6px;
  106.     margin-right:15px;
  107.     text-decoration: none }
  108.  /* Цвет кнопки 'Вперед' при окончании списка */
  109. .nextprev .AtEnd {
  110.     border: #ccc 1px solid;
  111.     color: #959595;
  112.     font-size: 100%;
  113.     font-weight: normal;
  114.     text-align: center;
  115.     padding: 3px 6px;
  116.     margin-left:10px;
  117.     text-decoration: none }
  118. /* Радиус кнопок */
  119. .nextprev .this-page, .nextprev a:visited:hover,
  120. .nextprev a:hover, .nextprev a:active,
  121. .nextprev .AtStart, .nextprev .AtEnd,
  122. .nextprev a, .nextprev a:visited,
  123. .nextprev .PrevLink, .nextprev .NextLink { border-radius: 4px; text-shadow: 1px 1px 0px #fff }


Сохраняем файл. Переходим к следующему шагу.

Шаг второй:

Находим файл nextprev.sc, который находится по адресу ../files/shortcode/ nextprev.sc, открываем его, удаляем весь старый код и вносим следующий:

  1. if (!function_exists('my_render_np')) {
  2.         function my_render_np($perpage, $c, $current_start, $url){
  3.                 if($perpage * $c == $current_start) {
  4.                         $nppage = "<span class='this-page'>".($c+1)."</span> ";
  5.                 } else {
  6.                         $link = str_replace("[FROM]", ($perpage * $c), $url);
  7.                         $nppage = "<a href='{$link}'>".($c+1)."</a> ";
  8.                 }
  9.                 return $nppage;
  10.         }
  11. }
  12.  
  13. global $pref;
  14.  
  15. include_lan(e_LANGUAGEDIR.e_LANGUAGE."/lan_np.php");
  16.  
  17. $parm_count = substr_count($parm, ",");
  18.  
  19. while($parm_count < 5){
  20.         $parm .= ",";
  21.         $parm_count++;
  22. }
  23.  
  24. $p = explode(",", $parm, 6);
  25.  
  26. $total_items = intval($p[0]);
  27. $perpage = intval($p[1]);
  28. $current_start = intval($p[2]);
  29. $url = trim($p[3]);
  30. $caption = trim($p[4]);
  31. $pagetitle = explode("|",trim($p[5]));
  32.  
  33. if($total_items < $perpage) {   return ""; }
  34.  
  35. $caption = (!$caption || $caption == "off") ? NP_3." " : $caption;
  36.  
  37. while(substr($url, -1) == "."){
  38.         $url=substr($url, 0, -1);
  39. }
  40.  
  41. $current_page = ($current_start/$perpage) + 1;
  42. $total_pages = ceil($total_items/$perpage);
  43.  
  44. if($total_pages > 1){
  45.         if(isset($pref['old_np']) && $pref['old_np']){
  46.                 // привел нумерацию страниц в человеческий вид
  47.                 $nppage = '';
  48.                 if ($total_pages > 10){
  49.                         $current_page = ($current_start/$perpage)+1;
  50.  
  51.                         if ($current_page == 1) {
  52.                                 $nppage .= "<span class='AtStart'>◄</span>";
  53.                         } else {
  54.                                 $link = str_replace("[FROM]", ($perpage * ($current_page - 2)), $url);
  55.                                 $nppage .= "<a href='{$link}' class='PrevLink'>◄</a>";
  56.                         }
  57.  
  58.                         if ($current_page < 6){
  59.                                 if ($current_page < 4){
  60.                                         for($c = 0; $c < 5; $c++) {
  61.                                                 $nppage .= my_render_np($perpage, $c, $current_start, $url);
  62.                                         }
  63.                                 } else {
  64.                                         for($c = 0; $c < $current_page + 2; $c++) {
  65.                                                 $nppage .= my_render_np($perpage, $c, $current_start, $url);
  66.                                         }
  67.                                 }
  68.                                 $nppage .= "<span class='break'>...</span> ";
  69.                         } else {
  70.                                 for($c = 0; $c < 2; $c++) {
  71.                                         $nppage .= my_render_np($perpage, $c, $current_start, $url);
  72.                                 }
  73.                         }
  74.  
  75.                         if (($current_page >= 6) && ($current_page <= ($total_pages - 4 - 1))){
  76.                                 $nppage .= "<span class='break'>...</span> ";
  77.                                 for($c = $current_page - 3; $c < $current_page + 2; $c++) {
  78.                                         $nppage .= my_render_np($perpage, $c, $current_start, $url);
  79.                                 }
  80.                                 $nppage .= "<span class='break'>...</span> ";
  81.                         }
  82.  
  83.                         if ($current_page > ($total_pages - 4 - 1)){
  84.                                 $nppage .= "<span class='break'>...</span> ";
  85.                                 if (($current_page >= ($total_pages - 1 - 1)) && ($current_page <= $total_pages)){
  86.                                         for($c = ($total_pages - 4 - 1); $c < $total_pages; $c++) {
  87.                                                 $nppage .= my_render_np($perpage, $c, $current_start, $url);
  88.                                         }
  89.                                 } else {
  90.                                         for($c = ($current_page - 2 - 1); $c < $total_pages; $c++) {
  91.                                                 $nppage .= my_render_np($perpage, $c, $current_start, $url);
  92.                                         }
  93.                                 }
  94.                         } else {
  95.                                 for($c = ($total_pages - 1 - 1); $c < $total_pages; $c++) {
  96.                                         $nppage .= my_render_np($perpage, $c, $current_start, $url);
  97.                                 }
  98.                         }
  99.                         if ($current_page == ($total_pages)) {
  100.                                 $nppage .= "<span class='AtEnd'>►</span>";
  101.                         } else {
  102.                                 $link = str_replace("[FROM]", ($perpage * ($current_page)), $url);
  103.                                 $nppage .= "<a href='{$link}' class='NextLink'>►</a>";
  104.                         }
  105.                 } else {
  106.                         if ($current_page == 1) {
  107.                                 $nppage .= "<span class='AtStart'>◄</span>";
  108.                         } else {
  109.                                 $link = str_replace("[FROM]", ($perpage * ($current_page - 2)), $url);
  110.                                 $nppage .= "<a href='{$link}' class='PrevLink'>◄</a>";
  111.                         }
  112.  
  113.                         for($c = 0; $c < $total_pages; $c++) {
  114.                                 $nppage .= my_render_np($perpage, $c, $current_start, $url);
  115.                         }
  116.  
  117.                         if ($current_page == ($total_pages)) {
  118.                                 $nppage .= "<span class='AtEnd'>►</span>";
  119.                         } else {
  120.                                 $link = str_replace("[FROM]", ($perpage * ($current_page)), $url);
  121.                                 $nppage .= "<a href='{$link}' class='NextLink'>►</a>";
  122.                         }
  123.                 }
  124.                 return $caption.$nppage;
  125.         }
  126.  
  127.         // Использовать новый метод след/пред страниц
  128.         $np_parm['template'] = "[PREV]  [DROPDOWN]  [NEXT]";
  129.         $np_parms['prev'] = "  ◄  ";
  130.         $np_parms['next'] = "  ►  ";
  131.         $np_parms['np_class'] = 'tbox npbutton';
  132.         $np_parms['dropdown_class'] = 'tbox npdropdown';
  133.  
  134.         if($cached_parms = getcachedvars('nextprev')) {
  135.                 $tmp = $cached_parms;
  136.                 foreach($tmp as $key => $val) {
  137.                         $np_parms[$key]=$val;
  138.                 }
  139.         }
  140.  
  141.         $prev="";
  142.         $next="";
  143.         if($current_page > 1) {
  144.                 $prevstart = ($current_start - $perpage);
  145.                 $link = str_replace("[FROM]", $prevstart, $url);
  146.                 $prev = "<a class='{$np_parms['np_class']}' style='text-decoration:none' href='{$link}'>{$np_parms['prev']}</a>";
  147.         }
  148.         if($current_page < $total_pages) {
  149.                 $nextstart = ($current_start + $perpage);
  150.                 $link = str_replace("[FROM]", $nextstart, $url);
  151.                 $next = "<a class='{$np_parms['np_class']}' style='text-decoration:none' href='{$link}'>{$np_parms['next']}</a>";
  152.         }
  153.         $dropdown = "<select class='{$np_parms['dropdown_class']}' name='pageSelect' onchange=' location.href=this.options[sel ectedIndex].value'>";
  154.         for($i = 1; $i <= $total_pages; $i++) {
  155.                 $sel = "";
  156.                 if($current_page == $i) {
  157.                         $sel = " selected='selected' ";
  158.                 }
  159.                 $newstart = ($i-1)*$perpage;
  160.                 $link = str_replace("[FROM]", $newstart, $url);
  161.                 $c = $i-1;
  162.                 $title = ($pagetitle[$c]) ? $pagetitle[$c] : $i;
  163.                 $dropdown .= "<option value='{$link}' {$sel}>{$title}</option>\n";
  164.         }
  165.         $dropdown .= "</select>";
  166.         $ret = $np_parm['template'];
  167.         $ret = str_replace('[DROPDOWN]', $dropdown, $ret);
  168.         $ret = str_replace('[PREV]', $prev, $ret);
  169.         $ret = str_replace('[NEXT]', $next, $ret);
  170.  
  171.         return $caption.$ret;
  172. }
  173.  
  174. return '';


Сохраняем файл.

Навигация с новым оформлением готова. Перезагружаем сайт и радуемся красивой навигации по страницам, в тех местах, где она есть, например в новостях или форуме

PS: Перед заменой файлов настоятельно рекомендую сделать копии оригиналов!

Если навигация не работает идем в Админцентр &rarr; Настройки сайта &rarr; Обработка текста &rarr; Использовать 'классический' просмотр следующих/предыдущих страниц, жмём чекбокс «вкл», сохраняем изменения.

Автор статьи: Кадников Александр [Predator]