About creating Wacko Themes

Also available in Deutsch, Español, Française, Русский, 简体中文



Customizing the Wacko interface.

1. What are themes?

appearance settings module
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.

2. Create your own theme

If you want to customize your installation, it is best to create a new theme.


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.

3. 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!


merge changes in your theme

4. Contents of theme files


5. 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.

5.1. Configuration

In the theme configuration file, you can also define your own configuration options and overwrite existing ones.
lang/wacko.all.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' => '...',
    
'' => '',
];

6. Template Engine


7. 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: