Кнопки "Главная", "Вперёд", "Назад", "Вверх", "Вниз"

Приветствую всех пользователей IPBMafia

В данной теме я расскажу вам, как сделать вот такую фичу на своём форуме

Будет она находиться в правой части форума

• Переходим в АЦ - Внешний вид - Ваш шаблон - Изменить HTML и CSS
• Редактируем шаблон "globalTemplate"
• Перед: 

  </div></body>
  </html>
  

• Вставляем следующий код:

  <a href="{$this->settings['board_url']}" title="Главная" style="  display: scroll;
    bottom: 60%;
    position: fixed;
    font-size: 25px;
    right: 0%;
    display: block;
    z-index: 9999;
    -webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    -ms-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out;
    height: 27px;
    width: 27px;
    color: rgba(254, 60, 54, 0.9);"><i class="fa fa-home"></i></a>
  <a href="javascript:history.forward(0)" onmouseover="window.status='Вперед';return true" style="  display: scroll;
    bottom: 56%;
    position: fixed;
    font-size: 25px;
    right: 0.15%;
    display: block;
    z-index: 9999;
    -webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    -ms-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out;
    height: 27px;
    width: 27px;
    text-align: center;  color: rgba(254, 60, 54, 0.9);"><i class="fa fa-chevron-circle-right"></i></a>
  <a href="javascript:history.back(0)" onmouseover="window.status='Назад';return true" style="display: scroll;
    bottom: 52%;
    position: fixed;
    font-size: 25px;
    right: 0.15%;
    display: block;
    z-index: 9999;
    -webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    -ms-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out;
    height: 27px;
    width: 27px;
    color: rgba(254, 60, 54, 0.9);
    text-align: center;"><i class="fa fa-chevron-circle-left"></i></a>
  <!-- Botã --> <!-- Start -->
  <a href="#GoDown" style="display: scroll;
    bottom: 44%;
    position: fixed;
    font-size: 25px;
    right: 0.15%;
    display: block;
    z-index: 9999;
    -webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    -ms-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out;
    color: rgba(254, 60, 54, 0.9);
    height: 27px;
    width: 27px;
    text-align: center;" title="Вниз"><i class="fa fa-chevron-circle-down"></i></a>
  <a name="GoDown" id="GoDown">
  <!-- Finish --> <!-- Start -->
  <a href="#" rel="nofollow" style="  display: scroll;
    bottom: 48%;
    position: fixed;
    font-size: 25px;
    right: 0.15%;
    display: block;
    z-index: 9999;
    -webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    -ms-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out;
    color: rgba(254, 60, 54, 0.9);
    height: 27px;
    width: 27px;
    text-align: center;" title="Вверх"><i class="fa fa-chevron-circle-up"></i></a></a>
  <!-- Finish --> <!-- Finish có -->
  

• Сохраняем внесённые изменения

Автор статьи: Silence

Статью дополнил: AleksPro

Пример вы сможете увидеть на моём форуме, ссылка в профиле