Bandeau

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon... et de qui veut.

Un graphisme en fonction des saisons
Article mis en ligne le 27 juillet 2022
dernière modification le 20 septembre 2022

par Jean Christophe Villeneuve

À la demande de Spipfactory, je me suis amusé à jouer avec les saisons.

Le but est de pouvoir avoir un 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.

Voyons cela de plus près :

Le bandeau

Là, c’est simple.
Si votre dossier /squelettes/images/bandeau contient des images appelées

  • hiver.jpg ou hiver.png
  • printemps.jpg ou printemps.png
  • été.jpg ou été.png (bien mettre les accents à "été")
  • automne.jpg ou automne.png
    ces images s’afficheront automatiquement à la saison correspondante.

Les couleurs

Là c’est un peu plus compliqué.

On va d’abord 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 et on définit des constantes pour la saison (j’ai mis des couleurs au hasard). Ce qui nous permettra par la suite d’utiliser ces constantes.

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 :

On peut faire ça pour autre chose que des couleurs.

Le pointeur

Plus gadget mais amusant, on peut jouer avec le pointeur de souris. Par exemple, une hirondelle au printemps, un soleil en été, une feuille en automne, un flocon en hiver.

Pour cela, il suffit de mettre vos pointeurs dans /squelettes/images/pointeurs. Ces pointeurs doivent s’appeler

  • printemps.cur
  • été.cur
  • automne.cur
  • hiver.cur

pour le pointeur par défaut et

  • printempsa.cur
  • étéa.cur
  • automnea.cur
  • hivera.cur

pour le pointeur de liens.

Ces images

  • peuvent aussi être au format .ani (pointeurs animés)
  • ne doivent pas dépasser 32x32 px.

A vous de jouer !


Plan du site Contact Mentions légales Données personnelles et cookies Espace privé squelette RSS

2009-2024 © Escal - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 5.1.4