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

Список разделов phpBBex 1.x (поддерживается) Мастерская 1.x

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

Сообщение #1 RuRupert » 24.03.2013, 13:12

Создание дополнительных (произвольных) страниц в стиле 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.
Последний раз редактировалось RuRupert 24.03.2013, 23:13, всего редактировалось 2 раз(а).
RuRupert M
Автор темы, Мастер
Возраст: 36
Репутация: 61
С нами: 10 лет 3 месяца

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

Сообщение #2 RuRupert » 24.03.2013, 13:14

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

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

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

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

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

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

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

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

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

- Найдите там строку:
Код: Выделить всё
'U_UCP_SETTINGS'      => append_sid("{$phpbb_root_path}ucp.$phpEx", 'i=prefs&amp;mode=personal'),

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

Код: Выделить всё
// 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
Автор темы, Мастер
Возраст: 36
Репутация: 61
С нами: 10 лет 3 месяца

Сообщение #3 RuRupert » 24.03.2013, 23:18

В примеры кода попали пробелы (( Последнее сообщение пока не могу откорректировать. Если кто будет проверять эту инструкцию в действии - уберите из имён переменных лишние пробелы: U_ PAGE_ABOUT поменяйте на U_PAGE_ABOUT и L_ NEW_ABOUT - на L_NEW_ABOUT.
RuRupert M
Автор темы, Мастер
Возраст: 36
Репутация: 61
С нами: 10 лет 3 месяца

Сообщение #4 VEG » 25.03.2013, 01:09

RuRupert, исправил. Вообще лучше всю ценную информацию в первом сообщении писать, чтобы вы потом сами могли исправлять статью :)
VEG M
Администратор
Аватара
Возраст: 35
Откуда: Finland
Репутация: 1649
С нами: 11 лет 1 месяц

Сообщение #5 Girl » 09.04.2013, 00:13

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

Изображение

Изображение
Получается вот так
Спойлер
Изображение
в предпоследнем изображении между тегами <h2></h2> название меняла на нормальное, кеш чистила ... то же самое
...
к следущему посту: помогло, большое спасибо!
Последний раз редактировалось Girl 09.04.2013, 01:24, всего редактировалось 1 раз.
Girl
Мастер
Аватара
Репутация: 18
С нами: 10 лет 7 месяцев

Сообщение #6 VEG » 09.04.2013, 01:06

Girl, пишите:
Код: Выделить всё
page_header($user->lang['NEW_ABOUT']);
VEG M
Администратор
Аватара
Возраст: 35
Откуда: Finland
Репутация: 1649
С нами: 11 лет 1 месяц

Сообщение #7 Girl » 09.04.2013, 02:56

RuRupert:Применим свой стиль на своей странице.
Скажите пожалуйста, как расположить содержимое по центру страницы?
Вот так не выравнивает
Спойлер
Код: Выделить всё
/* 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
Мастер
Аватара
Репутация: 18
С нами: 10 лет 7 месяцев

Сообщение #8 RuRupert » 09.04.2013, 10:32

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

Код: Выделить всё
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-страницы примените этот стиль к нужному параграфу:

Код: Выделить всё
<p id="new_center">Текст отдельного параграфа с выравниванием по центру</p>
RuRupert M
Автор темы, Мастер
Возраст: 36
Репутация: 61
С нами: 10 лет 3 месяца

Сообщение #9 Girl » 09.04.2013, 10:48

RuRupert:Попробуйте убрать
спасибо , центрировалось ! почти)
Girl
Мастер
Аватара
Репутация: 18
С нами: 10 лет 7 месяцев

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

Сообщение #10 toha50 » 25.06.2013, 17:23

А можно сделать так, чтобы созданные страницы открывались в портале?
toha50 M
Новичок
Откуда: Москва
Репутация: 0
С нами: 9 лет 11 месяцев

Сообщение #11 boofoo » 03.07.2013, 19:58

Создал страницу,создал кнопку в меню"Главная",сделал код по аналогии других кнопок вот так(форум на хостинге) :
Код: Выделить всё
<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

Добавлено спустя 3 минуты 21 секунду:
Даже в эксплорире переходит без проблем :smile:
boofoo
Бывалый
Репутация: 15
С нами: 10 лет

Сообщение #12 Sumanai » 03.07.2013, 20:19

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

Работает в хроме.
Вот надпись белым на белом вижу. И картинку отсутствующую.
р.png
Использование поиска продлевает жизнь.
Это форум поддержки форка phpBBex. Поддержка по phpBB осуществляется в других местах.
Sumanai M
Гуру
Аватара
Репутация: 1677
С нами: 10 лет 4 месяца

Сообщение #13 boofoo » 03.07.2013, 21:22

Sumanai, Странно,у меня не работало,пока не перезагрузился,все равно спасибо :eh:
А белая надпись с отсутствующей картинкой это шапка форума,а какой код удалить,что бы полностью шапку убрать без повреждений?
boofoo
Бывалый
Репутация: 15
С нами: 10 лет

Сообщение #14 Sumanai » 03.07.2013, 21:29

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

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

Код: Выделить всё
      <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
Гуру
Аватара
Репутация: 1677
С нами: 10 лет 4 месяца

Сообщение #15 Aleshka » 04.07.2013, 23:36

Можно ли страницу запустить не из корня форума ?
Aleshka M
Новичок
Аватара
Возраст: 27
Откуда: Москва
Репутация: 5
С нами: 9 лет 11 месяцев

Сообщение #16 Sumanai » 04.07.2013, 23:44

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

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

Код: Выделить всё
// add: new var
'U_PAGE_ABOUT'      => append_sid("{$phpbb_root_path}моя_папка/ about.$phpEx"),

Вместо моя_папка- ваш путь.
Использование поиска продлевает жизнь.
Это форум поддержки форка phpBBex. Поддержка по phpBB осуществляется в других местах.
Sumanai M
Гуру
Аватара
Репутация: 1677
С нами: 10 лет 4 месяца

Сообщение #17 Aleshka » 05.07.2013, 10:11

мне наоборот нужно вернуться
Код: Выделить всё
// add: new var
'U_PAGE_ABOUT'      => append_sid("{$phpbb_root_path}../about.$phpEx"),

По идее должно выглядеть так ? но не работает =) нужно что-то прописать в самом about.php, если я не ошибаюсь, а что я не знаю :smile:
Aleshka M
Новичок
Аватара
Возраст: 27
Откуда: Москва
Репутация: 5
С нами: 9 лет 11 месяцев

Сообщение #18 Sumanai » 05.07.2013, 10:58

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

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

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

Проще вообще убрать эту строчку из \includes\ functions.php, и вместо переменной напрямую написать в файле шаблона
Код: Выделить всё
<li><a href="../about.php">{L_NEW_ABOUT}</a></li>
Кстати, тоже способ для прописывания относительного адреса, проще, чем описал RuRupert. Для большинства хватит одной точки, вам же надо две.
Использование поиска продлевает жизнь.
Это форум поддержки форка phpBBex. Поддержка по phpBB осуществляется в других местах.
Sumanai M
Гуру
Аватара
Репутация: 1677
С нами: 10 лет 4 месяца

Сообщение #19 Aleshka » 05.07.2013, 11:07

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

Добавлено спустя 38 секунд:
или любой другой странице не находящейся в /forum
Aleshka M
Новичок
Аватара
Возраст: 27
Откуда: Москва
Репутация: 5
С нами: 9 лет 11 месяцев

Сообщение #20 Sumanai » 05.07.2013, 11:11

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

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

$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './forum/';
Использование поиска продлевает жизнь.
Это форум поддержки форка phpBBex. Поддержка по phpBB осуществляется в других местах.
Sumanai M
Гуру
Аватара
Репутация: 1677
С нами: 10 лет 4 месяца

След.

Вернуться в Мастерская 1.x



cron