Comment fabriquer des thèmes CSS ?

Pour limiter la duplication de code d’un thème à l’autre, commençons par mutualiser le code commun dans une base d’intégration.

Base d’intégration

Une base d’intégration est un socle de déclarations CSS. C’est un cadre de travail, qui contient au moins une mise à niveau multi-navigateurs, dite « reset ». La base peut aussi proposer des images, polices, scripts… Les frameworks CSS actuels constituent des bases plus ou moins complètes.

Une bonne base est visuellement neutre et techniquement non intrusive, afin de rester facilement surchargeable. Elle est transverse et peut être utilisée telle quelle dans différents projets. Elle peut être paramétrable, par des variables, via preprocessing et/ou interface de configuration. Mais elle ne doit pas recevoir de personnalisations CSS directes : celles-ci doivent se faire par surcharge, dans le thème.

Qu’est-ce qu’un thème ?

Un thème est l’habillage graphique d’un site. Il en définit les éléments identifiants : couleurs, style graphique, etc. Concrètement, il est constitué de déclarations CSS rassemblées dans une feuille de style additionnelle, simplement nommée « theme.css ».

Précisons qu’il s’applique sur une structure HTML donnée, laquelle n’est pas interchangeable. Il peut être remplacé par un autre thème ; ou supprimé.

Il est facultatif. Il n’existe pas de thème par défaut. L’habillage graphique par défaut résulte de l’intégration de base, sans thème. Ajouter un thème consiste à compléter cette base de caractéristiques graphiques.

Le répertoire /theme

Un thème est constitué d’au moins une feuille de style, « theme.css », laquelle peut appeler d’autres fichiers : images, polices, etc. Un thème est donc nécessairement rangé dans un répertoire, simplement nommé « /theme ».

Ce répertoire adopte la même arborescence que l’intégration de base. Il est constitué, a minima, d’un sous-répertoire « /css » contenant la feuille de style « theme.css ». Le dossier /theme peut contenir d’autres sous-répertoires, par exemple : « /img », « /font » et « /js ». Voici l’arborescence typique d’un thème :

• /theme
  • /css
    • theme.css
    • /font
    • /img
  • /img

Les personnalisations s’effectuent par surcharges dans ce dossier.

Appliquer un (autre) thème

Un thème s’applique par cet appel dans le head, après la base :

<link rel="stylesheet" href="/theme/css/theme.css">

Les autres thèmes disponibles sont stockés, en dossiers prêts à l’emploi, dans un sous-répertoire « /themes » (au pluriel), comme suit :

• /themes
  • /dragée
  • /olive
  • /ambre
  • /cinabre
  • /lichen
  • etc.

Il existe de par le Web, bien des façons de changer de thème, via script, interface, galerie, d’un clic, de baguette magique… Mais hors contexte particulier, pour pouvoir suivre ce tuto, faisons à la main, en déplaçant le thème voulu dans le répertoire /theme (au singulier), ce qui évite d’avoir à éditer les pages HTML.

Pour appliquer un autre thème :

1. Vider le répertoire /theme,
2. Y déposer les fichiers du thème voulu.

Par exemple, pour appliquer le thème « olive », il faut copier le contenu du dossier /themes/olive et le coller dans le répertoire /theme (sans vider le répertoire d’origine).

Créer un nouveau thème

Comme nous venons de le voir, un thème est un dossier contenant au moins /css/theme.css et adoptant la même arborescence que l’intégration de base.

Pour créer un nouveau thème, il faut se placer dans le répertoire /theme afin de pouvoir l’essayer :

1. Vider le répertoire /theme
2. Créer un sous-répertoire /css dans /theme
3. Créer un fichier theme.css dans /theme/css
4. Tout se fait par surcharge de l’intégration de base. Voici le principe, très simple :
   1. Dans l’intégration de base, repérer la la règle CSS que l’on souhaite personnaliser, la copier et la coller à l’identique dans la feuille de style theme.css
   2. Dans theme.css, modifier cette règle, en copiant au besoin les fichiers appelés (images, polices…)
   3. Continuer de développer le thème dans ce répertoire
5. Lorsque le thème est fini, le stocker avec les autres :
   1. Créer un sous-répertoire /toto dans /themes
   2. Copier le contenu de /theme dans /themes/toto

Personnaliser encore davantage

Il y a parfois des variantes sur un thème donné, telles que des styles événementiels surchargeant temporairement un thème, que l’on confiera à une feuille dédiée, « skin.css ». Ou encore des variantes transverses, qui doivent s’appliquer quelque soit le thème, comme des couleurs de rubriques, que l’on isolera alors dans « color.css ».

Dans le cadre de thèmes distribués, non éditables, les personnalisations se feront dans une ultime feuille dédiée, « custom.css », où tout est permis.

Et voilà, tout est prévu, tout est possible !