Chapter: Using themes
« Creating a response for a specific format | ^ Advanced development | Overloading module files » |
− Table of content
Jelix offers a theme system.
Theme and templates ¶
templates for theme must be located in var/themes application folder. each template related to a module must be under a sub-directory named like its module.
Say you want to adapt main.tpl template of example module for web20 theme. You'll stored main.tpl in var/themes/web20/example. Note : original and theme template have the same name.
Default theme is originally named "default". If you want to just overload a template, you will store it under var/themes/default/module_name/template_name.tpl.
Theme and design files ¶
Here design files means CSS, graphics, JS files. Those files must be accessible from web request sand therefore shall be located in www/theme_name application folder.
In your scripts, to retrieve your theme path, use:
$themePath = jApp::config()->urlengine['basePath'].'themes/'.jApp::config()->theme.'/';
$rep->addCssLink($themePath.'design.css');
In a template, to add a css resource, use:
{meta_html csstheme 'design.css'}
Other template plugins exists, such as IE conditional plugins:
{meta_html cssthemeie 'design.css'} for ie
{meta_html cssthemeie7 'design.css'} for ie7
{meta_html cssthemeltie7 'design.css'} for ie < 7
Or more directly, j_themepath variable gives access to your theme path in a template :
<img src="{$j_themepath}logo.png" alt="logo"/>
Selecting a default theme ¶
theme parameter of configuration file fills this functionnality.
theme = web20
Selecting theme dynamically ¶
A typical use case is to let the user select his theme in a list. Suppose there is a form with a list of theme and the user picks one of them then submit. Application stores its choice (using session or a specific cookie).
Each time the user will visit the application, it will select his theme like this :
jApp::config()->theme = $choosenTheme;
Off course the best place to do it is in a coordinator plugin that must be coded and plugged.