Vader[FR] : ce n'est pas un blog, c'est un Sith

Thème ZenGarden Star Wars Empire Forces

Vader[FR] — 2014-07-11T16:52:51Z

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 habituellement 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. Dans le cas présent, le fond sombre tranche suffisamment avec les couleurs claires du texte pour se passer du cadre filtre.
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 est basé sur la persona pour Firefox du même nom par eugenioliveira

Une image de fond espace
exceptionnellement le bloc filtre n'a pas de couleur d'arrière plan et est complétement transparent
le texte du contenu est donc en orange, les liens principaux (navigation, entête, pied de page, fil d'Ariane) en jaune (sans être agressif), les liens standards en blanc, l'entête et le pied de page reprenant les couleurs de fond et de texte de la persona

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.


Thème ZenGarden Star-Wars Empire Forces


Icône mots-clés


Feuille de style commune (site vader-fr)

Thème ZenGarden Fedora 16 (Verne)

Vader[FR] — 2014-05-01T17:40:11Z

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 bureau Gnome 3 du système Linux Fedora 16.

Une image de fond marin avec sous-marin de type Nautilus, en référence à Jules Verne, 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.
exceptionnellement le bloc filtre n'a pas de couleur d'arrière plan et est complétement transparent
le texte du contenu est donc en blanc, l'entête et le pied de page reprenant les couleurs de fond et de texte de la barre d'outils de Gnome 3.

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.


Thème ZenGarden Fedora 16 (Verne)


Icône mots-clés


Feuille de style commune (site vader-fr)

Thème ZenGarden Pingouins de Madagascar

Vader[FR] — 2013-11-20T09:35:30Z

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.


Thème ZenGarden Pingouins de Madagascar


Icône mots-clés


Feuille de style commune (site vader-fr)

Thèmes ZenGarden Noël

Vader[FR] — 2013-11-20T09:22:18Z

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


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.

Thème ZenGarden ciel bleu

Vader[FR] — 2013-11-20T09:12:47Z

Basiquement, ce thème est une modification du thème que j'avais fait pour ce site.

Exceptionnellement, ce thème n'utilise pas de système de page à 3 couches. C'est un thème "simple".
En effet, l'image d'arrière plan, en blanc et bleu clair, contraste suffisamment avec les couleurs sombres (noir, violet, marron) du contenu et il n'est donc pas nécessaire d'atténuer l'arrière plan par un bloc filtre.

Graphiquement, ce thème se présente sous la forme d'un arrière plan ciel bleu avec quelques nuages, texte noir, liens et titres rouge bordeaux...sans oublier un ti zoziau à la place de la flèche pour déplier le cadre "dans la même rubrique".

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.
Par exemple, le thème ciel est valable 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.

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.

Le thème redéfinit 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.


Thème ZenGarden ciel bleu


Icône mots-clés


Feuille de style commune (site vader-fr)