Aller au contenu

Les couleurs du site

Les couleurs du site ne se choisissent pas librement, écran par écran : elles viennent toutes d'une même palette, définie une fois pour toutes. Cette page explique ce principe et ses conséquences. Le détail de l'écran est dans Couleurs.

En une minute

  • La palette compte dix couleurs, rangées dans des emplacements numérotés de 1 à 10. Elle se règle dans Paramétrage > Couleurs.
  • Partout ailleurs (une activité, une page, une catégorie d'articles), on choisit l'une de ces couleurs dans une liste. On ne saisit jamais de code de couleur.
  • Le site retient le numéro de l'emplacement choisi, pas la couleur elle-même.

D'où la conséquence principale : changer une couleur de la palette la change partout à la fois. Si l'orange du centre devient un orange plus doux, toutes les activités, les pages et les blocs qui l'utilisent suivent, sans qu'il faille les reprendre un par un.

Qui peut modifier les couleurs

Les couleurs forment la charte graphique du site : seuls les administrateurs peuvent les modifier. Les éditeurs ouvrent le même écran en lecture seule, pour y copier les classes CSS des couleurs (voir ci-dessous).

Si une couleur vous semble devoir évoluer, adressez-vous à l'administrateur du site.

Où chaque couleur sert

Une couleur de la palette peut servir à quatre endroits.

Les activités. Chaque activité reçoit une couleur. Ses séances prennent cette couleur dans le calendrier public, dans les blocs « À venir » et sur la page de l'événement. Un événement peut, à titre exceptionnel, recevoir une couleur à lui (voir ci-dessous).

Les pages et les catégories d'articles. Une page peut recevoir sa propre couleur ; sinon, elle prend la couleur par défaut du site. De même pour une catégorie d'articles.

Les rôles. Certaines parties du site ont une couleur attitrée, choisie dans la palette :

Rôle Ce qu'il colore
Couleur par défaut La couleur dominante du site : en-tête, pied de page, menu, pages sans couleur propre.
Couleur des boutons du calendrier Les boutons de navigation du calendrier public.
Couleur des barres de défilement Les barres de défilement de la page et des bandeaux qui défilent.

Les sous-menus n'ont pas de couleur à eux : ils reprennent la couleur par défaut, un peu éclaircie. Ils restent donc accordés au menu quand celle-ci change.

Les blocs des pages Avada. Un bloc d'une page (une section, un texte, un titre…) peut prendre une couleur de la palette (voir ci-dessous).

Colorer un bloc d'une page

Dans les pages construites avec Avada, on colore un bloc en lui ajoutant une classe CSS : un petit mot-clé, collé dans le champ CSS Class des réglages du bloc. Chaque couleur de la palette a deux classes, à copier depuis l'écran Couleurs :

  • background-color- suivi du nom de la couleur, pour colorer le fond du bloc (background-color-orange) ;
  • text-color- suivi du nom de la couleur, pour colorer son texte (text-color-orange).

La classe text-white écrit le texte en blanc, sur un fond coloré.

La marche à suivre et des exemples sont dans Boutons Fond et Texte.

Le nom d'une couleur compte

Les classes sont fabriquées à partir du nom de la couleur. Si orange est renommé amber, la classe background-color-orange n'existe plus, et les blocs qui l'utilisaient perdent leur couleur. Changer la teinte d'un emplacement, en revanche, ne casse rien. Voir Nom.

Les exceptions

Deux réglages acceptent une couleur hors de la palette :

  • une page : « Couleur de la page » > « Choisir une autre couleur » ;
  • un événement : « Couleur personnalisée », quand il doit se distinguer de son activité.

Ces couleurs ne suivent pas les changements de la palette. Réservez-les aux vraies exceptions.

Quand le changement se voit

Dès qu'un administrateur enregistre une modification des couleurs, le cache du site est vidé : les visiteurs voient les nouvelles couleurs à leur visite suivante. Si votre propre navigateur montre encore les anciennes, rechargez la page avec Ctrl + F5 (sur Mac : Cmd + Maj + R).

Pour aller plus loin