Jump to content

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


 Share

Recommended Posts

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

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

56019662bfd57_.thumb.png.c5fb8a94eedbdd8

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

  • Переходим в АЦ - Внешний вид - Ваш шаблон - Изменить 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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Ваша ссылка была автоматически строена.   Отображать как обычную ссылку

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...