Also available in ((../Deutsch/Layouts Deutsch)), ((../Español/Temas Español)), ((../Français/Themes Française)), ((../Русский/Темы Русский)), ((../简体中文/主题 简体中文))
{{toc numerate=1}}
Customizing the Wacko interface.
===What are themes?===
file:/ap_appearance_settings_en.png?right&500
WackoWiki allows you to completely change the appearance without interfering with the main PHP code - this is done with themes that are stored in the theme directory.
The themes defines the appearance of all pages in your installation and can be installed by adding (or modifying) the configuration.
The distribution comes with the default theme, which you can see on a WackoWiki installation.
To switch from one theme to another, you have to make a change in the ((Configuration Configuration)).
===Create your own theme===
If you want to customize your installation, it is best to create a new theme.
%%(info type="warning")
Even if your theme is slightly different from default, **create a new theme by copying it** - this will help to avoid accidental loss of your changes when you upgrade to the next versions of your wiki.
%%
A new theme is best created by copying the old one to the new directory and thoughtfully modifying the copied files.
===Merge changes in your new theme after an upgrade===
If you followed the advice and did not change the existing themes, but created a new one by copying, there will be no big difficulties with the upgrade. After updating the scripts, the WackoWiki will work with your individual theme as before.
Another question, if you want to include improvements from one of the standard themes in your theme, you will need some program like WinMerge or Meld and some patience. Once you've checked the changes in the standard theme with WinMerge, include them in your theme and you're done!
file:/theme_merge_changes_de.png
===Contents of theme files===
%%(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===
Within the themes folders, there are sub-folders like
* **appearance/**: It contains the .php-files and the .tpl-files with the HTML structure, which will be used to layout the content.
* **css/**: Contains (what a surprise) the CSS stylesheet for printing and normal layout. A lot of the work for a new layout or theme can be done here.
* **icon/**: The default icons are ok, but if you change the CSS, perhaps, you want to change the icons also. The logo of your wiki is not here. By defaut, it is under ""/yourfolderhere/file/global/wikilogo.png"".
* **lang/**: In the folder are some minor important language files.
====Configuration====
In the theme configuration file, you can also define your own configuration options and overwrite existing ones.
##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' => '...',
'' => '',
];
%%
===Template Engine===
* ((/Dev/Projects/Templatest/Usage Usage of Template Engine))
* ((/Dev/Projects/Templatest/Filters Pulls, Escaper and Filters))
* ((/Doc/English/ThemeGuide Theme guide with example templates))
===Layout===
The hard part isn’t actually writing the HTML and CSS code, it’s figuring out, conceptually (on a piece of paper), the behavior of all the necessary boxes to create a given layout.
WackoThemes could be found here:
* ((/Dev/Themes Themes))