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

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


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

Мы в социальных сетях



- Правила форума -

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: JPG-Net Видео фоторедактор Транслит
Видео-туториалы
Настройка шапки форума
Категории и подфорумы - 1
Создание портала
Модули
Виджеты
Как присваивать награды
Выброс кубиков
Pop-up для входа на форум
Настроение в профиле

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

Предыдущая тема Следующая тема Перейти вниз

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

Сообщение автор Сказочник Зазеркалья в Вс 18 Май - 11:58

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

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

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




И так первый вариант для 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>

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










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

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

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

Спойлер:

<table class="forumline ton" width="100%" border="0" cellspacing="1" cellpadding="0">
<div class="profiblok"><td class="catHead" colspan="2" height="28">
</td>
<tr>

<td>

    <div id="page-wrap">

        <div id="pw1-button" class="button">Кто онлайн</div>
         <div id="pw2-button" class="button">Стена юзера</div>
         <div id="pw3-button" class="button">Статистика</div>
         <div id="pw4-button" class="button">Беседка</div>
         <div id="pw5-button" class="button">Радио сайта</div>
         <div id="pw6-button" class="button">Новости VK</div>

         <div class="clear"></div>

         <div id="nwcontent">

              <div id="pw1" class="list">
                   <b>Сколько юзеров на форуме?</b>
                   <hr />
                   <p>{TOTAL_USERS_ONLINE}</p>
                  <p>{RECORD_USERS}</p>
                   <p>{LOGGED_IN_USER_LIST}</p><p>{L_ONLINE_USERS}</p><table>{L_CONNECTED_MEMBERS}</table>
              </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 id="pw6" class="list">
                   
       Здесь ваше содержимое
              </div>


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



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

Спойлер:
Настройка блоков №1.

Ниже приведённый кусок кода, отвечает за блоки:


 <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>



Если ваша ширина форума больше чем 1000 пикселей, то вероятнее всего вы захотите добавить парочку дополнительных блоков, для этого просто копируете одну строку, после чего ставите её под шестой строкой, а затем ставите ей номер 7 и так далее, пример ниже:

         <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 id="pw6-button" class="button">Радио сайта</div>
         <div id="pw7-button" class="button">Флеш игры</div>
         <div id="pw8-button" class="button">Меню сайта</div>






Настройка блоков №2.

А эти коды отвечают за саму ячейку с содержимым:

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

</div>


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




Настройка содержимого блока.

И последняя часть настройки блоков, это содержимое. Заместо слов "Здесь ваше содержимое", вставляете ваши коды, картинки, видео и т.д

Здесь ваше содержимое

Но тут возникает трабла. старайтесь не сильно запихивать эти блоки, иначе в один момент они могут глюкнут, но это всего 30% вероятности.  Exclamation

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











Этап четвёртый - 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;
}


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

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

#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;
}
[/b]
/* первый активный блок */
#pw1 {
display: block;
}

/* все скрытые блоки после первого */
#pw2, #pw3, #pw4, #pw5 {   - При добавлении новых вкладок, добавьте сюда доп.коды, вот так: #pw7, #pw8#, pw9.
display: none;
}


/* общее оформление всех блоков */
#pw1, #pw2, #pw3, #pw4, #pw5 {  - При добавлении новых вкладок, добавьте сюда доп.коды, вот так:  #pw7, #pw8#, pw9.

padding: 3px;
text-align: left;
font-size: 12px;
}

#pw1 a:hover, #pw2 a:hover, #pw3 a:hover, #pw4 a:hover, #pw5 a:hover { - При добавлении новых вкладок, добавьте сюда доп.коды, вот так:  #pw7 a:hover, #pw8 a:hover, #pw9 a:hover.
text-decoration: none !important;
}

/* общее оформление всех кнопок */
n]]#pw1-button, #pw2-button, #pw3-button, #pw4-button, #pw5-button {  - При добавлении новых вкладок, добавьте сюда доп.коды, вот так: #pw7-button, #pw8-button, #pw9-button,[/b]
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;
}





Примечание.

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


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

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


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



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

Сказочник Зазеркалья
Дизайнер
Дизайнер

Пол : Мужчина
Сообщения : 3672
Возраст : 25
Место обитания : Морг.
Карма : Без предупреждений
Благодарности : 687
Регистрация : 2012-11-16

http://help.forum2x2.ru

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

Предыдущая тема Следующая тема Вернуться к началу


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