=====Themes=====
>>==See also:==
~-**Tutorial:** [[http://blog.wikkawiki.org/2009/09/11/how-to-design-themes-for-wikkawiki/ | How to design themes for Wikka]]
~- [[DefaultLayout | Wikka's default page layout]]
>>{{since version="1.2" align="left"}}::c::

Wikka [[WhatsNew12 | 1.2]] introduces support for 100%-modular themes. It bundles 3 core themes and can be extended by installing new themes in the [[InstallingPlugins | plugin folder]].

====Core themes====

The following themes are bundled with [[WhatsNew12 | Wikka 1.2]]:

{{image class="left border" url="images/themes/light-thumb.jpg" link="http://docs.wikkawiki.org/images/themes/light.jpg" title="Light"}} ===Light=== A new, fixed-width theme, default in 1.2::c::
{{image class="left border" url="images/themes/default-thumb.jpg" link="http://docs.wikkawiki.org/images/themes/default.jpg" title="Default"}} ===Default=== A slightly revamped theme based on the classic Wikka 1.X template::c::
{{image class="left border" url="images/themes/kubrick-thumb.jpg" link="http://docs.wikkawiki.org/images/themes/kubrick.jpg" title="Kubrick"}} === Kubrick === An adaptation of Wordpress' classic Kubrick theme, to facilitate the integration of a wiki with an existing blog and to showcase the flexibility of the new theme support in Wikka
::c::

====Selecting a global theme====
The global theme (the one that is displayed by default to anonymous users and to new registered users) can be set in the [[ConfigurationOptions | configuration file]], e.g.

%%(php;23;wikka.config.php)
'theme' => 'light',
%%

The name of the theme can be any valid folder in ##templates## or ##plugins/templates##. Setting the name of a non-existing folder will default to ##light##.
Registered users can override the global theme configuration by setting a theme in their preferences.

====Installing custom themes====
Custom themes can be installed in the ##[[InstallingPlugins | plugins/]]## tree. Please note that, depending on the order of paths specified for ##wikka_template_path## in the [[ConfigurationOptions | configuration file]], plugin themes may override core ones. For instance, to install a custom version of the ##light## theme, you will need to create a folder called ##plugins/templates/light## and copy all the relevant files from the core theme folder.

====Themes and mod_rewrite====
If your wiki runs on Apache with ##[[ModRewrite | rewrite_mode]]## on and depending on your server configuration, you may notice a glitch with the display of themes. The kubrick theme, for one, doesn’t seem to correctly load the embedded graphics. The fix is simple: rewrite rules should be disabled in the templates folder. Simply create a file with the following content and save it as ##templates/.htaccess##:

%%(text;1;templates/.htaccess)
<ifmodule mod_rewrite.c>
# turn on rewrite engine
RewriteEngine off
</ifmodule>
%%
The graphics called by the stylesheets of the themes should now be loaded. The same fix may be needed to be applied to ##plugins/templates## if you are installing [[InstallingPlugins | custom themes]].

====The structure of a theme====
Building [[http://blog.wikkawiki.org/2009/09/11/how-to-design-themes-for-wikkawiki/ | custom themes]] is easy. Each theme consists of two files called ##header.php## and ##footer.php## together with optional support files such as stylesheets, images, javascript libraries etc.
The file structure of a theme is as follows:

%%(text)
templates/
..mytheme/
....css/
....img/
....js/
....footer.php
....header.php
%%

##header.php## and ##footer.php## are used to generate a wrapper around the main wiki content that is displayed in a div called ##<div id="content">##. The [[DefaultLayout | default layout]] can be used as a reference to customize these files.

Please note that to generate full paths to specific support files (e.g. stylesheets, images etc.) in the header and footer you will need to use the ##""GetThemePath()""## method:

%%(php;24;header.php)
<link rel="stylesheet" type="text/css" href="<?php echo $this->GetThemePath() ?>/css/wikka.css" />
%%

Note that if you changed the name of your custom CSS file, you must edit the above code manually to replace ##wikka.css## with the name of your custom CSS file.

You can use the ##stylesheet_hash## value to force refresh a stylesheet after upgrading:

%%(php;24;header.php)
<link rel="stylesheet" type="text/css" href="<?php echo $this->GetThemePath() ?>/css/wikka.css?<?php echo $this->htmlspecialchars_ent($this->GetConfigValue('stylesheet_hash')) ?>" />
%%

====Customizing menus and navigation bars====
The content, structure and layout of navigation menus are controlled by [[WikkaMenus | menu template files]] and menu widgets or "[[Menulets | menulets]]".


----
CategoryEN