Простой сайдбар для форума

Board index phpBBex 1.x Мастерская

Description: Только готовые решения! Статьи, заметки, моды и другие полезности для phpBBex 1.x и phpBB 3.0.x.
Moderator: Поддержка

Post #1by WolfGeeN » 14.04.2014, 23:10

Может кому-нибудь пригодится. Инструкция о том, как сделать правую или левую колонку на форуме (сайдбар), которая будет отображаться только на главной странице форума.

Автор материала: ссылка.
PS: если вы хотите отображения колонок на всех страницах форума, то вот этот материал отлично подойдет - ссылка.

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

Для начала необходимо создать файл. Назовем файл sidebar.html
Внутри этого файла и будут содержаться блоки вашего сайдбара.
Скопируйте в файл текст, что под спойлером ниже и сохраните.
Что бы не возникло проблем с кодировкой, используйте кодировку UTF-8 без BOM.


Spoiler
Code: Select all
<!-- начало блока -->
<div class="forabg">
        <div class="inner"><span class="corners-top"><span></span></span>
        <ul class="topiclist">
            <li class="header">
                <dl class="icon">
                    <dt>Название блока</dt>
                </dl>
            </li>
</ul>
<ul class="topiclist forums" style="padding: 0.05cm">

  <br>
Содержимое <br>
<br>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
<!-- конец блока -->

Загрузите sidebar.html в /styles/название вашего стиля/template/

Далее открываем styles/название вашего стиля/template/index_body.html

Ищем:

Code: Select all
<!-- INCLUDE forumlist_body.html -->

Заменяем на:

Code: Select all
<div id="forumlist">
<!-- INCLUDE forumlist_body.html -->
</div>
<div id="sidebar">
<!-- INCLUDE sidebar.html -->
</div>

<div id="clear-both"></div>

Сохраняем.

Открываем: /styles/название вашего стиля/theme/forms.css

Ищем:

Code: Select all
input.disabled {
   color: #666666;
}

Ниже добавляем:

Code: Select all
#forumlist {
   float: left;
   width: 645px;
}

#sidebar {
   width: 150px; /* choose width of sidebar here */
   float: right;
}

#clear-both {
   clear: both;
}

Настройка сайдбара:

#forumlist {
float: left; - положение форума. Что бы сделать колонку сайдбара слева, поставьте значение float: right
width:645px;- ширина форума

#sidebar {
width: 150px; /- это ширина самого сайдбара


Сохраняем. Обновляем шаблоны стиля.

В блоках сайдбара можно использовать любое наполнение.
К примеру, у меня он отлично вписался со скриптом ДР питомцев, баннерообменом и статистикой форума, сэкономив место внизу. Скриншот.

Но это дело на любителя, конечно. :smile:
Attachments
2014-04-14_232926.jpg
2014-04-14_232926.jpg (88.34 KiB) Viewed 7045 times
WolfGeeN F
Topic author, Бывалый
Avatar
Age: 29
Reputation: 113
With us: 3 yaers 4 months

Post #2by sag-sag » 15.04.2014, 05:13

А вот несколько вопросов: данный способ урезает ширину форума!? Или он просто сдвигает форум немного левее!?

И как например в боковое меню добавить код счетчика!?

Added after 1 hour 1 minute:
А есть мод по данной тематике!?

Added after 4 minutes 32 seconds:
Нашел еще такой способ:
https://www.phpbb.com/kb/article/prosilver-complete-sidebar-tutorial/
"Сбит с ног - сражайся на коленях, идти не можешь - лежа наступай". В. Ф. Маргелов
sag-sag M
Гуру
Age: 30
Reputation: 349
With us: 3 yaers 9 months

Post #3by WolfGeeN » 15.04.2014, 09:41

sag-sag wrote:данный способ урезает ширину форума!? Или он просто сдвигает форум немного левее!?
Он сжимает форум. Если у вас резиновая верстка, можете задать не пиксели, а проценты.
Можете посмотреть, как это выглядит, на моем форуме.

sag-sag wrote:И как например в боковое меню добавить код счетчика!?
Да, он легко туда ставится. Скриншот ниже. Вообще любой html в данный сайдбар реально поместить.


sag-sag wrote:Нашел еще такой способ:
Этот более продвинутый. Позволяет выводить 2 колонки сразу и справа и слева. Плюс там можно выбрать где будет отображаться сайдбар. Но мне надо было что-то попроще, так что не стала заморачиваться.

sag-sag wrote:А есть мод по данной тематике!?
Полагаю что есть. Даже думаю, в нем можно будет добавлять разные инфо-блоки в сайдбар. На др. движках по-крайней мере такое было. Вывод последних сообщений, вывод инфы о пользователе. Но это все лишняя нагрузка на форум. :think:
Attachments
2014-04-15_103711.jpg
2014-04-15_103711.jpg (21.41 KiB) Viewed 7028 times
WolfGeeN F
Topic author, Бывалый
Avatar
Age: 29
Reputation: 113
With us: 3 yaers 4 months

Post #4by sag-sag » 15.04.2014, 12:11

Но вообще классно смотрится. Давно хотел подобное. Завтра опробую.
"Сбит с ног - сражайся на коленях, идти не можешь - лежа наступай". В. Ф. Маргелов
sag-sag M
Гуру
Age: 30
Reputation: 349
With us: 3 yaers 9 months

Post #5by Boroda » 15.04.2014, 13:38

sag-sag wrote:Но вообще классно смотрится.
В случае если форум короткий. У нас же довольно длинный :(

Added after 29 seconds:
sag-sag, сейчас глянул и у вас не маленький. ИМХО будет не очень.
Boroda M
Мастер
Avatar
Age: 42
Reputation: 38
With us: 5 years

Post #6by sag-sag » 15.04.2014, 14:33

Boroda, блин огорчили))))... Но буду все равно пробовать! Мне эти боковушки нужны.

Хотя с другой стороны: надо будет покапаться и попытаться его поставить, чтоб он форум не ужимал, а рядом становился. То есть дополненин к форуму. Если так вообще реально :smile:
"Сбит с ног - сражайся на коленях, идти не можешь - лежа наступай". В. Ф. Маргелов
sag-sag M
Гуру
Age: 30
Reputation: 349
With us: 3 yaers 9 months

Post #7by WolfGeeN » 15.04.2014, 14:45

sag-sag wrote:чтоб он форум не ужимал, а рядом становился.
Он итак станет рядом. Если бы он просто лепился к форуму, то верстка бы поехала и появился бы горизонтальный скролл.
Если нужно, что бы сайдбар был без разделения от форума, то убери padding: 0.05cm в sidebar.html и подгони сам сайдбар в CSS, как надо.

sag-sag wrote:Если так вообще реально
Попробуй на тестовике, если есть. Одна колонка всегда вписывается общий вид. Особенно если есть чем ее наполнить.
WolfGeeN F
Topic author, Бывалый
Avatar
Age: 29
Reputation: 113
With us: 3 yaers 4 months

Post #8by sag-sag » 20.04.2014, 17:18

У меня выявилась одна проблемка. Если с компа смотришь, то все отлично! Но вот с планшета: форум растянулся вправо, а сайд бар под форумом :sad:

Помогите исправить пожалуйста!!

Added after 16 minutes 40 seconds:
Я так понимаю, это связано со стилем. Точнее с его фоном.
"Сбит с ног - сражайся на коленях, идти не можешь - лежа наступай". В. Ф. Маргелов
sag-sag M
Гуру
Age: 30
Reputation: 349
With us: 3 yaers 9 months

Post #9by WolfGeeN » 20.04.2014, 17:44

Сделай ширину форума чуть меньше. Уменьшай до тех пор, пока сайдбар не станет вровень. Примерно 20 пикселей еще.
WolfGeeN F
Topic author, Бывалый
Avatar
Age: 29
Reputation: 113
With us: 3 yaers 4 months

Post #10by rvszap » 03.06.2014, 21:42

WolfGeeN wrote:PS: если вы хотите отображения колонок на всех страницах форума, то вот этот материал отлично подойдет - ссылка.

Попробовал установить, на главной работает на внутренних страницах тем - не работает
rvszap
Мастер
Reputation: 6
With us: 4 yaers 2 months

Post #11by HD321kbps » 03.06.2014, 22:41

конечно не будет работать, код только для главной!
rvszap wrote:Попробовал установить, на главной работает на внутренних страницах тем - не работает

Added after 1 minute 40 seconds:
для этого нужно править viewforum_body.html и viewtopic_body.html, как минимум.
HD321kbps M
Гуру
Avatar
Age: 26
Location: Армянск
Reputation: 339
With us: 4 yaers 2 months

Post #12by румын » 27.06.2014, 01:53

как в сайд бар поместить популярные темы?
румын
Гость

Post #13by hebroid » 02.07.2014, 00:35

румын wrote:как в сайд бар поместить популярные темы?
У меня тот же вопрос. нужно активные темы переместить в сайдбар, чтобы они не занимали место над списком разделов, но в то же время привлекали внимание пользователей. Можно это реализовать?
Форум IndieGaming.ru - бесплатные раздачи Steam игр, обсуждения новинок игровой индустрии, инди-бандлы и актуальные новости.
hebroid M
Мастер
Avatar
Age: 27
Location: Россия
Reputation: 19
With us: 2 yaers 11 months

Post #14by Sumanai » 02.07.2014, 00:55

Тут кроме собственно расположения ещё придётся менять вёрстку и стили, чтобы ужать колонку до ~300 пикселей. Это не тривиально. Сам код находится в файле \styles\prosilver\template\index_body.html, в блоке
Code: Select all
<!-- IF S_ACTIVE_TOPICS_ON_INDEX and .activetopic -->
Этот блок нужно перенести в сайдбар.
Использование поиска продлевает жизнь.
Это форум поддержки форка phpBBex. Поддержка по phpBB осуществляется в других местах.
Sumanai M
Гуру
Avatar
Reputation: 1557
With us: 4 yaers 4 months

Post #15by hebroid » 02.07.2014, 01:06

Тогда наверное лучше не трогать.
Sumanai wrote:придётся менять вёрстку и стили
Форум IndieGaming.ru - бесплатные раздачи Steam игр, обсуждения новинок игровой индустрии, инди-бандлы и актуальные новости.
hebroid M
Мастер
Avatar
Age: 27
Location: Россия
Reputation: 19
With us: 2 yaers 11 months

Post #16by Sumanai » 02.07.2014, 01:08

Ну а как вы себе представляли втискивание блока шириной минимум в 600 пикселей в ширину менее чем 300 без изменений?
Использование поиска продлевает жизнь.
Это форум поддержки форка phpBBex. Поддержка по phpBB осуществляется в других местах.
Sumanai M
Гуру
Avatar
Reputation: 1557
With us: 4 yaers 4 months

Post #17by HD321kbps » 02.07.2014, 08:06

как тут можно
HD321kbps M
Гуру
Avatar
Age: 26
Location: Армянск
Reputation: 339
With us: 4 yaers 2 months

Post #18by hebroid » 02.07.2014, 13:51

HD321kbps wrote:как тут можно
Это какой-то мод или все сделано вручную?
Форум IndieGaming.ru - бесплатные раздачи Steam игр, обсуждения новинок игровой индустрии, инди-бандлы и актуальные новости.
hebroid M
Мастер
Avatar
Age: 27
Location: Россия
Reputation: 19
With us: 2 yaers 11 months

Post #19by HD321kbps » 02.07.2014, 14:08

hebroid wrote:Это какой-то мод или все сделано вручную?
Вручную! В сайдбар вставляем:
Code: Select all
<!-- IF S_ANNOUNCE_INDEX and .announcetopic -->
<div class="forumbg announcement">
   <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist">
         <li class="header">
            <dl class="icon">
               <dt>{L_ANNOUNCEMENTS}</dt>
            </dl>
         </li>
      </ul>
      <ul class="topiclist topics">
<!-- BEGIN announcetopic -->
      <li class="row<!-- IF announcetopic.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF --><!-- IF announcetopic.S_POST_ANNOUNCE --> announce<!-- ENDIF -->">
         <dl class="icon" style="background-image: url({announcetopic.TOPIC_FOLDER_IMG_SRC}); background-repeat: no-repeat;">
            <dt class="full"<!-- IF announcetopic.TOPIC_ICON_IMG -->style="background-image: url({T_ICONS_PATH}{announcetopic.TOPIC_ICON_IMG}); background-repeat: no-repeat;"<!-- ENDIF --> title="{announcetopic.TOPIC_FOLDER_IMG_ALT}">
               <!-- IF announcetopic.S_UNREAD_TOPIC --><a rel="nofollow" href="{announcetopic.U_NEWEST_POST}">{NEWEST_POST_IMG}</a> <!-- ENDIF -->
               <a href="{announcetopic.U_VIEW_TOPIC}" class="topictitle">{announcetopic.TOPIC_TITLE} ({announcetopic.REPLIES})</a>
               <br />
               <!-- IF announcetopic.PAGINATION --><strong class="pagination"><span>{announcetopic.PAGINATION}</span></strong><!-- ENDIF -->
               {L_POST_BY_AUTHOR} {announcetopic.LAST_POST_AUTHOR_FULL} &raquo; {announcetopic.FIRST_POST_TIME}
            </dt>
         </dl>
      </li>
<!-- END announcetopic -->
      </ul>
   <span class="corners-bottom"><span></span></span></div>
</div>
<!-- ENDIF -->
<!-- IF S_ACTIVE_TOPICS_ON_INDEX and .activetopic -->
<div class="forumbg">

   <div class="inner"><span class="corners-top"><span></span></span>
   <ul class="topiclist">
      <li class="header">
         <dl class="icon">
            <dt><!-- IF S_DISPLAY_SEARCH --><a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a><!-- ELSE -->{L_SEARCH_ACTIVE_TOPICS}<!-- ENDIF --></dt>
         </dl>
      </li>
   </ul>
   <ul class="topiclist topics">

   <!-- BEGIN activetopic -->
      <li class="row<!-- IF activetopic.S_ROW_COUNT is even --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">
         <dl class="icon" style="background-image: url({activetopic.TOPIC_FOLDER_IMG_SRC}); background-repeat: no-repeat;">
            <dt class="full"<!-- IF activetopic.TOPIC_ICON_IMG -->style="background-image: url({T_ICONS_PATH}{activetopic.TOPIC_ICON_IMG}); background-repeat: no-repeat;"<!-- ENDIF --> title="{activetopic.TOPIC_FOLDER_IMG_ALT}">
               <!-- IF activetopic.S_UNREAD_TOPIC --><a rel="nofollow" href="{activetopic.U_NEWEST_POST}">{NEWEST_POST_IMG}</a> <!-- ENDIF -->
               <a href="{activetopic.U_VIEW_TOPIC}" class="topictitle">{activetopic.TOPIC_TITLE} ({activetopic.REPLIES})</a>
               <!-- IF activetopic.S_TOPIC_UNAPPROVED or activetopic.S_POSTS_UNAPPROVED --><a href="{activetopic.U_MCP_QUEUE}">{activetopic.UNAPPROVED_IMG}</a> <!-- ENDIF -->
               <!-- IF activetopic.S_TOPIC_REPORTED --><a href="{activetopic.U_MCP_REPORT}">{REPORTED_IMG}</a><!-- ENDIF --><br />
               <!-- IF activetopic.PAGINATION --><strong class="pagination"><span>{activetopic.PAGINATION}</span></strong><!-- ENDIF -->
               {L_POST_BY_AUTHOR} {activetopic.LAST_POST_AUTHOR_FULL} &raquo; {activetopic.FIRST_POST_TIME}
            </dt>
         </dl>
      </li>
   <!-- END activetopic -->
   </ul>

   <span class="corners-bottom"><span></span></span></div>
</div>
<!-- ENDIF -->

Возможно придется поправить стиль, но по идее должно работать.
HD321kbps M
Гуру
Avatar
Age: 26
Location: Армянск
Reputation: 339
With us: 4 yaers 2 months

Post #20by Amri » 15.08.2014, 09:43

А есть такой же скриптик для последних созданных тем?)
Amri
Новичок
Avatar
Reputation: 0
With us: 3 yaers 3 months

Next

Return to Мастерская