Двухколоночный макет дизайна SMF форума (как в IP.Board)

Думаю, каждый вебмастер, владелец форума мечтает когда-нибудь перейти на более высокий уровень и установить форумную платформу IP.Board или vBulletin. Лично я владелец форума на SMF (Simplemachines Forum) и меня всегда привлекал двухколоночный макет IP.Board форума. В правой колонке размещаются блоки последних сообщений на форуме и т.д. К сожалению, функционал моей платформы не позволял этого сделать.  Но вскоре я воплотил в реальность свою мечту и помогу в этом вам.

Вообщем, для начала, нам следует определиться с одним моментом: будем ли мы размещать боковую панель на всех страницах, или только на главной. Лично я придерживаюсь такого мнения: на главную страницу мы размещаем все информационные, рекламные блоки в боковой панели, а на страницах списка разделов, тем и постов мы оставляем все без изменения. Итак, план таков. Мы добавляем в разметку сайта боковую панель и помещаем на нее блоки, которые в SMF по-умолчанию располагаются внизу — инфо-центр (последние сообщения, статистика форума и т.п.).

Итак, мы переходим в папку с активной темой SMF: www/site.ru/Themes/Ваша_тема и находим файл BoardIndex.template.php. Если такового нету, то копируем его в вышеуказанную папку отсюда: www/site.ru/Themes/default. Открываем файл в редакторе. Находим строчку

template_info_center();

В этом месте скрипт генерирует код инфо-центра форума. Копируем эту строчку и удаляем ее. Теперь наша задача — разместить этот блок ОБЯЗАТЕЛЬНО выше блока основного контента. Объясню почему. Двухколоночный макет создается с помощью параметров float: right для боковой панели и margin-right для блока основной информации. При таком раскладе, естественно обтекающий блок, дабы не быть «вытесненным» основным контейнером, должен располагаться выше него.

Находим в файле следующий код:


/* Each category in categories is made up of:
 id, href, link, name, is_collapsed (is it collapsed?), can_collapse (is it okay if it is?),
 new (is it new?), collapse_href (href to collapse/expand), collapse_image (up/down image),
 and boards. (see below.) */
 foreach ($context['categories'] as $category)

ПЕРЕД ним вставляем скопированную нами ранее функцию инфо-центра:

template_info_center();

Также после этого кода добавляем разметку основному контейнеру:

echo '<div id="boardindex_table">';

Далее скрипт генерирует список разделов, форумов — оставляем без изменения. Но обязательно закрываем открытый ранее тег основного контейнера. Находим следующий код (закрывающую фигурную скобку цикла foreach($context[‘categories’] as $category), в листинге выше):


echo '
 <tr id="board_', $board['id'], '_children">
 <td colspan="4" class="children windowbg3 td-children">
 <strong>', $txt['parent_boards'], '</strong>: ', implode(', ', $children), '
 </td>
 </tr>';
 }
 }
 echo '
 </tbody>
 </table>
 </div>';
 }
 echo '
 <br />';
 }

И добавляем закрывающий тег div:


echo '</div>';

Примечание: найти парную фигурную скобку проще всего в программе Notepad++. Скачать можно с офф. сайта: http://notepad-plus-plus.ru/

Теперь переходим к объявлению самой функции инфо-центра. Находим ее код в файле:


function template_info_center()
{
 global $context, $settings, $options, $txt, $scripturl, $modSettings;

// Here's where the "Info Center" starts...

Перед кодом, который следует за тем, что в листинге выше, мы добавляем разметку бокового контейнера:

echo '<div class="sidebar">';

И, конечно же, не забываем его закрыть (перед закрывающей фигурной скобкой функции template_info_center():


echo '</div>';

Работа с разметкой закончена. Добавим пару штрихов с помощью CSS. Открываем файл стилей вашей темы www/site.ru/Themes/Ваша_тема/css/index.css. В самый конец файла добавляем следующий CSS-код:


/* IP.Board design mod */

.sidebar {
 float: right;
 width: 300px;
}
.content-mainpage {
 margin-right: 310px;
}

Все готово. Размеры бокового контейнера и соответствующий отступ главного контейнера устанавливаем сами (подставляем свои значения).

Пример форума можно посмотреть ТУТ.

Понравилась запись? Ставь лайк!
  • Антон

    чего-то не получается
    категория снизу получается, а статистика сверху.

    • Admin

      Адрес сайта в студию…

Loading more content...