Блок с вкладками в темах. [phpbb2]

Доброго времени суток.  

У меня получился ещё один новый туториал, который подходит для форумов с движком phpBB2. Речь пойдёт об "Блоке комментариев" под каждой темой на форуме, который собственно говоря будет больше полезен на форумах с тематикой "Поэзия, фанфики, демонология и т.д", так как на таких форумах нужен модуль комментирования без регистрации на форуме, для того чтобы гости могли комментировать понравившейся или "непонравившийся" материал. Ну собственно сам блок можно использовать и под другие цели, но в данном туториале речь идёт именно об варианте "Комментариев".

Большое спасибо Дане Домирани, так как благодаря её туториалу, я смогла написать уже второй по счёту туториал с использованием данного блока с вкладками. Надеюсь что скоро я смогу написать ещё парочку новых туториалов, в которых смогу применить блок с вкладками.  




И так первый вариант для phpBB2, для punBB ещё в разработке. Смотрим инструкцию выложенную ниже, по созданию подобного блока под каждой темой:










Этап первый - Удаление лишнего.


Идём сюда:

Панель Администратора - Оформление - Шаблоны - Общие настройки - Виентопик боди.

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

Код:

<td align="center" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>

Код:

<tr>
         <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
         <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
      </tr>


Код:

<td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>

Внимание!

Если вам не нужны ссылки "Страница №1" и "Следить за темой", вы можете и их удалить:

Код:

<tr>
      <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
   </tr>

Код:

<td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>

После удаления лишних кодов, нужно вставить код "блока", в шаблон. Переходим ко второму этапу, создания в темах блока комментариев.












Этап второй - Вставка блока в шаблон.

Собственно говоря для этого из тем понадобиться удалить "Быстрые ответы", что позволит аккуратно и красиво вставить блок с вкладками под темы. И так ищем в шаблоне этот код:

Код:

<tr>
      <td class="row2" colspan="2" align="center" style="padding:0px">
         <!-- BEGIN switch_user_logged_in -->
         <a name="quickreply"></a>
         {QUICK_REPLY_FORM}<br />
         <!-- END switch_user_logged_in -->
      </td>
   </tr>

Удаляем его и на его место "Аккуратно" вставляем вот этот код "блока":

Код:


<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

<td class="catHead" colspan="2" height="28">

</td>
<tr>


<td>

     <div id="page-wrap">

          <div id="pw1-button" class="button">Комы VK</div>
          <div id="pw2-button" class="button">Общие коментарии</div>
          <div id="pw3-button" class="button"> Disqus</div>
          <div id="pw4-button" class="button">Facebook</div>
          <div id="pw5-button" class="button"> Поделиться</div>
          <div class="clear"></div>

          <div id="nwcontent">

               <div id="pw1" class="list">
                   Здесь ваше содержимое.
               </div>

               <div id="pw2" class="list">

                   Здесь ваше содержимое.
               </div>

               <div id="pw3" class="list">
                  Здесь ваше содержимое.
               </div>

               <div id="pw4" class="list">
                  Здесь ваше содержимое.
      </div>

<div id="pw5" class="list">
                    Здесь ваше содержимое.
               </div>


          </div>
</div>
         </td>
      </tr>

Теперь можно сохранить и опубликовать шаблон. Настройку, лучше проводить после публикации шаблона, так как если шаблон долго редактируется без быстрого сохранения, он может слететь. Т.е проще говоря вернётся к стандартному состоянию и если вы ранее делали какие либо изменения они слетят. Так что примите на заметку, что если решили делать изменения в шаблонах, вам нужно быстро и аккуратно всё завершить, не затягивая редактирование на два часа. На этом заканчивается первый этап - "Встройка блока в темы".










Этап третий - Настройка блоков.

И так чтобы настроить блоки под себя, достаточно потратить немного времени и проявить терпение. Если поторопитесь, то можете удалять какую нибудь часть кода или сделать ошибку, которая повлечёт за собой сбой во всём шаблоне. Ниже вы видите фрагмент который отвечает за блок с вкладками:

Главный код с вкладками:

Спойлер:

Настройка вкладок и блоков:

Спойлер:

Когда закончите с настройкой вкладок и блоков, можно переходить к последним этапам.  











Этап четвёртый - Javascript.


Теперь самое время подключить Javascript, для работоспособности блока с вкладками:

ПА  - Модули - HTML & JAVASCRIPT - Управление кодами Javascript.


Создаём новый Javascript с такими параметрами:

Название * : Любое, например Профиль с вкладками.
Расположение : На всех страницах!

В содержимое, ставим ниже указанный скрипт:

Код:

$(function(){
               $("#pw2-button, #pw3-button, #pw4-button, #pw5-button, #pw6-button").css({
            'background-position' : 'center top', 'opacity' : '0.95'
         });
 $("#pw1-button").css({'background-position' : 'center -30px'});
                  $("#page-wrap div.button").click(function(){
                              $clicked = $(this);
                                        if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
                                    $clicked.animate({
                     opacity: 1, backgroundPosition: '0 -30px'
                  }, 60 );
                  var idToLoad = $clicked.attr("id").split('-');
                  $("#nwcontent").find(".list:visible").fadeOut(60, function(){
                     $(this).parent().find("#"+idToLoad[0]).fadeIn();
                  })
               }
               $clicked.siblings(".button").animate({
                  opacity: 0.95, backgroundPosition: '0 0'
               }, 60 );
            });
      });

Примечание: Если вы увеличите число кнопок, тогда в этой строке кода : #pw2-button, #pw3-button, #pw4-button, добавьте ещё коды #pw7-button, #pw8-button, #pw9-button.









Этап пятый - Коды CCS.


Ну и завершающий этап настройки данного профиля, это коды CCS. Топаем в каскадную таблицу и ставим туда правила оформления:

Панель Администратора - Оформление - Картинки и цвета - Цвета - Каскадная таблица стилей CSS.



Вставляем коды для настройки Блока с вкладками в CCS:

Код:

/* Оформление блока с вкладками */

#page-wrap td.row1 {
background-color: black;
padding: 0;
margin: 0;
}

.button {
float: left;
cursor: pointer;
}

/* оформление всего блока с содержимым */
#nwcontent {
background-color: #000000;
border: 2px solid #DDF7C6;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
margin: 0 3px 3px;
padding: 5px;
}

/* первый активный блок */
#pw1 {
display: block;
}

/* все скрытые блоки после первого */
#pw2, #pw3, #pw4, #pw5 {
display: none;
}

/* общее оформление всех блоков */
#pw1, #pw2, #pw3, #pw4, #pw5 {
padding: 3px;
text-align: left;
font-size: 12px;
}

#pw1 a:hover, #pw2 a:hover, #pw3 a:hover, #pw4 a:hover, #pw5 a:hover {
text-decoration: none !important;
}

/* общее оформление всех кнопок */
#pw1-button, #pw2-button, #pw3-button, #pw4-button, #pw5-button, #pw6-button {
display: block;
width: 150px;
height: 30px;
margin: 2px 2px 0 0;
text-align: center;
line-height: 30px;
background: transparent url("http://savepic.org/3273868.png") center top no-repeat;
color: #fff;
text-shadow: 1px 1px #000000;
font-size: 14px;
}

/* первая активная кнопка */
#pw1-button {
background: transparent url("http://savepic.org/3273868.png") center -40px no-repeat;
margin-left: 20px;
}

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

Спойлер:

Примечание.

Уважаемые форумчане: Если вы найдёте в туториале ошибки или неправильные шаги туториала, пожалуйста напишите мне об этом в л/с. Туториал хоть и писала не на скорую руку, но всё же могла допустить ошибки в грамматике или инструкции.  


Примечание №2.

Заполнение блоков, зависит от вашей фантазии. Т.е вы можете поставить там блок новостей, меню, Коментарии или правила. Всё в ваших руках уважаемые ребята   


На этом заканчивается стандартная инструкция по установке. Когда будет время, я напишу дополнительный туториал, по улучшению Блока с вкладками в профиле. Желаю всем удачи и успеха в улучшении ваших форумов. До встречи в новых туториалах ребятки.  



С уважением автор данного туториала Михаэль Картер aka Сказочник Зазеркалья.