Создание дополнительных страниц в стиле phpBBex

[eastVi]

Создание дополнительных (произвольных) страниц в стиле phpBBex

Это руководство подскажет вам, как создать и добавить новую персональную страницу в стиле phpBBex. Почему бы вам захотелось это сделать? Скажем, вы хотите создать новую веб-страницу, которая выглядит так же, как ваш форум. Эта новая страница может содержать все, что угодно, от простого текста (например, списка правил) до более сложных вариантов, таких как php-скрипты, например, календари. В качестве примера будет создана простая страница, рассказывающая о вашем сайте.

1) Создаём файл about.php

- Открываем любой текстовый редактор, поддерживающий кодировку "UTF-8 без BOM" (например "Notepad++"). найти его можно на форуме.
- Создаём в нём новый файл, сразу в настройках выбираем кодировку "UTF-8 без BOM".
- Копируем следующий код (убедитесь, что в содержимом файла нет пустых строк и/или пробелов перед <?php и после ?>):

<?php
define('IN_PHPBB', true);
$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './';
$phpEx = substr(strrchr(__FILE__, '.'), 1);
include($phpbb_root_path . 'common.' . $phpEx);
 
// Start session management
$user->session_begin();
$auth->acl($user->data);
$user->setup();
 
page_header('NEW_ABOUT');
 
$template->set_filenames(array(
    'body' => 'about_body.html')
);
 
make_jumpbox(append_sid("{$phpbb_root_path}viewforum.$phpEx"));
page_footer();
?>

- Если вы хотите предоставить доступ к странице только для авторизованных пользователей, то найдите эту строку:
$user->setup(); и добавьте после неё следующий фрагмент кода:

if ($user->data['user_id'] == ANONYMOUS)
{
    login_box('', $user->lang['LOGIN']);
}

- Выбираем "Сохранить как..." и сохраняем этот файл под именем about.php в корневой директории форума.

- Обратите внимание на две вещи:
а) 'NEW_ABOUT' - это переменная, которая будет определять заголовок вашей страницы,
б) about_body.html - это имя шаблона вашей страницы, который будет определять её содержимое.
И имя переменной и имя шаблона вы можете выбрать на своё усмотрение, только не используйте символы кириллицы в этих именах.

2) Создаём файл about_body.html

- Создаём новый файл в текстовом редакторе (кодировка "UTF-8 без BOM" !) и копируем в него следующий код:

<!-- INCLUDE overall_header.html --> 
<h2>{L_NEW_ABOUT}</h2>

<div class="panel bg1">
    <div class="inner">
   <span class="corners-top"><span></span></span>      
      <div class="content">
         <p>О вашем форуме - первый абзац в первом блоке - заметьте, что панель называется "panel bg1"</p>      
         <p> О вашем форуме - второй абзац.</p>   
      </div>   
   <span class="corners-bottom"><span></span></span>
   </div>
</div>

<div class="clear"></div>
 
<div class="panel bg2">
    <div class="inner">
   <span class="corners-top"><span></span></span>      
      <div class="content">      
         <p>О вашем форуме - первый абзац во втором блоке - заметьте, что панель называется "panel bg2".</p>      
         <p>Всё что вам нужно знать об "panel bg1" и "panel bg2" - они отличаются только оттенком цвета.
         <br>Перенесем строку, добавим снизу неё пунктирную черту через весь блок</p>
         <hr class="dashed">      
      <p >И под чертой напишем о чём-то ещё</p>
      </div>   
   
      <span class="corners-bottom"><span></span></span>
   </div>
</div>

<!-- INCLUDE jumpbox.html -->
<!-- INCLUDE overall_footer.html -->

- Обратите внимание на четыре вещи:
а) Между тегами заголовка второго уровня <h2> и </h2> в фигурных скобках находится уже знакомая нам переменная NEW_ABOUT только с префиксом;
б) Между тегами параграфа <p> и </p> вы можете вставить любое своё содержимое. Кроме текста в области панелей можно поместить изображения, таблицы, видео и т.п.
в) Если использовать этот код в таком виде, то вы получите страницу с двумя областями, так, как разделены сообщения на форуме. В тегах вы можете заметить <div class="panel bg1"> и <div class="panel bg2">, посмотрите на сообщения в форуме - они чередуются в оттенках, здесь сделано то же самое. Если не хотите, что бы оттенки чередовались - просто выберите один стиль (например <div class="panel bg1">) для всех панелей.
г) Между панелями вы можете заметить конструкцию <div class="clear"></div> - это разделитель, что бы панели не сливались одна с другой.

- Сохраните файл с именем about_body.html в каталоге .\styles\prosilver\template вашего форума.

3) Прописываем переменную, определяющую заголовок страницы.

- Откройте в текстовом редакторе файл common.php, который находится в каталоге .\language\ru (перед открытием сделайте резервную копию этого файла)
- Найдите там строчки:

$lang = array_merge($lang, array(
   'TRANSLATION_INFO'   => '',
   'DIRECTION'          => 'ltr',
   'DATE_FORMAT'        => '|d.m.Y|',   // 01 Jan 2007 (with Relative days enabled)
   'USER_LANG'          => 'ru',

- И добавьте после переменной 'USER_LANG' => 'ru',
в новой строке свою переменную:

// add: new
'NEW_ABOUT'   => 'О форуме',

- Никаких префиксов перед переменной ставить не надо!

- Сохраните файл.

4) Всё. Перейдите по ссылке http://адрес_вашего_форума/about.php, чтобы увидеть вашу новую страницу. Нравится то, что получилось? Если нет - читаем дальше.

Добавлено спустя 48 секунд:
Добавление собсвеного стиля к самодельной странице
Первое, что может не понравиться - это мелковатый шрифт на странице. Исправляется просто: можно определить для панелей один из уже готовых стилей форума, например, как на странице FAQ. Но можно поступить ещё проще - прописать свой собственный стиль.

5) Создаём свой стиль текста для своей страницы.

- Откройте в текстовом редакторе файл content.css, который находится в каталоге .\styles\prosilver\theme (перед открытием сделайте резервную копию этого файла)
- Ничего в нём не трогайте, просто опуститесь в самый низ этого файла и добавьте туда кусок кода:

/* New clase
---------------------------------------- */   
.contentnew {
   min-height: 3em;
   overflow: hidden;
   line-height: 1.4em;
   font-family: "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
   font-size: 1em;
   color: #333333;
   padding-bottom: 1px;
}

.contentnew p {
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   font-size: 1.2em;
   margin-top: 1em;
   margin-bottom: 0.5em;
   line-height: 1.4em;
}

- Всё, что мы тут пытаемся настроить - это размер шрифта параграфа - обратите внимание на строку font-size: 1.2em. Со всем остальным можно поэкспериментировать позже. Главное достоинство такого подхода - играя в своей песочнице со своим собственным стилем, вы никогда ничего не испортите на основном форуме, ничего не поплывёт в разные стороны и не съедет.

6) Применим свой стиль на своей странице.

- Снова открываем свой файл шаблона about_body.html (напомню, что вы его сохранили в каталоге .\styles\prosilver\template вашего форума).
- Меняем все <div class="content"> на <div class="contentnew">. Если лень - просто копируем этот код целиком:

<!-- INCLUDE overall_header.html --> 
<h2>{L_NEW_ABOUT}</h2>

<div class="panel bg1">
    <div class="inner">
   <span class="corners-top"><span></span></span>      
      <div class="contentnew">
         <p>О Вашем форуме - первый абзац в первом блоке - заметьте, что панель называется "panel bg1"</p>      
         <p> О Вашем форуме - второй абзац.</p>   
      </div>   
   <span class="corners-bottom"><span></span></span>
   </div>
</div>

<div class="clear"></div>
 
<div class="panel bg2">
    <div class="inner">
   <span class="corners-top"><span></span></span>      
      <div class="contentnew">      
         <p>О Вашем форуме - первый абзац во втором блоке - заметьте, что панель называется "panel bg2".</p>      
         <p>Всё что Вам нужно знать об "panel bg1" и "panel bg2" - они отличаются только оттенком цвета.
         <br>Перенесем строку, добавим снизу неё пунктирную черту через весь блок</p>
         <hr class="dashed">      
      <p >И под чертой напишем о чём-то ещё</p>
      </div>   
   
      <span class="corners-bottom"><span></span></span>
   </div>
</div>

<!-- INCLUDE jumpbox.html -->
<!-- INCLUDE overall_footer.html -->

- Сохраняем файл и открываем страницу http://адрес_вашего_форума/aboutus.php в браузере. Шрифт сделался похожим по размеру на тот, что на странице FAQ.