Плавающая панель phpbb3

В данном подфоруме я буду выкладывать разнообразные украшения форума phpbb3, от смайлов до скриптов, от ВВ-кодов до различных полезных программ.

Модераторы: Vl@d1m1r, Lorem Ipsum, Atlas

Правила форума
----
Ответить
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

Плавающая панель phpbb3

Сообщение DeaDRoMeO »

Введение

Долгое время я потратил на поиск данной плавающей панели, ни гугл ни яндекс не могли подсказать мне, но вот свершилось чудо и я наконец то нашел необходимый скрипт. Для чего он вообще нужен? Ну кому как, а мне пригодилось для разгрузки шапки форума от множества кнопок, да и вид у нее вполне презентабельный. Впринципе ее работу вы смоежете потестировать у нас на Форуме :co_ol:
Установка

Данная панель очень легка в установке, потребуется лишь правка 2 файлов, займет минут 5, но ясень пень я вам не скину своих конфигов панели, каждый будет волен в своей фантазии и настройке. Итак скачиваем архив и распаковываем его в корень форума.
root.rar
скрипт полезной плавающей панели для форума phpbb3
(21.36 КБ) 254 скачивания
Далее открываем styles/ваш стиль/template/overall_header.html и находим закрывающий тег </head>, перед ним вставляем следущий код

Код: Выделить всё

<link type="text/css" href="themes/default/jx.stylesheet.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"  type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.jixedbar.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
		$("#sample-bar").jixedbar();
    });
</script>
Если у вас уже подключена библиотека JQuery, то убираем строку

Код: Выделить всё

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"  type="text/javascript"></script>
Из приведенного выше кода.
Далее ищем закрывающий тег </body> в файле overall_footer.html и вставляем перед ним сам код нашей панели

Код: Выделить всё

<div id="sample-bar">

   <ul>
      <li title="Home"><a href="http://your.domain.tld/"><img src="img/home.png" alt="" /></a></li>
   </ul>

   <span class="jx-separator-left"></span>
   
   <ul>        
      <li title="Around The Web"><a href="#"><img src="img/web.png" alt="Get Social" /></a>
         <ul>
            <li><a href="http://www.facebook.com/account-name"><img src="img/facebook.png" title="Facebook" />Facebook</a></li>
            <li><a href="http://twitter.com/account-name"><img src="img/twitter.png" title="Twitter" />Twitter</a></li>
            <li><a href="http://www.flickr.com/photos/account-name/"><img src="img/flickr.png" title="Flickr" />Flickr</a></li>
         </ul>
      </li>
   </ul>
   
   <span class="jx-separator-left"></span>
   
   <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
   
   <ul class="jx-bar-button-right">
      <li title="Feeds"><a href="#"><img src="img/feed.png" alt="" /></a>
         <ul>
            <li><a href="http://your.domain.tld/feed/"><img src="img/feed.png" title="Content Feeds" />Content Feed</a></li>
            <li><a href="http://your.domain.tld/comments/"><img src="img/comment.png" title="Comment Feeds" />Comment Feed</a></li>
         </ul>
      </li>
   </ul>
   
   <span class="jx-separator-right"></span>
   
</div>
Теперь попробую обьяснить какой кусок за что отвечает. Код

Код: Выделить всё

 <ul>
      <li title="Home"><a href="http://your.domain.tld/"><img src="img/home.png" alt="" /></a></li>
   </ul>
Это одиночная кнопка-ссылка(в панели нашего форума аналог кнопки На Главную)

Код: Выделить всё

 <span class="jx-separator-left"></span>
Вертикальный разделитель кнопок

Код: Выделить всё

<ul>        
      <li title="Around The Web"><a href="#"><img src="img/web.png" alt="Get Social" /></a>
         <ul>
            <li><a href="http://www.facebook.com/account-name"><img src="img/facebook.png" title="Facebook" />Facebook</a></li>
            <li><a href="http://twitter.com/account-name"><img src="img/twitter.png" title="Twitter" />Twitter</a></li>
            <li><a href="http://www.flickr.com/photos/account-name/"><img src="img/flickr.png" title="Flickr" />Flickr</a></li>
         </ul>
      </li>
   </ul>
Это уже многострочное меню(аналог кнопка Развлечения), чтобы добавить еще один пункт меню надо добавить еще одну строку, допустим

Код: Выделить всё

  <li><a href="http://www.facebook.com/account-name"><img src="img/facebook.png" title="Facebook" />Facebook</a></li>
Думаю итак ясно что ссылки и подписи кнопок нужно поменять на свои. Кстати приведенный выше код отвечает за меню, которое позиционируется ближе к левой стороне, а за правую сторону отвечает кусок

Код: Выделить всё

<ul class="jx-bar-button-right">
      <li title="Feeds"><a href="#"><img src="img/feed.png" alt="" /></a>
         <ul>
            <li><a href="http://your.domain.tld/feed/"><img src="img/feed.png" title="Content Feeds" />Content Feed</a></li>
            <li><a href="http://your.domain.tld/comments/"><img src="img/comment.png" title="Comment Feeds" />Comment Feed</a></li>
         </ul>
      </li>
   </ul>
Впринципе настройка панели легче некуда, если будут вопросы, то задавайте и не забывайте кеш чистить :co_ol:
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#1
DrSeeds
Заглянул на огонек
Заглянул на огонек
Сообщения: 10
Стаж: 12 лет 3 месяца

Плавающая панель phpbb3

Сообщение DrSeeds »

Интересное меню, но у меня оно накрылось. =(
#2
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

Плавающая панель phpbb3

Сообщение DeaDRoMeO »

Разобрались :co_ol:
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#3
Аватара пользователя
Krestyanin
Активно осваиваю Форум
Активно осваиваю Форум
Сообщения: 224
Стаж: 11 лет 11 месяцев
Откуда: Краснодар

Плавающая панель phpbb3

Сообщение Krestyanin »

не могу найти <body>, только такие строки:
<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
<div id="page-body">
#4
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

Плавающая панель phpbb3

Сообщение DeaDRoMeO »

Вставляйте после

Код: Выделить всё

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#5
BACecil
Заглянул на огонек
Заглянул на огонек
Сообщения: 2
Стаж: 11 лет 11 месяцев
Откуда: Cuba
Контактная информация:
Заблокирован

НОВОСТИ

Сообщение BACecil »

Спасибо за полезный скрипт !
#6
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

Плавающая панель phpbb3

Сообщение DeaDRoMeO »

Пользуйтесь на здоровье :-ok-:
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#7
Аватара пользователя
xarizmat
Заглянул на огонек
Заглянул на огонек
Сообщения: 20
Стаж: 11 лет 11 месяцев
Контактная информация:

Плавающая панель phpbb3

Сообщение xarizmat »

А где собственно можно просмотреть принцип работы?
#8
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

Плавающая панель phpbb3

Сообщение DeaDRoMeO »

А вы присмотритесь к низу своего монитора, когда находитесь на моем форуме, это и есть плавающая панель :-ok-:
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#9
Аватара пользователя
xarizmat
Заглянул на огонек
Заглянул на огонек
Сообщения: 20
Стаж: 11 лет 11 месяцев
Контактная информация:

Плавающая панель phpbb3

Сообщение xarizmat »

Есть ли такая возможность, разместить панель сбоку страницы.

И как менять тему оформления панели?
Последний раз редактировалось xarizmat 03 май 2012, 14:55, всего редактировалось 1 раз.
#10
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

Плавающая панель phpbb3

Сообщение DeaDRoMeO »

Проблема в вашем стиле, а именно в верстке его, в нем используется наложение слоев. Можно попробовать так - открыть /themes/default/jx.bar.css и найти

Код: Выделить всё

.jx-bar {
	height:30px;
	padding:0px;
	width:80%;
	background-color:#e5e5e5;
	border:#b5b5b5 solid 1px;
}
Заменить на

Код: Выделить всё

.jx-bar {
	height:30px;
	padding:0px;
z-index: 1;
position: relative;
	width:80%;
	background-color:#e5e5e5;
	border:#b5b5b5 solid 1px;
}
Тобишь добавляются строки

Код: Выделить всё

z-index: 1000;
position: relative;
z-index: 1000; ставит панель самым верхним слоем, только я не знаю каким образом у вас в стиле прописаны слои, если не получается, то изменяете значение 1000 на -1000, либо на 1. Вообщем нужно подобрать :-ok-:
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#11
Аватара пользователя
xarizmat
Заглянул на огонек
Заглянул на огонек
Сообщения: 20
Стаж: 11 лет 11 месяцев
Контактная информация:

Плавающая панель phpbb3

Сообщение xarizmat »

Да, действительно, дело было в z-index.
#12
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

Плавающая панель phpbb3

Сообщение DeaDRoMeO »

Вот и хорошо что разобрались :hi_hi_hi:
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#13
Аватара пользователя
xarizmat
Заглянул на огонек
Заглянул на огонек
Сообщения: 20
Стаж: 11 лет 11 месяцев
Контактная информация:

Плавающая панель phpbb3

Сообщение xarizmat »

А как на счет изменения ее размеров и положения? :) Вот допустим хочу слева и чтобы она была длиной не больше 200px/ Это реально?
#14
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

Плавающая панель phpbb3

Сообщение DeaDRoMeO »

Тут работает все тот же банальный CSS

Код: Выделить всё

.jx-bar {
   height:30px;
   padding:0px;
z-index: 1;
position: absolute;
   width: 200px;
align: left;
   background-color:#e5e5e5;
   border:#b5b5b5 solid 1px;
}
Вроде так
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#15
Аватара пользователя
xarizmat
Заглянул на огонек
Заглянул на огонек
Сообщения: 20
Стаж: 11 лет 11 месяцев
Контактная информация:

Плавающая панель phpbb3

Сообщение xarizmat »

выравнивание не работает.. там по ходу все на много по глубже
#16
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

Плавающая панель phpbb3

Сообщение DeaDRoMeO »

Попробуйте убрать из кода

Код: Выделить всё

align: left;
После открываем styles/ваш стиль/template/overall_header.html и находим

Код: Выделить всё

<div id="sample-bar">
Заменяем его на

Код: Выделить всё

<div id="sample-bar" align="left">
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#17
Gena
Заглянул на огонек
Заглянул на огонек
Сообщения: 10
Стаж: 11 лет 10 месяцев

Плавающая панель phpbb3

Сообщение Gena »

Классно
#18
kwike
Активно осваиваю Форум
Активно осваиваю Форум
Сообщения: 189
Стаж: 11 лет 9 месяцев
Откуда: Питер
Контактная информация:

Плавающая панель phpbb3

Сообщение kwike »

а как чат в неё вставить?
#19
Аватара пользователя
DeaDRoMeO
Старожил Форума
Старожил Форума
Сообщения: 16763
Стаж: 13 лет
Откуда: Витебск
Контактная информация:

Плавающая панель phpbb3

Сообщение DeaDRoMeO »

Нуу кнопка чата у меня имеет следущий код

Код: Выделить всё

   <!-- IF not S_IS_BOT and not S_CAN_SYNC and not KILL_LATERAL and (ACTIVE_PANEL and not S_DISPLAY_SHOUTBOX) or (S_DISPLAY_SHOUTBOX and PANEL_ALL) -->


	<ul >
		<li id="dtbox1" style="display:block;cursor:pointer;list-style-type:none;" title="{L_SHOUT_POP}">
			<a href="javascript:void(0);" onclick="chargeShout('dtbox2','dtbox1',true);"><img src="{T_THEME_PATH}/images/ch.png" alt="" /><strong> Чат</strong>
			</a>
		</li>
	</ul>
	<ul >
		<li id="dtbox2" style="display:none;cursor:pointer;list-style-type:none;" title="{L_CLOSE_WINDOW}">
			<a href="javascript:void(0);" onclick="chargeShout('dtbox1','dtbox2',false);"><img src="{T_THEME_PATH}/images/ch.png" alt="" /> 
			<strong>Закрыть чат</strong></a>
		</li>
	</ul>

<!-- ENDIF -->
На вопросы, связанные с phpBB, по ЛС не отвечаю !!!
#20
Ответить