Quick links: Content - sections - sub sections

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

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.