Статья разбита на три части. Первая часть вступительная, где будет изложен минимум знаний html’а, необходимый, для примитивного редактирования тем. Во второй и третей частях описывается само применение CUSTOMPAGES на примере растягивания форума. Возникает вопрос: «А почему пункта два?». Всё просто. В данной статье я хочу донести до читателя не только то, как растянуть форум, но и то, что с помощью CUSTOMPAGES можно сделать индивидуальный дизайн для каждой страницы сайта. Мы сделаем следующее: изначально у нас тема, состоящая из трёх столбцов (левое меню, центральная область и правое меню), при заходе на главную страницу форума (там, где список всех форумов) у нас будет исчезать правый столбец с меню. Далее, когда пользователь будет заходить в какой-либо из форумов, будет исчезать и левый столбец. С целями наших манипуляций мы, надеюсь, разобрались, так что приступим…
1. Начнём из далека. Для тех, кто в танке и других любителей тяжелой бронированной техники, объясню основу табличной вёрстки. Самое главное, что вы должны знать для правильного обнаружения и исправления какого либо элемента на сайте – это то, как задаётся таблица в html’е. Таблица в записывается следующим образом:
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
где
<tr></tr>
- это строки таблицы, а
<td></td>
- столбцы. Следовательно, описанная выше таблица будет выглядеть следующим образом:
Вернёмся к нашей теме. Мы хотим, чтобы форум был растянут, то есть отсутствовали области для меню по бокам страницы. Хочу заметить, что тема Reline содержит два файла с таблицами каскадных стилей (CSS, проще говоря). Один файл описывает стили для тянущегося дизайна, а второй для статичного. Выбрать необходимый файл можно из админке в менеджере тем. Советую использовать стиль full_width.css, так как он делает сайт тянущимся (это на любителя, но тянущийся практичней). Теперь определим, какие кастомы нам необходимо будет создать, ведь в теме е107 весь html делится на хедер и футер ($HEADER и $FOOTER). В некоторых темах отсутствует одна из областей для меню, следовательно в них не придется делать и $CUSTOMHEADER и $CUSTOMFOOTER, а только что-то одно, смотря в какой части находится меню. Например, правый столбец приписывается в хедере, а значит, для его ликвидации на форуме нам понадобится только $CUSTOMHEADER. Кстати, для тех кто до сих пор не понимает принцип деления на хедер и футер поясню. У вас в теме есть основная область, где выводятся новости, форумы и т.д. Всё что до этой области в html коде это будет хедер, а после футер. Замечу, что ячейку основной области надо разорвать так, чтобы её начало
<td>
было в хедере, а конец
</td>
в футере. В нашей теме придётся прописать кастомы и для футера и для хедера, так как в итоге мы избавимся и от правого и от левого столбцов.
2. Приступим к ликвидации левого меню при входе на главную страницу форума. Нам необходимо найти в коде это самое левое меню. Сделать это не сложно, так как все области для вставки меню имеют шорткод вида { MENU=3 }. Как было сказано выше, левое меню у нас находится в футере. Мотаем код вниз до футера и ищем ниже него шорткоды с меню:
// code 1
<td class='right_section'>
{SETSTYLE=paperclip}
{ MENU=3}
{SETSTYLE=right_menu}
{ MENU=4}
{SETSTYLE=post_it}
{ MENU=5}
</td>
Он заключен между тегами
<td> и </td>
(см. пункт 1) Этот код можно удалить, но тогда он исчезнет со всех страниц сайта, а нам необходимо только на главной странице форума, вот для этого мы прибегнем к $CUSTOMFOOTER. Ищем конец футера:
<div class='disclaimer'>
{ SITEDISCLAIMER }
</div>";
где "; обозначает конец футера.
Ниже него прописываем:
$CUSTOMFOOTER[forum1]=" ";
$CUSTOMPAGES[forum1]="forum.php";
А что такое [forum1] спросите вы, а это и есть метка, которая будет различать какие страницы для какого кастома отображать. Это даёт большие преимущества 7-ой версии движка, так как в старой версии можно было создать только два кастома (один для футера и один для хедера). Теперь ты можешь нагородить столько вариантов дизайна для различных станиц сайта, пока размер файла theme.php не достигнет неприлично большого размера. В $CUSTOMPAGES мы прописали как раз ту страницу, которую ты видишь при входе на форум. Теперь скопируем весь html код из футера (за исключением враждебного нам столбца, см. code 1) и вставляем его в
$CUSTOMFOOTER:
$CUSTOMFOOTER[forum1]="</td>
</tr>
</table>
</td>
</tr>
</table>
<div class='disclaimer'>
{ SITEDISCLAIMER }
</div>";
$CUSTOMPAGES[forum1]="forum.php";
Вот собственно и всё с этим кастомом. Теперь при заходе на форум будет пропадать правое меню. Проверяем…
да, действительно пропадает.
3. Приступим ко второй части. Находим левое меню (напомню, оно в хедере):
// code 2
<td class='left_section'>
<table class='top_left_menu_container'><tr><td>
{ SETSTYLE=top_left_menu}
{ MENU=1}
</td></tr>
<tr><td class='bottom_left_menu_area'>
{ SETSTYLE=bottom_left_menu}
{ MENU=2}
</td></tr></table>
</td>
Пусть вас не смущает, что
<table>
находится внутри
<td>
, так как можно в любую ячейку таблицы вписать ещё одну таблицу и так до бесконечности. Пишем ниже нашего $CUSTOMPAGES[forum1] = "forum.php"; следующее:
Как и в предыдущем случае, мы скопировали весь html из хедера, кроме ненужного столбца (см. code 2). Прошу обратить внимание на colspan='2', его вы должны прописать вручную, сейчас объясню, зачем и почему. Опять обратимся к таблицам html. Структура данной темы в общем можно представить следующим образом (схематично):
При удалении правой и левой ячеек мы получим непонятной формы таблицу,
а как известно таких таблиц не бывает и браузер так исковеркает ваш сайт, что мало не покажется. Наша задача заключается в том, чтобы привести таблицу к виду:
colspan='2' означает, что нижняя ячейка может занимать ширину 2-х верхних, так можно поступать и с таблицами, имеющими большее количество ячеек (это не тема нашей статьи).
Сейчас мы убрали правый столбец, но у нас снова появился левый, а это значит, что нам нужно тот $CUSTOMHEADER, который мы уже создали привязать и к этим страницам, а следовательно просто в список $CUSTOMPAGES[forum1] необходимо добавить эти страницы (forum_viewforum.php и forum_viewtopic.php):