Всплывающие блоки справа и слева
Страница 1 из 1
Всплывающие блоки справа и слева
Туториал подходит для всех версий форума.
Всплывающие блоки справа и слева для размещения текста, ссылок и прочей лабуды.
Можно ставить по одному или сразу оба.
При желании можно поставить несколько, предварительно изменив селекторы в скриптах и в CSS.
На примере два блока, справа и слева.
Выглядит это так
До клика на кнопки
После клика на кнопки
Инструкция по установке для версий форума [punBB и phpBB2]
Установка правого блока.
Управление кодами Javascript создайте новый Javascript
Название * : Правый блок
Расположение : На всех страницах
Код Javascript * :
Далее откройте шаблон overall_header и перед </head> вставьте
Сохраните и опубликуйте шаблон.
Далее в CSS надо добавить код для оформления всплывающего блока.
Установка левого блока
Управление кодами Javascript создайте новый Javascript
Название * : Левый блок
Расположение : На всех страницах
Код Javascript * :
Далее откройте шаблон overall_header и перед </head> вставьте
Сохраните и опубликуйте шаблон.
Далее в CSS надо добавить код для оформления всплывающего блока.
Установка на форумы версий [IPB и phpBB3] делается в той же последовательности, за исключением установки кодов для блоков с содержимым.
В связи с тем что там нет доступа к шаблонам, эти коды надо ставить в виджет на главной странице.
Живой пример временно можно посмотреть на phpBB3 и на punBB
Всплывающие блоки справа и слева для размещения текста, ссылок и прочей лабуды.
Можно ставить по одному или сразу оба.
При желании можно поставить несколько, предварительно изменив селекторы в скриптах и в 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
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения
|
|