Bandeau
SpipFactory
.fr .com .org

C’est une plateforme d’hébergement autogéré en association de loi 1901
Propulsée par la mutualisation de Spip sous Habillage Escal

Escal change de couleurs au fil des saisons.
Article mis en ligne le 14 octobre 2022
dernière modification le 26 août 2024

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 :

  • saison.css.html [1]
  • config.saison.html
  • /inclusions/inc-head.html
  • /inclusions/inc-bandeau.html [2]

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.

police
logo
image de fond
ete.webp
ete.webp - - 16.7 kio

automne.webp
automne.webp - - 10.6 kio

hiver.webp
hiver.webp - - 15.7 kio

printemps.webp
printemps.webp - - 7.4 kio

ete-2.webp
ete-2.webp - - 19.1 kio

Fond Automne
Fond Automne - - 110.3 kio

Le fond automne pour les saisons

hiver-2.webp
hiver-2.webp - - 29.7 kio

printemps-2.webp
printemps-2.webp - - 26.3 kio

choix des couleurs

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 !!!


« Il n’y a pas de problème, il n’y a que des solutions sur SpipFactory »
Plan du site Contact Mentions légales

2017-2025 © SpipFactory - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 5.2.12
Hébergeur : SpipFactory
Soutenir par un don