Objectif :
look différent selon les saisons. Cela peut être un simple bandeau différent mais aussi un jeu de couleur différent, voire même un pointeur de souris différent.
etc...
Rappel :
Les saisons sont définies comme suit :
du 21-03 au 20-06 : printemps
du 21-06 au 20-09 : été
du 21-09 au 20-12 : automne
du 21-12 au 20-03 : hiver
l’ésotérique filtre |saison
de SPIP permet cela, quelques modifications dans le squelette "Escal et le tour est joué.
il est utilisé dans :
Toujours sous la forme
Et ensuite, on utilise
Comment pratique t’on ?
les couleurs
il faut créer un fichier saison.css.html à la racine du dossier /squelettes.
Dans ce fichier, on va d’abord définir un cache et un header
Puis on récupère le nom de la saison :
Ensuite, on teste si la saison est le printemps, été, automne, hiver et on définit des constantes pour la saison.
Ce qui nous permettra par la suite d’utiliser ces constantes.
Exemple de constante : pour la saison "printemps
Et bien sûr, on fait pareil pour les 3 autres saisons.
Enfin, il n’y a plus qu’à écrire les règles css que l’on veut modifer en utilisant ces constantes. Ainsi, on n’écrit qu’une seule fois les règles css.
Exemple pour modifier la couleur de fond du site :
A savoir que toutes les couleurs d’Escal sont définies dans le fichier config.css.html entre les lignes 492 et 741.
En résumé, Escal utilise 12 couleurs par défaut :

Le bandeau
le dossier /squelettes/images/bandeau doit contenir des images appelées par le nom de la saison (hiver ; printemps ; été ; automne) (bien mettre les accents à "été"), ces images s’afficheront automatiquement à la saison correspondante.
les format d’images suivant sont prise en charge (.jpg .png .webp)
Attention
pour que votre bandeau soit prie en compte, dans la configuration d’Escal cocher :
- Option 3 : affichage d’un bandeau personnalisé
Le pointeur de souris
il suffit de mettre vos pour le pointeur par défaut dans /squelettes/images/pointeurs. Ces pointeurs doivent s’appeler
- printemps.cur
- été.cur
- automne.cur
- hiver.cur
et pour le pointeur de liens
- printempsa.cur
- étéa.cur
- automnea.cur
- hivera.cur
Ces images
- peuvent aussi être au format .ani (pointeurs animés)
- ne doivent pas dépasser 32x32 px.
plugin don
- Ajouté le code suivant a saison.css.html
#badge_don a {
background-image: [url("(#CHEMIN{images/dons/badge_#GET{saison}.webp})")] !important;
}
- changer le badge au survol
#badge_don a:hover { background-image: [url("(#CHEMIN{images/dons/badge_#GET{saison}_survol.webp})")] !important; }
page login
- Copier le fichier login.html de spip dans /squelettes
Dans cette copie rajouter la ligne suivante après la ligne 16
[<link href="(#URL_PAGE{saison.css}|direction_css|timestamp)" rel="stylesheet" type="text/css" />]
- Ajouter le code suivant à /squelettes/saison.css.html
.page_login { background-image: [url("(#CHEMIN{images/fonds/login_#GET{saison}.webp})")] ; background-repeat:no-repeat; background-attachment:fixed; background-position: top center; -webkit-background-size: cover; /* pour Chrome et Safari */ -moz-background-size: cover; /* pour Firefox */ -o-background-size: cover; /* pour Opera */ background-size: cover; /* version standardisée */ }
ou
.page_login.sans_fond { background-image: [url("(#CHEMIN{images/fonds/login_#GET{saison}.webp})")] ; background-repeat:no-repeat; background-attachment:fixed; background-position: top center; -webkit-background-size: cover; /* pour Chrome et Safari */ -moz-background-size: cover; /* pour Firefox */ -o-background-size: cover; /* pour Opera */ background-size: cover; /* version standardisée */ }
selon que vous ayez déjà défini une image d’arrière-plan pour la page login ou pas dans la partie privée de Spip
- Ajouter les images
- login_printemps.webp
- login_été.webp
- login_automne.webp
- login_hiver.webp
dans /squelettes/images/fonds
SpipFactory remercie Pauline Andriant pour la réalisation de la charte graphique.
![]() ![]() ![]() ![]() |
![]() ![]() Le fond automne pour les saisons ![]() ![]() |
- fichier saison.css.html de spipfactory
Bien entendu, On est allez encore plus loin ; faire varier la CSS en fonction de l’heure de la journée
#SET{heure,#DATE|heures}
/* nuit */
[(#GET{heure}|>={23}|oui)
[(#GET{heure}|<{5}|oui)
#conteneur, #pied {background-color: rgba(0, 0, 0, 1) !important;}
]]
/* aube */
[(#GET{heure}|>={5}|oui)
[(#GET{heure}|<{6}|oui)
#conteneur, #pied {background-color: rgba(0, 0, 0, 0.7) !important;}
]]
/* matin */
[(#GET{heure}|>={6}|oui)
[(#GET{heure}|<{9}|oui)
#conteneur, #pied {background-color: rgba(0, 0, 0, 0.4) !important;}
]]
/* jour */
[(#GET{heure}|>={9}|oui)
[(#GET{heure}|<{15}|oui)
#conteneur, #pied {background-color: rgba(0, 0, 0, 0) !important;}
]]
/* apres-midi */
[(#GET{heure}|>={15}|oui)
[(#GET{heure}|<{20}|oui)
#conteneur, #pied {background-color: rgba(0, 0, 0, 0.2) !important;}
]]
/* soir */
[(#GET{heure}|>={20}|oui)
[(#GET{heure}|<{23}|oui)
#conteneur, #pied {background-color: rgba(0, 0, 0, 0.6) !important;}
]]
et puis il n’y a pas que les saisons, on peu aussi vouloir une CSS pour notre site a un momment précis (Haloween par exemple)
#SET{jour,#DATE|affdate{'md'}}
/* pour la journée du 07 mars */
[(#GET{jour}|=={0307}|oui
règles css qu'on veut
]
/* du 07 au 14 mars */
[(#GET{jour}|>={0307}|oui)
[(#GET{jour}|<{0314}|oui)
règles css qu'on veut
]]
Amusez vous !!!