Chapter: Using themes
« Creating a response for a specific format | ^ Advanced development | Overloading module files » |
− Table of content
Jelix offers a theme system, so you can rewrite some templates to ease the design for CSS, without modifying original files.
Theme and templates ¶
Templates for theme must be located in the app/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 app/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 app/themes/default/module_name/template_name.tpl
.
Templates of a theme can also be stored into var/themes/
. But it should
be only templates created by the application itself or an other process,
during the life of the application.
A module can also provide its templates for some specific themes.
Templates should then be stored into its directory templates/themes/theme_name/
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/themes/<theme_name>
application folder.
In your scripts, to retrieve your theme path, use:
$themePath = jApp::urlBasePath().'themes/'.jApp::config()->theme.'/';
$rep->addCssLink($themePath.'design.css');
In a template, to add a css resource, use:
{meta_html csstheme 'design.css'}
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;
Of course the best place to do it is in a coordinator plugin that must be coded and plugged.