Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.

Всплывающие блоки справа и слева  Fdf10
С нашей помощью вы можете создать форум,
похожий на этот!


Join the forum, it's quick and easy

Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.

Всплывающие блоки справа и слева  Fdf10
С нашей помощью вы можете создать форум,
похожий на этот!
Бесплатный форум: форум поддержки
Вы хотите отреагировать на этот пост ? Создайте аккаунт всего в несколько кликов или войдите на форум.

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

Перейти вниз

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

Сообщение автор Домовой Пт 1 Ноя - 19:32

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

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

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

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

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

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

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

Инструкция по установке для версий форума [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
Домовой
Домовой
 
 

Мужчина
Сообщения : 6788
Возраст : 100
Место обитания : Самара
Регистрация : 2010-01-30
Благодарности : 3141

Без предупреждений

http://udomovogo.rusff.ru

Вернуться к началу Перейти вниз

Вернуться к началу

- Похожие темы

 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения