Créer un Thème

Sommaire

1. Créer les fichiers de base

2. Personnaliser son nouveau thème

3. Appronfondir le sujet

I  - Créer les fichiers de base

1. Choisir le nom de votre nouveau thème
   par exemple: toutrouge
2. Créer un répertoire portant le nom du thème choisi dans le répertoire skin
3. Dans ce nouveau répertoire (skin/toutrouge dans l'exemple), créez les fichiers vides suivant:
   
   • Créer un fichier base.css
   • Créer un fichier skin.opt

Voilà, si vous cliquez dans le menu THEME, vous verrez apparaître votre nouveau thème ... mais il ne sera pas très beau puisqu'il n'y a encore aucune personnalisation de faite !

II - Personnaliser son thème

A travers un exemple simple, nous allons apprendre les rudiments de la création du CSS et des options de configurations.

Hypothèse: vous voulez créer un thème dont la couleur de fond est rouge, de 960 pixels de large, avec un menu à gauche de la page de 170 pixels de large.

Bien sur, pour des choses aussi simple, les thème de base (standard ou zplusbleu par exemple) permettent de faire cela à la souris, sans aucun développement. Mais si vous savez créez un nouveau thème aussi simple, vous saurez en créer d'autres beaucoup plus complexes !

1. Editer le fichier base.css
   Il s'agit du fichier base.css du répertoire skin/toutrouge.
   Vous pouvez le modifier par ftp ou par le bouton Modifier le CSS du module thème.
   Mettez dans ce fichier ce fichier le code suivant:
   

   body {
    background-color : red;
   }
   

   Cliquez sur le menu THEME, puis sur toutrouge et enfin sur ENREGISTRER le thème
   Votre nouveau thème apparaît à l'écran et c'est ... violent (oui, un fond rouge )
   A ce niveau, si le fond rouge n'apparaît pas, faite un CTRL-F5 pour forcer le navigateur internet à mettre à jour son cache.
   
   
2. Modifier le fichier skin.opt
   Il s'agit du fichier base.css du répertorie skin/toutrouge.
   Les thèmes de ZitePLUS peuvent utiliser plusieurs paramètres prédéfinies comme:
   
   • menu_left : pour indiquer si le menu est à gauche ou à droite de la page
   • page_width: pour définir la taille de la page
   • side_width: pour définir la largeur du bandeau vertical coté menu
   • oppside_width: pour définir la taille du bandeau vertical du coté opposé au menu
   ZitePlus va automatiquement produire un fichier cms.css avec le bon code CSS lorsque vous enregistrerez les paramètres de configuration du thème. Ce fichier ne doit jamais être modifié manuellement.
   
   En outre, le fichier base.css peut aussi contenir les paramètres prédéfinies suivant:
   
   • basecolor
   • pagecolor
   • backcolor
   • headcolor
   • oddcolor
   • evencolor
   
   Ceci étant dit, modifions le fichier skin.opt afin d'ajouter les trois lignes suivantes (en gras):
   
   • menu_left="bool;1"
     cela va créer un paramètre de configuration pour le menu de type Oui ou Non et dont la valeur par défaut sera Oui, c'est à dire: Menu à gauche de la page.
     L'utilisateur pourra changer la place du menu à la souris
   • page_width="int;960;0:1920"
     Cela va créer un paramètre largeur de page dont la valeur par défaut sera de 960 pixels, mais qui pourra être changé librement par l'utilisateur (et par l'interface graphique du thème)
   • side_width="int;170;0:1920"
   Une fois ces modifications réalisées, il faut cliquez sur enregistrer (celui du menu THEME, paramètres de configuration)
   Et là: Le fond est rouge, la largeur du site est bien de 960 pixels et  le menu à gauche de 170pixels de large l
   
   Plus fort, on peut maintenant passer à la souris le menu à droite ou à gauche et faire varier facilement la largeur du site (mettre 0 pour un site de taille variable qui s'adapte à tout l'écran)
   
   Si le résultat vous plait, vous pouvez cliquez sur Passer le thème en production ou revenir au thème de production en cliquant sur Abandonner le test.
   Il sera toujours possible de modifier votre nouveau thème en cliquant sur le nom du thème
   
   
3. Changer la couleur de fond à la souris
   Mette le fond en rouge, c'est bien, mais si on doit éditer le fichier css à chaque essai: c'est un peu lourd !
   Pourquoi ne pas le faire à la souris ?
   Nous allons pour cela changer un petit peu les fichiers précédent et découvrir un autre type de paramètre.
   Dans le fichier skin.opt, ajouter la ligne suivante:
   
   • backcolor="color;#3c7a9a"
   Dans le fichier base.css, nous allons modifier pour avoir
   

   body {
    background-color : [backcolor];
   }
   

   Pour activer ces modifications, retourner sur le Thème toutrouge et cliquez sur Enregistrer.
   Pour changer la couleur de fond à la souris, il suffit maintenant de cliquer sur la zone de couleur, de sélectionner la couleur souhaitée et de cliquer sur enregistrer.
   
   Explication: Vous avez utilisez un paramètre prédéfini: backcolor que vous avez mis dans le fichier modèle du CSS. Ce sont les [ ] autour du nom backcolor qui indiquent qu'il s'agit d'un paramètre.
   Lorsque vous cliquez sur enregistrer, ZitePLUS prend la valeur courante du paramètre et produit un fichier de style compréhensible par tous les navigateurs internet (toutrouge.css dans ce cas)
   
   

III - Approfondir le sujet (en cours de rédaction)

• La structure du répertoire skin
• Les paramètres prédéfinies du module Skin
• Les images standard de ZitePLUS
• Utiliser ses propres images
• Faire varier automatiquement la couleur d'une image
• Modifier un style issu d'un ancien zite ou ziteplus pré-thème
• Distribuer son thème