Chapitre: Système de thèmes
« Créer une réponse pour un format spécifique | ^ Développement avancé | Surcharge de fichiers de modules » |
− Table des matières
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.