Thème ZenGarden Pingouins de Madagascar

mercredi 20 novembre 2013 (), par Vader[FR]

Ce thème utilise un système de page à 3 couches (voir aussi ici).
En effet, 3 blocs de position et taille identiques sont déclarés : bckg, filtre et page
Ces 3 blocs s’étendent sur toute la page puisqu’ils sont positionnés (par commun.css) de manière absolute à une distance des bords égale à 0 , mais :

bckg a pour index Z = -2, il sera donc situé tout à l’arrière. Il sera utilisé pour mettre une image d’arrière plan.
filtre a pour index Z = -1, il sert de "filtre" grâce à une couleur de fond et une opacité variable qui vont "atténuer" les contrastes de couleur de l’arrière plan.
page a pour index Z = 0 (valeur par défaut), son fond est transparent, ses éléments opaques car n’étant pas affectés par l’opacité variable du bloc filtre.

Ce thème est un thème Zengarden, mais il est "léger" et se base sur une feuille de style commune.

Le principe de "mes" thèmes est en fait très simple :

une feuille de style commune gère le positionnement et la taille des éléments, qui sont globalement communs à tous les thèmes.
- commun.css est à la racine des thèmes, donc dans le répertoire themes du site
- ce fichier est inclut par celui du thème grâce à l’instruction @import url("../commun.css");
la feuille de style du thème se contente de modifier les couleurs, les images, éventuellement la police, la taille et la "décoration" des textes
- le thème n’a donc pas besoin de déclarer toutes les propriétés, ce qui rend sa conception et sa maintenance plus simples.
- si besoin est, le thème peut remplacer les propriétés définies dans la feuille commune.

Ce système permet une plus grande compatibilité des thèmes avec différents sites et donc différents squelettes Zpip.

Graphiquement, ce thème se présente sous la forme d’un arrière plan avec le commando sur fond blanc, texte noir et orange.

Une image avec le commando sur fond blanc sert d’arrière plan au site, dans le bloc bckg. Cette image est centrée dans le bloc et complétée par une couleur d’arrière plan de la même couleur que le fond de l’image.
le bloc filtre a une couleur d’arrière plan, en l’occurrence blanc, avec une opacité élevée.
le texte du contenu est donc en noir et orange/marron, ou plus précisément de la couleur du bec pour l’entête, de la couleur des pattes pour le pied de page et de la couleur du dos pour le texte.

L’icône du bloc dépliant "zone_tags" contenant la liste des tags liés à l’article est celle "par défaut" indiquée dans le css commun, et située à la racine des thèmes.

le bloc "logo" étant défini dans mon squelette Zpip, il ne l’est pas dans les thèmes, pour des raisons d’unicité de l’identifiant du div.