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

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

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

Post #1by RuRupert » 24.03.2013, 13:12

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

Немного дополненное руководство, сделанное на базе этого и этого материала.

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

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

- Открываем любой текстовый редактор, поддерживающий кодировку "UTF-8 без BOM" (например "Notepad++").
- Создаём в нём новый файл, сразу в настройках выбираем кодировку "UTF-8 без BOM".
- Копируем следующий код (убедитесь, что в содержимом файла нет пустых строк и/или пробелов перед <?php и после ?>):
Code: Select all
<?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(); и добавьте после неё следующий фрагмент кода:
Code: Select all
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" !) и копируем в него следующий код:
Code: Select all
<!-- 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 (перед открытием сделайте резервную копию этого файла)
- Найдите там строчки:
Code: Select all
$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',
в новой строке свою переменную:
Code: Select all
// add: new
'NEW_ABOUT'   => 'О форуме',
- Никаких префиксов перед переменной ставить не надо!

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

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

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

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

- Откройте в текстовом редакторе файл content.css, который находится в каталоге .\styles\prosilver\theme (перед открытием сделайте резервную копию этого файла)
- Ничего в нём не трогайте, просто опуститесь в самый низ этого файла и добавьте туда кусок кода:
Code: Select all
/* 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">. Если лень - просто копируем этот код целиком:

Code: Select all
<!-- 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.
Last edited by RuRupert on 24.03.2013, 23:13, edited 2 times in total.
RuRupert M
Topic author, Мастер
Age: 31
Reputation: 60
With us: 4 yaers 10 months

Цепляем страницу к форуму

Post #2by RuRupert » 24.03.2013, 13:14

Привязать новую страницу к форуму можно разными способами (по степени простоты):

  • сделать на неё ссылку в каком-нибудь сообщении форума;
  • если у вас стоит портал на форуме, ссылку на страницу можно прописать в панели меню или панели ссылок;
  • прописать ссылку на эту страницу в админке в панели "верхних ссылок";
  • привязать страницу к верхнему выпадающему меню.

Для последнего случая возможны разные варианты: вы можете создать одну кнопку, если страница одна, создать новое выпадающее меню со списком, если страниц несколько или добавить новый пункт в уже существующее меню.

Ниже предложена инструкция по созданию новой отдельной кнопки для одной страницы.

1) Создаём свою кнопку в верхней панели навигации.

- Откройте в текстовом редакторе файл overall_header.html, который находится в каталоге .\styles\prosilver\template (перед открытием сделайте резервную копию этого файла) и найдите там строку <ul id="main-menu"> Всё, что идёт ниже - определяет уже существующие пункты меню. Дальнейшие действия зависят от того, куда Вы хотите вставить своё меню или кнопку. Для определённости - будем добавлять свою кнопку с левого края.

- После строки <ul id="main-menu"> вставьте следующую строчку кода:
Code: Select all
<li><a href="{U_PAGE_ABOUT}">{L_NEW_ABOUT}</a></li>
- Сохраните изменения и закройте файл - он больше не понадобится. В добавленной только что строчке вы можете заметить уже знакомую переменную NEW_ABOUT. В данном случае она будет определять то, что будет написано на вашей новой кнопке меню.

2) Остался последний штрих - прописать новую переменную U_PAGE_ABOUT, которая определяет адрес вашей страницы.

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

- Найдите там строку:
Code: Select all
'U_UCP_SETTINGS'      => append_sid("{$phpbb_root_path}ucp.$phpEx", 'i=prefs&amp;mode=personal'),

- Вставьте после неё определение своей переменной:

Code: Select all
// add: new var
'U_PAGE_ABOUT'      => append_sid("{$phpbb_root_path} about.$phpEx"),

- Сохраните изменения и закройте файл. В браузере откройте главную страницу вашего форума - слева должна появиться новая кнопка с надписью (если её нет - очистите кеш форума и браузера). Жмём на кнопочку и попадаем на нашу самодельную страницу в стиле phpBBex.

В заключение поясню, зачем такие сложности с переменными: использование такого подхода позволит без правок кода увидеть вашу страницу как на локальном так и на реальном хосте, т.к. в конструкции <li><a href="{U_PAGE_ABOUT}">{L_NEW_ABOUT}</a></li> не используется абсолютный путь к вашей странице.

Пример, как всё это самодельное творчество может выглядеть на реальном форуме, можно посмотреть здесь.
RuRupert M
Topic author, Мастер
Age: 31
Reputation: 60
With us: 4 yaers 10 months

Post #3by RuRupert » 24.03.2013, 23:18

В примеры кода попали пробелы (( Последнее сообщение пока не могу откорректировать. Если кто будет проверять эту инструкцию в действии - уберите из имён переменных лишние пробелы: U_ PAGE_ABOUT поменяйте на U_PAGE_ABOUT и L_ NEW_ABOUT - на L_NEW_ABOUT.
RuRupert M
Topic author, Мастер
Age: 31
Reputation: 60
With us: 4 yaers 10 months

Post #4by VEG » 25.03.2013, 01:09

RuRupert, исправил. Вообще лучше всю ценную информацию в первом сообщении писать, чтобы вы потом сами могли исправлять статью :)
С наилучшими пожеланиями, Евгений
VEG M
Администратор
Avatar
Age: 30
Location: Минск, Беларусь
Reputation: 1574
With us: 5 years 7 months

Post #5by Girl » 09.04.2013, 00:13

RuRupert wrote:'NEW_ABOUT' - это переменная, которая будет определять заголовок вашей страницы,
RuRupert, почему может переменная ставиться вместо названия?
Spoiler
Image

Image

Image
Получается вот так
Spoiler
Image
в предпоследнем изображении между тегами <h2></h2> название меняла на нормальное, кеш чистила ... то же самое
...
к следущему посту: помогло, большое спасибо!
Last edited by Girl on 09.04.2013, 01:24, edited 1 time in total.
Girl
Мастер
Avatar
Reputation: 18
With us: 5 years 2 months

Post #6by VEG » 09.04.2013, 01:06

Girl, пишите:
Code: Select all
page_header($user->lang['NEW_ABOUT']);
С наилучшими пожеланиями, Евгений
VEG M
Администратор
Avatar
Age: 30
Location: Минск, Беларусь
Reputation: 1574
With us: 5 years 7 months

Post #7by Girl » 09.04.2013, 02:56

RuRupert wrote:Применим свой стиль на своей странице.
Скажите пожалуйста, как расположить содержимое по центру страницы?
Вот так не выравнивает
Spoiler
Code: Select all
/* 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;
  text-align: center;
}

.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;
  text-align: center;
}
Girl
Мастер
Avatar
Reputation: 18
With us: 5 years 2 months

Post #8by RuRupert » 09.04.2013, 10:32

Попробуйте убрать выравнивание из определения .contentnew и оставить только для параграфа (.contentnew p). Или добавьте в файл стилей примерно такой кусочек:

Code: Select all
p#new_center {
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   font-size: 1.2em;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   line-height: 1.4em;
   text-align: center;
   }

И внутри шаблона своей html-страницы примените этот стиль к нужному параграфу:

Code: Select all
<p id="new_center">Текст отдельного параграфа с выравниванием по центру</p>
RuRupert M
Topic author, Мастер
Age: 31
Reputation: 60
With us: 4 yaers 10 months

Post #9by Girl » 09.04.2013, 10:48

RuRupert wrote:Попробуйте убрать
спасибо , центрировалось ! почти)
Girl
Мастер
Avatar
Reputation: 18
With us: 5 years 2 months

Новые страницы в портале

Post #10by toha50 » 25.06.2013, 17:23

А можно сделать так, чтобы созданные страницы открывались в портале?
toha50 M
Новичок
Location: Москва
Reputation: 0
With us: 4 yaers 5 months

Post #11by boofoo » 03.07.2013, 19:58

Создал страницу,создал кнопку в меню"Главная",сделал код по аналогии других кнопок вот так(форум на хостинге) :
Code: Select all
<ul id="main-menu">
      <li><a class="icon" style="background-image: url(./styles/prosilver/imageset/Home.png);
             background-position: 1px 50%;background-repeat: no-repeat;
               padding-bottom: 10px;padding-left: 55px;padding-top: 10px; "
              href="{U_PAGE_ABOUT}">{L_GOLOVNA}</a>
      <li><a class="icon" style="background-image: url(./styles/prosilver/imageset/Comment.png);
             background-position: 1px 50%; padding-left: 55px; background-repeat: no-repeat;
            padding-top: 10px; padding-bottom: 10px; "
            href="{U_INDEX}">{L_FORUM}</a>
В мозиле без проблем переходит по кнопке,а в хроме выдает ошибку 404 :spy:
Что можно сделать,в чем проблема? вот сам форум http://ewa.p.ht/index.php

Added after 3 minutes 21 second:
Даже в эксплорире переходит без проблем :smile:
boofoo
Бывалый
Reputation: 15
With us: 4 yaers 6 months

Post #12by Sumanai » 03.07.2013, 20:19

boofoo wrote:а в хроме выдает ошибку 404 :spy:

Работает в хроме.
Вот надпись белым на белом вижу. И картинку отсутствующую.
р.png
Использование поиска продлевает жизнь.
Это форум поддержки форка phpBBex. Поддержка по phpBB осуществляется в других местах.
Sumanai M
Гуру
Avatar
Reputation: 1612
With us: 4 yaers 10 months

Post #13by boofoo » 03.07.2013, 21:22

Sumanai, Странно,у меня не работало,пока не перезагрузился,все равно спасибо :eh:
А белая надпись с отсутствующей картинкой это шапка форума,а какой код удалить,что бы полностью шапку убрать без повреждений?
boofoo
Бывалый
Reputation: 15
With us: 4 yaers 6 months

Post #14by Sumanai » 03.07.2013, 21:29

boofoo wrote:А белая надпись с отсутствующей картинкой это шапка форума,а какой код удалить,что бы полностью шапку убрать без повреждений?

Надпись убирается из админки, в настройках отображения.
Хотя можно в шаблоне overall_header.html удалить

Code: Select all
      <div class="headerbar">
         <div class="inner"><span class="corners-top"><span></span></span>
         <div id="site-description">
            <!-- IF SITE_LOGO_IMG --><a href="{U_INDEX}" title="{SITENAME}<!-- IF SITE_DESCRIPTION --> - {SITE_DESCRIPTION}<!-- ENDIF -->" id="logo">{SITE_LOGO_IMG}</a><!-- ENDIF -->
            <!-- IF STYLE_SHOW_SITENAME_IN_HEADERBAR -->
            <h1><!-- IF SITE_LOGO_IMG -->{SITENAME}<!-- ELSE --><a href="{U_INDEX}">{SITENAME}</a><!-- ENDIF --></h1>
            <p>{SITE_DESCRIPTION}</p>
            <!-- ENDIF -->
         </div>
      <!-- IF not S_OUTLINKS and S_DISPLAY_SEARCH and not S_IN_SEARCH -->
         <div id="search-box" style="margin-top: 23px;">
            <form action="{U_SEARCH}" method="post" id="search">
            <fieldset>
               <input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" placeholder="{L_SEARCH_MINI}" value="{SEARCH_WORDS}" />
               <input class="button2" value="{L_SEARCH}" type="submit" /><br />
               <a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
            </fieldset>
            </form>
         </div>
      <!-- ENDIF -->
         <span class="clear"></span></div>
      </div>
Использование поиска продлевает жизнь.
Это форум поддержки форка phpBBex. Поддержка по phpBB осуществляется в других местах.
Sumanai M
Гуру
Avatar
Reputation: 1612
With us: 4 yaers 10 months

Post #15by Aleshka » 04.07.2013, 23:36

Можно ли страницу запустить не из корня форума ?
Aleshka M
Новичок
Avatar
Age: 21
Location: Москва
Reputation: 5
With us: 4 yaers 6 months

Post #16by Sumanai » 04.07.2013, 23:44

Aleshka wrote:Можно ли страницу запустить не из корня форума ?

В смысле? Если нужно расположить не в корне- пропишите другой путь в .\includes\ functions.php , если вы следовали инструкции во втором посте

Code: Select all
// add: new var
'U_PAGE_ABOUT'      => append_sid("{$phpbb_root_path}моя_папка/ about.$phpEx"),

Вместо моя_папка- ваш путь.
Использование поиска продлевает жизнь.
Это форум поддержки форка phpBBex. Поддержка по phpBB осуществляется в других местах.
Sumanai M
Гуру
Avatar
Reputation: 1612
With us: 4 yaers 10 months

Post #17by Aleshka » 05.07.2013, 10:11

мне наоборот нужно вернуться
Code: Select all
// add: new var
'U_PAGE_ABOUT'      => append_sid("{$phpbb_root_path}../about.$phpEx"),

По идее должно выглядеть так ? но не работает =) нужно что-то прописать в самом about.php, если я не ошибаюсь, а что я не знаю :smile:
Aleshka M
Новичок
Avatar
Age: 21
Location: Москва
Reputation: 5
With us: 4 yaers 6 months

Post #18by Sumanai » 05.07.2013, 10:58

Aleshka wrote:По идее должно выглядеть так ?

Нет. Получается ваш)адрес/../about.php , что никогда работать не будет.

Aleshka wrote:нужно что-то прописать в самом about.php, если я не ошибаюсь, а что я не знаю :smile:

Проще вообще убрать эту строчку из \includes\ functions.php, и вместо переменной напрямую написать в файле шаблона
Code: Select all
<li><a href="../about.php">{L_NEW_ABOUT}</a></li>
Кстати, тоже способ для прописывания относительного адреса, проще, чем описал RuRupert. Для большинства хватит одной точки, вам же надо две.
Использование поиска продлевает жизнь.
Это форум поддержки форка phpBBex. Поддержка по phpBB осуществляется в других местах.
Sumanai M
Гуру
Avatar
Reputation: 1612
With us: 4 yaers 10 months

Post #19by Aleshka » 05.07.2013, 11:07

ну в общем ссылка не очень важна, нужно другое,придать стиль странице index

Added after 38 seconds:
или любой другой странице не находящейся в /forum
Aleshka M
Новичок
Avatar
Age: 21
Location: Москва
Reputation: 5
With us: 4 yaers 6 months

Post #20by Sumanai » 05.07.2013, 11:11

Aleshka wrote:или любой другой странице не находящейся в /forum

Чисто догадка- попробуйте в созданном файле по инструкции на первой странице в третей строчке написать что- то типа:

$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './forum/';
Использование поиска продлевает жизнь.
Это форум поддержки форка phpBBex. Поддержка по phpBB осуществляется в других местах.
Sumanai M
Гуру
Avatar
Reputation: 1612
With us: 4 yaers 10 months

Next

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