View source for Изменение дизайна в Wacko

Имеется также ((../Deutsch/Layouts Deutsch)), ((../English/Themes English)), ((../Español/Temas Español)), ((../Français/Themes Française)), ((../简体中文/主题 简体中文))

{{toc numerate=1}}

=== Что такое темы === 
file:/ap_appearance_settings_ru.png?right&500
WackoWiki позволяет полностью изменить свой внешний вид, не вмешиваясь в основной php-код -- это осуществляется с помощью //тем//, которые хранятся в каталоге //themes//.

Тема определяет внешний вид всех страниц вашей инсталляции и может быть установлена с помощью добавления (или изменения) в ((/Doc/Русский/ФайлКонфигурации конфигурации)) следующей строки.

В дистрибутиве поставляется две темы: **default** -- которую вы можете наблюдать на инсталляции WackoWiki.

=== Создание собственной темы ===
Если вы хотите придать вашей инсталляции индивидуальность -- лучше всего создать новую тему.
%%(info type="warning")
NB: даже если ваша тема будет незначительно отличаться от default, **создайте новую путём копирования** -- это поможет избежать случайной потери ваших изменений при апгрейде на следующие версии ваки. Ну и copyrights, опять же =)
%%
Новая тема лучше всего создаёт копированием старой в новый каталог и вдумчивым исправлением скопированных файлов.

=== Как новой теме выжить при upgrade ===
Если вы послушались совета и не меняли существующие темы, а создали новую путём копирования, то с upgrade больших сложностей не возникнет. После обновления скриптов вака будет работать с вашей индивидуальной темой как и раньше.

Другой вопрос, если вы захотите включить в свою тему нововведения из одной из стандартных тем -- для этого вам понадобится какая-нибудь программа навроде yandex:WinMerge и некоторое терпение. Отследив изменения в стандартной теме с помощью WinMerge, включите их в свою тему и готово!

=== Содержание файлов темы ===
Файлы разбиты по следующим папкам:
%%(wacko wrapper="box" wrapper_align="left" wrapper_width=500)
**theme/**
  * default/
    * appearance/
      * template/
        * footer.tpl
        * footerprint
        * header.tpl
        * headerprint.tpl
        * headerwordprocessor.tpl
      * footer.php
      * footerprint.php
      * footerwordprocessor.php
      * header.php
      * headerprint.php
      * headerwordprocessor.php
    * css/
      * default.css
      * wacko.css
      * wordprocessor.css
      * print.css
    * icon/
      * archive.svg
      * attachment.svg
      * audio.svg
      * ...
    * lang/
      * wacko.all.php
      * wacko.de.php
      * wacko.en.php
      * ...
    * readme
%%

==== Appearance -- внешний вид ====
Здесь расположены php-файлы, отвечающие за вывод шапки и подвала страницы, окружающих контент-поле (то, в котором выводится сам документ ваки).
  * **header.php** -- основная шапка. Именно её вы видите в начале каждой страницы. Обычно там размещается заголовок страницы, меню ваки и пользователя.
  * **footer.php** -- всё то, что будет после документа. Ссылки на редактирование и прочие сервисы обычно оказываются размещены здесь. В теме **tabs** туда же попали и комментарии.
  * **headerprint.php / footerprint.php** -- шапка и подвал для оформления версии для печати. Как вы можете заметить, они на порядок проще.
  * **headerwordprocessor.php / footerwordprocessor.php** -- то же самое для LibreOffice. Принципиальный отличий от версии для печати нет.

==== CSS -- таблицы стилей ====
Что там находится вы догадаетесь без труда, раз уж взялись перелопачивать тему.
Не будем пояснять каждую инструкцию css-файла, заметим лишь, что в теме **default** в css-файле содержатся преимущественно стили для самой вака-разметки, тогда как CSS темы **tabs** содержит ещё массу своих, специфичных инструкций, который написаны с использованием заглавных букв, чем и отличаются от тех, что предназначены для вака-разметки

==== Icons -- служебные пиктограммы ====
В этой папке -- куча иконок, которые использует вака-форматтер или файлы из папки appearance.
Для вака-разметки важно наличие там иконок:
  * **xml.svg** -- для оформления ссылок на RSS
  * **web.svg** -- для оформления внешних ссылок
  * **mail.svg** -- для оформления mailto: ссылок
  * **file.svg** -- для ссылок на файлы *.zip и другие
  * **lock.svg** -- для оформления ссылок на страницы, к которым нет доступа
  * **key.svg** -- для ссылок на страницы, доступ к которым ограничен
  * **favicon.ico** -- иконка в избранное

==== Lang -- специфические для темы языковые настройки ====
Как и в ((Локализация локализации)), здесь находятся языковые файлы.
Эти файлы присоединяются вакой //после присоединения основного языкового файла// и служат для замены каких-то терминов из стандартного набора или использования новых, специфичных для темы. Создавая тему, создайте там файлов по числу существующих языков (см. ((Локализация локализация)) про то, какие они и сколько их) -- если не можете перевести на немецкий -- напишите хотя бы по английски (или наоборот, если вы знаете немецкий, но с английским туговато).

====Конфигурация====
В файле конфигурации темы вы также можете определить свои собственные параметры конфигурации и перезаписать существующие.
##lang/wacko.all.php##
%%(php)
<?php
// theme options =========
$this->db->revisions_hide_cancel = 1;
$this->db->site_desc  = 'My Theme for WackoWiki';
$this->db->footer_inside = 0;

// ============================
$theme_translation = [
	'EditIcon' => '...',
	'' => '',
];
%%

=== Сделали новую тему? ===
!!Если вы создадите новую тему и она покажется удачной, ((https://wackowiki.org/bugs/ issue tracker)) её нам. Заранее спасибо.

С большой долей вероятности она будет выложена на данной странице либо включена в дистрибутив.!!

===Ссылки===
  * ((/Dev/Projects/Templatest/Usage Usage of Template Engine))
  * ((/Dev/Projects/Templatest/Filters Pulls, Escaper and Filters))
  * ((/Doc/English/ThemeGuide Theme guide with example templates))

=== Вопросы ===
  * ((user:AlexNow AlexNow)): А где можно скачать еще тем? или те, что входят в дистрибутив - единственные?
    * ((/Dev/Themes))