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 :

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

"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)

div h1.cadre.acces-direct {
  background-color: #CC0000;
  color:  #ffffff;
}
div.texte.acces-direct {
  background-color: #E63939;
  border-color: #CC0000;
  color:  #ffffff;
}
div.texte.acces-direct a{
  color:  #ffffff;
}

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) :

div h1.cadre.meme-rub {
  background-color: #CC0000;
  color:  #ffffff;
}
div.texte.meme-rub {
  background-color: #E63939;
  border-color: #CC0000;
  color:  #ffffff;
}
div.texte.meme-rub a{
  color:  #ffffff;
}

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 :

div.texte.evenements {
    background: none;
    border: none;
}

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

div.cadre-couleur .texte {
    background: none;
    border: none;
}

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

A vous de jouer !