Quick links: Content - sections - sub sections
The page corresponding to the latest stable release can be seen in the Jelix 1.6 Manual

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.

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.'/';

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.