Форум поддержки phpBB

Форум русской поддержки phpBB3
http://bb3x.ru/forum/

Мануал: как создать свой стиль

http://bb3x.ru/forum/stili-phpbb3/manual-kak-sozdat-svojj-stil-t4842.html

Страница 1 из 1

Мануал: как создать свой стиль

СообщениеДобавлено: 01 ноя 2010, 00:58
UnderStorm
В этой теме я хочу написать подробное описание по созданию собственного стиля для phpbb3
Автор мануала: поддержка портала Y-P. Прошу администрацию не удалять копирайт, т.к. авторство данного мануала все таки принадлежит мне.

Итак, начнем.

Введение
Папки с темами для phpBB 3 хранятся в папке "styles", которая, в свою очередь, расположена в корневой папке форума.
Эта папка содержит 3 папки и один файл:
- imageset (папка с изображениями)
- template (папка с шаблонами в виде *.html файлов)
- theme (папка с файлами *.css)
- style.cfg


Для начала рассмотрим файлы style.cfg(в корне стиля), template.cfg (в папке template)
Всё, что написано после знака "#" - это комментарии, и при создании своего стиля вы можете их не писать.
Основное содержание:
Код: выделить все
name = Название вашего стиля
copyright = Ваш копирайт
version = Версия форума под который вы пишите свой стиль


В моем случае вышло так:
Код: выделить все
name = Y-P
copyright = © Y-P Designers, 2010
version = 3.0.7

Файл theme.cfg(в папке theme) содержит те-же строки, что и два предыдущих, но добавляется строка
parse_css_file = 1


Переходим к папке imageset
Она содержит изображения используемые стилем и файл imageset.cfg.
Файл imageset.cfg содержит 3 строки, как и style.cfg и дополнительно строчки с изображениями
Код: выделить все
img_forum_link = forum_link.gif*высота картинки*ширина картинки

Пример:
Код: выделить все
img_forum_read = forum_read.gif*27*27

Строк этих может быть бесконечное множество, советую отсавлять комментарии в этом файле, чтоб понять что в нем написано, если вы будете переделывать шаблон. Пример:
Код: выделить все
# Логотип
site_logo = site_logo.gif*100*200

В дальнейшем можно будет использовать указанные здесь картинки в шаблонах, заменяя их тегом {название картинки}, т.е. если в файле imageset.cfg вы прописали строку Site_logo = site_logo.gif*100*200, то, например, в файле overall_header можно будет указать
Код: выделить все
{site_logo}
вместо длинного тега
Код: выделить все
<img src="/styles/…/imageset/site_logo">

На этом всё простое закончилось и начались более сложные и соответственно интересные работы с шаблоном при которых виден результат.


Теперь загрузим наш стиль в phpBB и посмотрим, что же у нас вышло:
Форум ругается и выдает строчку
Код: выделить все
template->_tpl_load_file(): File ./styles/…/template/index_body.html does not exist or is empty

Надо создать пока что пустой файл index_body.html там, где хочет его увидеть форум.
Теперь немного отредактируем его. Добавьте в самом верху файла строчку
Код: выделить все
<!-- INCLUDE overall_header.html -->

И создайте в той же папке, где находится index_body.html файл overall_header.html (так мы подключили так называемую "шапку" сайта). Сохраните файл и переходим к редактированию вышеуказанной "шапки".
Первыми строками этого файла, не зависимо от того, какой у вас будет шаблон, должно быть:
Код: выделить все
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>

Дальше указываем метатеги. Будьте внимательны при их изменении. Я покажу, что получилось у меня:
Код: выделить все
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="Y-P Designers 2010" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

После этих слов обязательно укажите тег
Код: выделить все
{META}

Дальше указываем заголовок сайта, который отображается в самом верху браузера.
В моем случае так:
Код: выделить все
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>

Теперь можно сохранить файл и полюбоваться. Заголовок форума уже показывается такой, какой должен быть.

Дальше идут строки
Код: выделить все
<!-- IF S_ENABLE_FEEDS -->
   <!-- IF S_ENABLE_FEEDS_OVERALL --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{U_FEED}" /><!-- ENDIF -->
   <!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{U_FEED}?mode=news" /><!-- ENDIF -->
   <!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{U_FEED}?mode=forums" /><!-- ENDIF -->
   <!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_NEW}" href="{U_FEED}?mode=topics" /><!-- ENDIF -->
   <!-- IF S_ENABLE_FEEDS_TOPICS_ACTIVE --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_ACTIVE}" href="{U_FEED}?mode=topics_active" /><!-- ENDIF -->
   <!-- IF S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" href="{U_FEED}?f={S_FORUM_ID}" /><!-- ENDIF -->
   <!-- IF S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_TOPIC} - {TOPIC_TITLE}" href="{U_FEED}?f={S_FORUM_ID}&amp;t={S_TOPIC_ID}" /><!-- ENDIF -->
<!-- ENDIF -->

Без них форум не будет нормально работать
А следующая строка указывает на файл stylesheet.css
Код: выделить все
<link rel="stylesheet" href="{T_STYLESHEET_LINK}" type="text/css" />

После добавления этой строки создайте файл stylesheet.css в папке theme

Продолжаем редактирование файла overall_header.html после всех строк, добавленных ранее мы добавляем большой javascript:
Код: выделить все
<script type="text/javascript">
// <![CDATA[
<!-- IF S_USER_PM_POPUP -->
   if ({S_NEW_PM})
   {
      popup('{UA_POPUP_PM}', 400, 225, '_phpbbprivmsg');
   }
<!-- ENDIF -->

function popup(url, width, height, name)
{
   if (!name)
   {
      name = '_popup';
   }

   window.open(url.replace(/&amp;/g, '&'), name, 'height=' + height + ',resizable=yes,scrollbars=yes,width=' + width);
   return false;
}

function jumpto()
{
   var page = prompt('{LA_JUMP_PAGE}:', '{ON_PAGE}');
   var per_page = '{PER_PAGE}';
   var base_url = '{A_BASE_URL}';

   if (page !== null && !isNaN(page) && page == Math.floor(page) && page > 0)
   {
      if (base_url.indexOf('?') == -1)
      {
         document.location.href = base_url + '?start=' + ((page - 1) * per_page);
      }
      else
      {
         document.location.href = base_url.replace(/&amp;/g, '&') + '&start=' + ((page - 1) * per_page);
      }
   }
}

/**
* Find a member
*/
function find_username(url)
{
   popup(url, 760, 570, '_usersearch');
   return false;
}

/**
* Mark/unmark checklist
* id = ID of parent container, name = name prefix, state = state [true/false]
*/
function marklist(id, name, state)
{
   var parent = document.getElementById(id);
   if (!parent)
   {
      eval('parent = document.' + id);
   }

   if (!parent)
   {
      return;
   }

   var rb = parent.getElementsByTagName('input');
   
   for (var r = 0; r < rb.length; r++)
   {
      if (rb[r].name.substr(0, name.length) == name)
      {
         rb[r].checked = state;
      }
   }
}

<!-- IF ._file -->

   /**
   * Play quicktime file by determining it's width/height
   * from the displayed rectangle area
   *
   * Only defined if there is a file block present.
   */
   function play_qt_file(obj)
   {
      var rectangle = obj.GetRectangle();

      if (rectangle)
      {
         rectangle = rectangle.split(',')
         var x1 = parseInt(rectangle[0]);
         var x2 = parseInt(rectangle[2]);
         var y1 = parseInt(rectangle[1]);
         var y2 = parseInt(rectangle[3]);

         var width = (x1 < 0) ? (x1 * -1) + x2 : x2 - x1;
         var height = (y1 < 0) ? (y1 * -1) + y2 : y2 - y1;
      }
      else
      {
         var width = 200;
         var height = 0;
      }

      obj.width = width;
      obj.height = height + 16;

      obj.SetControllerVisible(true);

      obj.Play();
   }
<!-- ENDIF -->

// ]]>
</script>

Зачем он нужен - обсудим позже, пока просто добавьте.
На этом контейнер <head> можно закрыть тегом
Код: выделить все
</head>



Продолжение следует

СообщениеДобавлено: 01 ноя 2010, 07:45
crash
тема ни о чем. Файл хедера просто тупо копируется с оригинального стиля, ничего нового не открыто.
А если хотите свой стиль сделать, то для этого не нужно изобретать велосипед, достаточно отредактировать стандартный стиль под свои нужды

Re: Мануал: как создать свой стиль

СообщениеДобавлено: 06 ноя 2010, 17:32
Varan
а на мой взгляд отличная тема, для тех кто только начинает копать форум, все на приделе ясно и понятно .... побольше бы таких тем и меньше умников которые в пустозвон обсуждают или отправляют в мануал
вопрос по теме
UnderStorm писал(а):Теперь загрузим наш стиль в phpBB и посмотрим, что же у нас вышло:
Форум ругается и выдает строчку

Код: выделить все
template->_tpl_load_file(): File ./styles/…/template/index_body.html does not exist or is empty

в моем случае форум матюкнулся на отсутствие файла viewforum_body.html , а не на index_body.html
Часовой пояс: UTC + 3 часа [ Летнее время ]
Страница 1 из 1
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/