Всплывающие блоки справа и слева

Туториал подходит для всех версий форума.

Всплывающие блоки справа и слева для размещения текста, ссылок и прочей лабуды.
Можно ставить по одному или сразу оба.
При желании можно поставить несколько, предварительно изменив селекторы в скриптах и в CSS.
На примере два блока, справа и слева.

Выглядит это так

До клика на кнопки



После клика на кнопки



Инструкция по установке для версий форума [punBB и phpBB2]
Установка правого блока.

Управление кодами Javascript создайте новый Javascript

Название * : Правый блок
Расположение : На всех страницах
Код Javascript * :

Код:

$(document).ready(function(){
    $('.splLinkR').click(function(){
      $(this).parent().children('div.splContR').toggle('normal');
      return false;
    });
  });

Сохранить.

Далее откройте шаблон overall_header и перед </head> вставьте

<!--Блок с содержимым правой панели-->
<div style="position:fixed;right:3px;top:100px;z-index:20000">
  <div class="splLinkR"><img src="ссылка на картинку кнопку" title="Правый блок"/></div>
<div class="splContR" style="display:none;position:absolute;">
ЗДЕСЬ СОДЕРЖИМОЕ БЛОКА
</div></div>

В коде значения

right:3px;top:100px;

расположение кнопки от правого и верхнего края монитора соответственно.
Сохраните и опубликуйте шаблон.
Далее в CSS надо добавить код для оформления всплывающего блока.

Код:

/*Правая панель*/
.splContR {
width:200px!important; /*ширина окна*/
height:auto; /*высота окна*/
background-color:#fff !important; /*фон окна*/
top:55px; /*отступ окна от верха кнопки*/
right:7px; /*отступ окна от правого края монитора*/
border:1px solid #828282; /*толщина, стиль и цвет рамки окна*/
-moz-border-radius:8px;
-khtml-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
box-shadow:0 0 20px 3px #828282;
-webkit-box-shadow:0 0 20px 3px #828282;
-moz-box-shadow:0 0 20px 3px #828282;
padding:10px 10px 10px 10px;
text-align:center;
color:#000000 !important; /*цвет шрифта*/
font-size:12px; /*размер шрифта*/
}

Оформляйте на свой вкус и цвет))

---

---

Установка левого блока

Управление кодами Javascript создайте новый Javascript

Название * : Левый блок
Расположение : На всех страницах
Код Javascript * :

Код:

$(document).ready(function(){
    $('.splLinkL').click(function(){
      $(this).parent().children('div.splContL').toggle('normal');
      return false;
    });
  });

Сохранить.

Далее откройте шаблон overall_header и перед </head> вставьте

<!--Блок с содержимым левой панели-->
<div style="position:fixed;left:3px;top:100px;z-index:20000">
  <div class="splLinkL"><img src="ссылка на картинку кнопку" title="Левый блок"/></div>
<div class="splContL" style="display:none;position:absolute;">
ЗДЕСЬ СОДЕРЖИМОЕ БЛОКА
</div></div>

В коде значения

left:3px;top:100px;

расположение кнопки от левого и верхнего края монитора соответственно.
Сохраните и опубликуйте шаблон.
Далее в CSS надо добавить код для оформления всплывающего блока.

Код:

/*Левая панель*/
.splContL {
width:200px!important;/*ширина окна*/
height:auto; /*высота окна*/
background-color:#fff !important; /*фон окна*/
top:55px; /*отступ окна от верха кнопки*/
left:7px; /*отступ окна от левого края монитора*/
border:1px solid #828282; /*толщина, стиль и цвет рамки окна*/
-moz-border-radius:8px;
-khtml-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
box-shadow:0 0 20px 3px #828282;
-webkit-box-shadow:0 0 20px 3px #828282;
-moz-box-shadow:0 0 20px 3px #828282;
padding:10px 10px 10px 10px;
text-align:center;
color:#000000 !important; /*цвет шрифта*/
font-size:12px; /*размер шрифта*/
}

---

Установка на форумы версий [IPB и phpBB3] делается в той же последовательности, за исключением установки кодов для блоков с содержимым.

В связи с тем что там нет доступа к шаблонам, эти коды надо ставить в виджет на главной странице.

Живой пример временно можно посмотреть на phpBB3 и на punBB