Публикации

Пользователь:

Пароль:


Запомнить

Регистрация
Забыли пароль?



Пользователей: 3898
Новичок: BAnatol
Поддержи проект
Поддержите проект Webmoney
R197422573540
E197270426287
Z701768662172
Сказали «Спасибо»

Навигация

Работа с CUSTOMPAGES или как растянуть форум


Автор: Marconi
 10.0 - 2 голосов -

Статья разбита на три части. Первая часть вступительная, где будет изложен минимум знаний html’а, необходимый, для примитивного редактирования тем. Во второй и третей частях описывается само применение CUSTOMPAGES на примере растягивания форума.
Возникает вопрос: «А почему пункта два?». Всё просто. В данной статье я хочу донести до читателя не только то, как растянуть форум, но и то, что с помощью CUSTOMPAGES можно сделать индивидуальный дизайн для каждой страницы сайта. Мы сделаем следующее: изначально у нас тема, состоящая из трёх столбцов (левое меню, центральная область и правое меню), при заходе на главную страницу форума (там, где список всех форумов) у нас будет исчезать правый столбец с меню. Далее, когда пользователь будет заходить в какой-либо из форумов, будет исчезать и левый столбец. С целями наших манипуляций мы, надеюсь, разобрались, так что приступим…

1. Начнём из далека. Для тех, кто в танке и других любителей тяжелой бронированной техники, объясню основу табличной вёрстки. Самое главное, что вы должны знать для правильного обнаружения и исправления какого либо элемента на сайте – это то, как задаётся таблица в html’е. Таблица в записывается следующим образом:
  1.  
  2. <table>
  3. <tr>
  4. <td></td>
  5. </tr>
  6. <tr>
  7. <td></td>
  8. </tr>
  9. </table>


где
  1. <tr></tr>
- это строки таблицы, а
  1. <td></td>
- столбцы. Следовательно, описанная выше таблица будет выглядеть следующим образом:



Вернёмся к нашей теме. Мы хотим, чтобы форум был растянут, то есть отсутствовали области для меню по бокам страницы. Хочу заметить, что тема Reline содержит два файла с таблицами каскадных стилей (CSS, проще говоря). Один файл описывает стили для тянущегося дизайна, а второй для статичного. Выбрать необходимый файл можно из админке в менеджере тем. Советую использовать стиль full_width.css, так как он делает сайт тянущимся (это на любителя, но тянущийся практичней).
Теперь определим, какие кастомы нам необходимо будет создать, ведь в теме е107 весь html делится на хедер и футер ($HEADER и $FOOTER). В некоторых темах отсутствует одна из областей для меню, следовательно в них не придется делать и $CUSTOMHEADER и $CUSTOMFOOTER, а только что-то одно, смотря в какой части находится меню. Например, правый столбец приписывается в хедере, а значит, для его ликвидации на форуме нам понадобится только $CUSTOMHEADER.
Кстати, для тех кто до сих пор не понимает принцип деления на хедер и футер поясню. У вас в теме есть основная область, где выводятся новости, форумы и т.д. Всё что до этой области в html коде это будет хедер, а после футер. Замечу, что ячейку основной области надо разорвать так, чтобы её начало
  1. <td>
было в хедере, а конец
  1. </td>
в футере.
В нашей теме придётся прописать кастомы и для футера и для хедера, так как в итоге мы избавимся и от правого и от левого столбцов.

2. Приступим к ликвидации левого меню при входе на главную страницу форума.
Нам необходимо найти в коде это самое левое меню. Сделать это не сложно, так как все области для вставки меню имеют шорткод вида { MENU=3 }. Как было сказано выше, левое меню у нас находится в футере. Мотаем код вниз до футера и ищем ниже него шорткоды с меню:

// code 1
  1. <td class='right_section'>
  2. {SETSTYLE=paperclip}
  3. { MENU=3 }
  4. {SETSTYLE=right_menu}
  5. { MENU=4 }
  6. {SETSTYLE=post_it}
  7. { MENU=5 }
  8. </td>


Он заключен между тегами
  1. <td> и </td>
(см. пункт 1)
Этот код можно удалить, но тогда он исчезнет со всех страниц сайта, а нам необходимо только на главной странице форума, вот для этого мы прибегнем к $CUSTOMFOOTER.
Ищем конец футера:

  1. <div class='disclaimer'>
  2. { SITEDISCLAIMER }
  3. </div>";


где "; обозначает конец футера.

Ниже него прописываем:

  1. $CUSTOMFOOTER[forum1] = " ";
  2.  
  3. $CUSTOMPAGES[forum1] = "forum.php";


А что такое [forum1] спросите вы, а это и есть метка, которая будет различать какие страницы для какого кастома отображать. Это даёт большие преимущества 7-ой версии движка, так как в старой версии можно было создать только два кастома (один для футера и один для хедера). Теперь ты можешь нагородить столько вариантов дизайна для различных станиц сайта, пока размер файла theme.php не достигнет неприлично большого размера.
В $CUSTOMPAGES мы прописали как раз ту страницу, которую ты видишь при входе на форум.
Теперь скопируем весь html код из футера (за исключением враждебного нам столбца, см. code 1) и вставляем его в
  1. $CUSTOMFOOTER:
  2.  
  3. $CUSTOMFOOTER[forum1] = "</td>
  4.  
  5. </tr>
  6. </table>
  7.  
  8. </td>
  9. </tr>
  10. </table>
  11.  
  12. <div class='disclaimer'>
  13. { SITEDISCLAIMER }
  14. </div>";
  15.  
  16. $CUSTOMPAGES[forum1] = "forum.php";


Вот собственно и всё с этим кастомом. Теперь при заходе на форум будет пропадать правое меню. Проверяем…



да, действительно пропадает.

3. Приступим ко второй части. Находим левое меню (напомню, оно в хедере):

// code 2
  1. <td class='left_section'>
  2.  
  3. <table class='top_left_menu_container'><tr><td>
  4. { SETSTYLE=top_left_menu}
  5. { MENU=1 }
  6. </td></tr>
  7.  
  8. <tr><td class='bottom_left_menu_area'>
  9. { SETSTYLE=bottom_left_menu}
  10. { MENU=2 }
  11. </td></tr></table>
  12.  
  13. </td>


Пусть вас не смущает, что
  1. <table>
находится внутри
  1. <td>
, так как можно в любую ячейку таблицы вписать ещё одну таблицу и так до бесконечности. Пишем ниже нашего $CUSTOMPAGES[forum1] = "forum.php"; следующее:

  1. $CUSTOMHEADER[forum2] = "<table class='container'>
  2. <tr>
  3. <td>
  4. <img class='advanced_image' src='".e_IMAGE."advanced.png' alt='' />
  5. </td>
  6.  
  7. <td class='top_section'>
  8. { LOGO }
  9. </td>
  10. </tr>
  11.  
  12. <tr>
  13.  
  14. // сюда обращаем внимание
  15. <td colspan='2' class='main_container'>
  16.  
  17. <table class='top_inner_container'>
  18. <tr>
  19. <td class='top_bar'>
  20. { SEARCH }
  21. </td>
  22. </tr>
  23.  
  24. <tr>
  25. <td class='main_nav'>
  26.  
  27. <div class='cube_container'>
  28. <img class='cube_image' src='".THEME_ABS."images/cube.png' alt='' />
  29. </div>
  30.  
  31. { SITELINKS_ALT=no_icons+noclick }
  32. </td>
  33. </tr>
  34. </table>
  35.  
  36. { SETSTYLE=default }
  37.  
  38. <table class='bottom_inner_container' >
  39. <tr>
  40. <td class='main_section'>
  41. { WMESSAGE }
  42. ";
  43.  
  44. $CUSTOMPAGES[forum2] = "forum_viewforum.php forum_viewtopic.php";
  45.  

Как и в предыдущем случае, мы скопировали весь html из хедера, кроме ненужного столбца (см. code 2). Прошу обратить внимание на colspan='2', его вы должны прописать вручную, сейчас объясню, зачем и почему. Опять обратимся к таблицам html. Структура данной темы в общем можно представить следующим образом (схематично):



При удалении правой и левой ячеек мы получим непонятной формы таблицу,



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



colspan='2' означает, что нижняя ячейка может занимать ширину 2-х верхних, так можно поступать и с таблицами, имеющими большее количество ячеек (это не тема нашей статьи).

Сейчас мы убрали правый столбец, но у нас снова появился левый, а это значит, что нам нужно тот $CUSTOMHEADER, который мы уже создали привязать и к этим страницам, а следовательно просто в список $CUSTOMPAGES[forum1] необходимо добавить эти страницы (forum_viewforum.php и forum_viewtopic.php):

  1. $CUSTOMPAGES[forum1] = "forum.php forum_viewforum.php forum_viewtopic.php";


Вроде всё, проверяем …