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.

Utilisé à ce jour dans 449 sites
logo article ou rubrique
Les cadres de couleur
Article mis en ligne le 4 février 2009
dernière modification le 15 janvier 2019

par Jean Christophe Villeneuve

Les cadres de couleur qui sont sur les côtés, que ce soit dans la page sommaire, rubrique, article ou autre, sont aisément modifiables. Vous pouvez donc modifier ces pages à votre convenance très rapidement.

Tous ces cadres sont appelés de la même manière :

  1. <div class="cadre-couleur">
  2. <INCLURE {fond=inclusions/inc-fichier}>
  3. </div>

Télécharger

"fichier" correspondant au nom de la noisette appelée.

 Modifier leur position

Il suffit d’aller sur la page de configuration d’Escal et de choisir les noisettes qu’on garde et de les afficher où on veut et dans l’ordre souhaité.

 Modifier leur couleur

Une page de configuration dans l’espace privé permet de changer la couleur des noisettes (une seule couleur pour toutes les noisettes) .

Néanmoins, on peut changer l’aspect de chaque bloc individuellement en définissant ses propriétés CSS dans le fichier perso.css qui doit être placé dans le dossier /squelettes/styles.

Exemple : modifier l’aspect du bloc "Accès direct (inc-acces_direct)

  1. div h1.cadre.acces-direct {
  2.   background-color: #CC0000;
  3.   color:  #ffffff;
  4. }
  5. div.texte.acces-direct {
  6.   background-color: #E63939;
  7.   border-color: #CC0000;
  8.   color:  #ffffff;
  9. }
  10. div.texte.acces-direct a{
  11.   color:  #ffffff;
  12. }

Télécharger

affichera un bloc rouge avec un texte blanc, même pour les liens.

A noter que les sélecteurs css correspondent au nom de la noisette concernée mais attention, en cas de nom composé, c’est bien le tiret du 6 qu’il faut employer, pas l’underscore (tiret du 8), comme pour cet exemple avec acces-direct.

Un autre exemple pour être plus clair avec le bloc "Dans la même rubrique" de la page article (inc-meme_rub) :

  1. div h1.cadre.meme-rub {
  2.   background-color: #CC0000;
  3.   color:  #ffffff;
  4. }
  5. div.texte.meme-rub {
  6.   background-color: #E63939;
  7.   border-color: #CC0000;
  8.   color:  #ffffff;
  9. }
  10. div.texte.meme-rub a{
  11.   color:  #ffffff;
  12. }

Télécharger

 Supprimer bord et fond

On peut choisir la même couleur que le fond qui se trouve en-dessous ou rajouter dans perso.css le code suivant :

  1. div.texte.evenements {
  2.     background: none;
  3.     border: none;
  4. }

Télécharger

pour enlever le fond et les bords du texte de la noisette "Évènements" ou

  1. div.cadre-couleur .texte {
  2.     background: none;
  3.     border: none;
  4. }

Télécharger

pour enlever le fond et les bords de toutes les noisettes.

A vous de jouer !

qrcode:http://escal.ac-lyon.fr/spip/spip.php?article15

Plan du site Contact Mentions légales Espace rédacteurs squelette RSS

2009-2019 © Escal V4 - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 4.3.7