Nous allons voir comment procéder pour créer son thème assez simplement.

Introduction

Faut-il des connaissances particulières ?
La mise en page de pages web utilise les langages XHTML et CSS. Il n'est pas nécessaire de connaître le XHTML pour faire son thème, en revanche il faut avoir quelques notions en CSS. Rassurez-vous, ce langage est très intuitif, il suffit d'avoir quelques notions en anglais pour le comprendre. Vous trouverez une liste des propriétés CSS sur le Site du Zéro. Si vous avez compris ces notions, avec un peu de bon sens et de volonté c'est à la porté de tout le monde.
Pour en savoir plus sur ces deux langages nous vous invitons à lire ce cours très bien fait, toujours sur le Site du Zéro.

Pour créer votre thème nous vous conseillons fortement de travailler sur un serveur local. Cela vous permettra de pouvoir travailler sur votre thème sans que ça n'ait un impact sur votre site en ligne.

Préparation des fichiers

Nous avons deux solutions. Soit nous partons du thème base et nous le modifions soit nous créons notre thème. Dans le premier cas ouvrez le dossier templates/base, sinon ouvrez le dossier templates et dupliquez le dossier du thème, que vous renommez en votre_template, sachant que ce nom doit comporté des lettres minuscules (non accentuées) et peut également contenir des chiffres. Ouvrez ensuite le dossier que vous venez de créer.

Vous pourrez trouver différent type de fichier dans le thème :

• *.css : Ces fichiers servent à modifier l'apparence globale du site (couleurs, images, épaisseurs de traits, polices, tailles...).
• *.tpl : Ces fichiers servent à modifier plus profondément votre site, à déplacer l'affichage de textes , voici un exemple avec les templates modifiés http://www.mussotrail.com. La modification de ces fichiers nécessite des connaissances en XHTML.
  

Vous y trouverez aussi les dossiers suivants :

• admin : dans ce dossier vous trouverez les fichiers *.tpl relatifs au panneau d'administration.
• config dans lequel il y a un dossier par langue dans laquelle le thème est porté. Ils contiennent les fichiers de configuration, c'est-à-dire les informations qui s'affichent dans l'administration des thèmes (créateur, date, version, largeur de page...). Si vous avez décidé plus haut de créer votre propre thème il faudra adapter le contenu de ces fichiers.
• images dans lequel on trouve toutes les images comme les boutons et autres, ils sont utilisés dans les modules par exemple.
• modules Dans ce dossier vous trouverez tout les fichiers relatifs aux modules.
• theme Vous y trouverai tout les fichiers css ainsi qu'un dossier images contenant toute les images relatives au thème
  
  

Fichiers à modifier

Rentrons maintenant dans le vif du sujet, il va falloir modifier les fichiers CSS. Il est préférable de s'y prendre dans l'ordre suivant :

• design.css : Éléments du design (conteneurs).
• content.css : Classes propres au contenu du site (messages, modules).
• global.css : Classes utilisées sur l'ensemble du site, aussi bien dans l'administration que dans les modules.
• admin.css : Feuille de style gérant le panneau d'administration comme son nom l'indique.
  

A savoir ! Il existe encore d'autres fichiers css utilisés dans le thème, comme le default.css, celui-ci se trouve dans le dossier template/default, Pour plus d'information rendez vous ici : default.css

Les quatre fichiers suivants sont en principe indépendant des thèmes, ils ne contiennent aucune information de couleur mais simplement du positionnement et autres propriétés ne changeant pas quelque soit la couleur.

• bbcode.css : L'ensemble des styles générés par les balises BBCode.
• tinymce.css : L'ensemble des styles générés par les balises tinymce.
• print.css : Styles utilisé lors de l'impression des articles, document du wiki et autres.
• generic.css : Styles génériques, normalement compatibles avec tous les thèmes.
  

Ensuite viennent les modules. Leurs fichiers css se trouvent dans le dossier modules, ils seront nommés suivant le module, l'avantage par rapport a la version c'est que vous n'êtes plus obligés de faire les modifications directement dans le module mais apporté un style particulier à chaque thème ce qui permet donc une meilleur personnalisation des templates. Pour en savoir plus, veuillez vous reporter à cet article : Modifier l'apparence des minis modules

Au fur et à mesure de l'avancement vous verrez que ça prend forme