434 visites

Thèmes ZenGarden Noël

mercredi 20 novembre 2013

Version imprimable de cet article Version imprimable

Généralités

Deux thèmes sur Noël, avec pour chacun une variante.

Ces thèmes sont des thèmes Zengarden, mais ils sont "légers" et se basent 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.
Par exemple, les thèmes Noël sont valables pour le squelette Zpip-vad tout autant que le squelette Zpip-hpe, ce dernier ayant pourtant des blocs qui n’existent pas dans le précédent.

Ces thèmes utilisent 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.

Ces thèmes redéfinissent les couleurs de mise en évidence .caractencadre-spip et .caractencadre2-spip du plugin enluminures typographiques, car elles sont trop claires, cependant le css du plugin peut être chargé après celui du thème. Il faudra donc éditer le plugin afin d’enlever les couleurs, et déclarer les couleurs "par défaut" dans le css commun.

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.

Pack thèmes ZenGarden Noël -  7 Zip - 835.7 ko
Pack thèmes ZenGarden Noël

Feuille de style commune (site vader-fr) -  Cascading Style Sheet - 15 ko
Feuille de style commune (site vader-fr)

Thème Noël 1

  • Une image rouge et blanche avec un sapin sur des collines, quelques (gros) flocons de neiges et de la décoration sert d’arrière plan au site, dans le bloc bckg. Cette image est étendue aux dimensions du bloc (et donc de la page), ce qui peut éventuellement la déformer.
  • une image animée GIF, répétée, permet de faire tomber de la neige devant cet arrière plan. L’image animée a un fond transparent, et le bloc filtre peut donc avoir une couleur d’arrière plan, en l’occurrence rouge sombre avec une opacité élevée.
  • le texte du contenu est donc en blanc et or, le bloc "extra" des articles (articles de la même rubrique, mots-clés) étant rouge sur un fond couleur neige (snow), et les icônes habituelles sont remplacées par des icônes de Noël.

Une variante permet de ne pas avoir l’animation de la neige.

Thème Noël 2

  • Une image rouge et blanche avec un calendrier et de la décoration sert d’arrière plan au site, dans le bloc bckg. Cette image est étendue aux dimensions du bloc (et donc de la page), ce qui peut éventuellement la déformer.
  • une image animée GIF, répétée, permet de faire tomber de la neige devant cet arrière plan. L’image animée a un fond transparent, et le bloc filtre peut donc avoir une couleur d’arrière plan, en l’occurrence rouge sombre avec une opacité élevée.
  • le texte du contenu est donc en blanc et or, le bloc "extra" des articles (articles de la même rubrique, mots-clés) étant rouge sur un fond couleur neige (snow), et les icônes habituelles sont remplacées par des icônes de Noël.

Une variante permet de ne pas avoir l’animation de la neige.

Répondre à cet article

Total 151123 visites depuis 2508 jours | Site réalisé par Vader[FR] | SPIP | | Plan du site | Suivre la vie du site RSS 2.0 | contact mail