Raccourcis : Contenu - rubriques - sous rubriques
EN FR

Jelix propose un système de thèmes, permettant donc de personnaliser les templates et les feuilles de style, sans toucher aux fichiers originaux.

Les templates d'un thème

Un thème est un répertoire dans app/themes/. Ce répertoire contient un répertoire pour chaque theme, et dans chaque répertoire de theme, des répertoires correspondant à chaque module et contenant les templates.

Par exemple, vous voulez adapter le template main.tpl du module "exemple", pour le thème "web20", vous stockerez un fichier main.tpl dans app/themes/web20/exemple/. Notez donc que le template original et le nouveau template possèdent le même nom.

Le thème par défaut ayant pour nom "default", si vous voulez redéfinir un template d'un module, même si vous n'utilisez pas explicitement les thèmes, vous placerez ce template dans app/themes/default/le_module/le_template.tpl.

les templates d'un theme peuvent aussi être stockés dans var/themes/, mais ce seront uniquement les templates créés à la volée durant la vie de l'application ou spécifiques à l'environnement dans lequel est installée l'application.

Un module peut aussi fournir ses templates pour plusieurs themes. Les templates seront alors stockés dans son répertoire templates/themes/nom_du_theme/.

Les fichiers web d'un thème

Par fichiers web, on entends les fichiers CSS, les images etc... Ces fichiers ne doivent pas être placés dans app/themes/ car ce répertoire n'est pas censé être accessible publiquement depuis le web.

Vous les placerez donc dans un répertoire themes/le_nom_du_theme/ dans le répertoire de base de votre application (basePath), en général donc dans www/.

Pour avoir le chemin web du theme, vous pouvez utiliser ceci :


   $chemin = jApp::urlBasePath().'themes/'.jApp::config()->theme.'/'
   $rep->addCssLink($chemin.'design.css');

Dans un template, vous avez une facilité en utilisant la balise meta :


{meta_html csstheme 'design.css'}

Mais vous avez aussi une variable déclarée automatiquement, $j_themepath, dans un template contenant le chemin des thèmes


  <img src="{$j_themepath}logo.png" alt="logo"/>

Déclarer un thème par défaut

L'activation d'un thème se fait dans le fichier de configuration, au niveau du paramètre theme :


theme = web20

Déclarer un thème dynamiquement

Pour offrir la possibilité à l'internaute de choisir son thème, vous pouvez lui proposer un formulaire avec la liste des thèmes (liste que vous construisez vous même).

Ensuite vous stockez le nom du thème choisi quelque part (en session, ou dans un cookie par exemple).

Enfin, pour que le thème soit activé automatiquement, il suffit de récupérer le nom du thème correspondant à l'utilisateur, et de le spécifier dans la configuration, au niveau du paramètre thème :


  jApp::config()->theme = $themeChoisi;

Bien sûr, le meilleur endroit pour faire ça est dans un plugin de coordinateur qu'il vous faut développer.