Couleurs¶

Où : menu Paramétrage > Couleurs. Qui : les administrateurs modifient les couleurs ; les éditeurs les consultent et copient leurs classes CSS.

C'est ici qu'on définit les couleurs de charte du site, une fois pour toutes. Aucun autre écran ne permet de saisir une couleur librement : les activités, les événements, les pages et les catégories d'articles choisissent l'une des couleurs définies ici.

L'intérêt : modifier une couleur sur cet écran la modifie partout à la fois. Si l'orange du site devient un orange plus doux, toutes les activités, pages et encarts qui l'utilisent changent d'un coup, sans avoir à les reprendre un par un.

Pourquoi seuls les administrateurs peuvent modifier les couleurs

Ces couleurs forment la charte graphique du site. Elles ont été pensées avec soin en amont, pour s'accorder entre elles et donner au site son identité. Comme en changer une modifie l'apparence de tout le site d'un coup, seuls les administrateurs peuvent les modifier.

Les éditeurs voient le même écran en lecture seule, pour y copier les classes CSS des couleurs (voir Ce que voient les éditeurs). Si une couleur vous semble devoir évoluer, adressez-vous à l'administrateur du site.

1 Palette : les couleurs du site. 2 Rôles des couleurs : quelle couleur de la palette colore quelle partie du site. 3 Couleur des sous-menus : calculée à partir de la couleur par défaut. 4 Classes CSS françaises : réglage de compatibilité pour les anciens sites. 5 Enregistrer les modifications : rien n'est pris en compte avant ce clic.

Comprendre en une minute¶

flowchart LR
    P["Palette<br>10 couleurs"] --> A[Activités]
    P --> E[Événements]
    P --> G[Pages]
    P --> C[Catégories d'articles]
    P --> R["Rôles<br>en-tête, pied de page,<br>menu, agenda…"]
    P --> K["Classes CSS<br>blocs des pages Avada"]

La palette compte 10 emplacements, numérotés de 1 à 10. Chacun reçoit une couleur et un nom.
Partout ailleurs, on choisit un emplacement dans une liste déroulante, où chaque couleur apparaît avec son numéro et son nom (par exemple 2 · orange-light).
Le site retient le numéro de l'emplacement, pas la couleur elle-même. C'est pourquoi changer la couleur d'un emplacement se répercute partout.

Ce que voient les éditeurs¶

Un éditeur ouvre le même écran, en lecture seule :

un message rappelle que les couleurs font partie de la charte graphique ;
chaque couleur utilisée apparaît avec son numéro, son nom, un aperçu et son code, suivis des boutons Fond et Texte pour copier sa classe CSS ;
le bouton de copie de Texte blanc reste disponible ;
les rôles et la couleur des sous-menus sont affichés, sans pouvoir être changés ;
il n'y a pas de bouton Enregistrer les modifications.

Le reste de cette page décrit l'écran tel que le voient les administrateurs.

La palette¶

1 Numéro de l'emplacement. 2 Nom. 3 Couleur. 4 Boutons de copie des classes CSS.

Un emplacement sans couleur n'est pas utilisé : il n'apparaît dans aucune liste de choix. Vous n'êtes pas obligé de remplir les dix.

Numéro¶

Le numéro ne change jamais. C'est lui que retiennent les activités, les pages et les autres réglages : vous pouvez donc modifier la couleur ou le nom d'un emplacement sans qu'ils perdent leur réglage.

Nom¶

Le nom sert à fabriquer les classes CSS de la couleur (voir Boutons Fond et Texte) et l'identifie dans les listes de choix.

Écrivez-le en anglais : c'est l'usage en CSS, et les classes du plugin le sont elles aussi (background-color-…, text-color-…). Par exemple orange, orange-light, dark-blue.
Utilisez des minuscules, des chiffres et des tirets, sans accent ni espace. Un nom saisi autrement est converti à l'enregistrement (« Dark Blue » devient dark-blue).
Laissé vide, le nom est remplacé par le numéro de l'emplacement.
Deux emplacements ne peuvent pas porter le même nom.
Certains noms sont réservés par le plugin et refusés : page, page-light, page-clair, default, defaut.
Évitez de reprendre l'identifiant d'une catégorie d'articles (son « slug », visible dans Articles > Catégories) : les deux se contrediraient. Un message vous prévient si c'est le cas.

Conseil : nommez chaque couleur d'après sa teinte

orange, blue, green… et ajoutez -light pour sa version claire : orange-light. Si la charte évolue un jour vers un orange légèrement différent, changez la couleur, pas le nom.

Renommer une couleur casse les pages qui l'utilisent

Si orange devient amber, la classe background-color-orange n'existe plus, et les blocs des pages qui l'utilisaient perdent leur couleur. Le renommage est mémorisé : l'écran Outils > Migration des couleurs du site propose ensuite de mettre toutes ces pages à jour. Ne renommez une couleur qu'en cas de réelle nécessité.

Couleur¶

Cliquez sur le bouton Sélectionner une couleur pour ouvrir le sélecteur.

1 Choisissez la couleur dans le carré. 2 Ajustez sa nuance, plus claire ou plus foncée, avec la barre de droite. 3 Ou collez le code de la couleur fourni par la charte graphique : un # suivi de six caractères, par exemple #e67e22. 4 Effacer vide l'emplacement.

Ne videz pas un emplacement encore utilisé

Tout ce qui utilisait cette couleur la perd, mais pas de la même façon :

les pages et les rôles reprennent la couleur par défaut ;
les blocs colorés avec ses boutons Fond ou Texte ne sont plus colorés ;
les activités gardent leur ancienne couleur dans l'agenda et les encarts « à venir », mais leur choix de couleur apparaît vide dans leur écran : il faudra leur en choisir une autre à la prochaine modification.

Avant de vider un emplacement, choisissez une autre couleur partout où il est utilisé.

Boutons Fond et Texte¶

Ces boutons servent à colorer un bloc dans une page construite avec Avada (conteneur, colonne, bloc de texte, titre…). Ils n'apparaissent que sur les emplacements qui ont une couleur.

Ils copient une classe CSS : un petit mot-clé qu'on ajoute à un bloc pour changer son apparence, ici pour lui donner une couleur de la palette.

Cliquez sur Fond pour colorer le fond du bloc, ou sur Texte pour colorer son texte. La classe est copiée : le bouton affiche ✓ pendant une seconde.
Dans le constructeur Avada, ouvrez les réglages du bloc à colorer, onglet Général. Par exemple un conteneur (Container), c'est-à-dire une section de la page, pour colorer son arrière-plan ; ou un bloc de texte (Text Block), pour colorer son texte.
Collez la classe dans le champ CSS Class, puis enregistrez la page. Pour en mettre plusieurs, séparez-les par un espace.

Bouton	Classe copiée	Effet
Fond	`background-color-orange`	fond du bloc à la couleur `orange`
Texte	`text-color-orange`	texte du bloc à la couleur `orange`

Écrire en blanc. Sur un fond coloré, ajoutez la classe text-white : tout le texte du bloc passe en blanc. Elle ne fait pas partie de la palette (ce n'est pas une couleur au choix, juste « blanc ») : elle a son propre bouton de copie, juste sous la palette — voir Texte blanc.

Éclaircir un fond. Ajoutez une seconde classe, séparée par un espace : background-opacity-XX, où XX est un pourcentage. Par exemple, background-color-orange background-opacity-40 donne un fond orange à 40 %.

Exemples

Bloc Avada	Dans le champ CSS Class	Résultat
Conteneur (une section de la page)	`background-color-blue text-white`	section sur fond bleu, texte en blanc
Conteneur	`background-color-orange background-opacity-20`	section sur fond orange très clair
Bloc de texte	`text-color-orange`	texte en orange

Anciens noms

Sur les sites plus anciens, vous croiserez peut-être texte-blanc dans des pages : c'est l'ancien nom de text-white, il fonctionne toujours. Pour une nouvelle page, utilisez text-white.

Nouveau nom pas encore enregistré

Si vous venez de saisir ou de modifier un nom, les boutons copient déjà la nouvelle classe, mais celle-ci ne fonctionnera sur le site qu'après Enregistrer les modifications.

Texte blanc¶

Juste sous la palette, un bouton Copier donne accès à la classe text-white : elle passe le texte d'un bloc en blanc, pour écrire sur un fond coloré. Comme les boutons Fond et Texte, il suffit de cliquer, puis de coller la classe dans le champ CSS Class du bloc dans Avada (voir Boutons Fond et Texte).

Ce champ est purement pratique : text-white ne fait pas partie de la palette et ne s'enregistre pas, le bouton fonctionne donc aussi bien pour les administrateurs que pour les éditeurs.

Les rôles des couleurs¶

Un rôle attribue une couleur de la palette à une partie précise du site. Chaque liste ne propose que les emplacements qui ont une couleur, et prend la couleur de l'option choisie.

1 Couleur par défaut. 2 Couleur des boutons du calendrier. 3 Couleur des barres de défilement. 4 Couleur des sous-menus. 5 Classes CSS françaises.

Couleur par défaut¶

La couleur principale du site : c'est elle qui détermine sa couleur dominante. Elle colore :

l'en-tête et le pied de page de toutes les pages ;
le menu du site (le menu coulissant) ;
les pages qui n'ont pas de couleur propre (réglage « Couleur de la page » de chaque page) ;
les boutons des formulaires et plusieurs éléments de mise en page ;
les encarts « à venir » et les pages événement, quand l'activité n'a pas de couleur.

Elle a aussi ses boutons Fond et Texte, qui copient background-color-default et text-color-default : un bloc coloré ainsi suivra la couleur par défaut même si vous la changez un jour.

Couleur des boutons du calendrier¶

Les boutons de navigation de l'agenda : période précédente, période suivante et retour à la période en cours. Au survol, un bouton s'éclaircit ; au clic, il fonce. Le bouton de retour reste plus clair tant qu'on est déjà sur la période en cours.

Son libellé suit ce qui est affiché : « aujourd'hui » sur la vue par mois, « cette semaine » sur la vue par semaine — celle des téléphones.

Couleur des barres de défilement¶

La partie mobile des barres de défilement : celle de la page, et celles des bandeaux qui défilent horizontalement (événements à venir, portraits des enseignants).

Note

Firefox n'applique pas cette couleur et garde ses barres de défilement habituelles.

Couleur des sous-menus¶

Les sous-menus du menu coulissant n'ont pas de couleur à eux : ils reprennent la couleur par défaut, éclaircie du nombre de points de luminosité indiqué. Menu et sous-menus restent ainsi accordés, même quand la couleur par défaut change.

L'aperçu montre la couleur du menu (en haut) et celle des sous-menus (en bas), telles qu'enregistrées.
0 : les sous-menus ont exactement la couleur du menu, on ne les distingue plus.
8 (valeur par défaut) : un écart discret mais visible.
100 : les sous-menus deviennent blancs.

La teinte est conservée : le résultat est la même couleur en plus clair, pas une couleur délavée.

À gauche, le menu, à la couleur par défaut. À droite, un sous-menu, éclairci.

Classes CSS françaises¶

Avant le passage du plugin à l'anglais, les classes de couleur portaient des noms français : fond-couleur-…, texte-couleur-…, fond-opacite-….

Réglage technique

Ne le modifiez qu'avec l'accord du webmestre du site.

Laissez la case cochée si des pages de votre site utilisent encore ces classes. L'écran Outils > Migration des couleurs du site liste toutes les classes trouvées dans les pages.
Décochez-la sur un site neuf, ou une fois toutes les pages passées aux classes anglaises : chaque page du site sera un peu plus légère.

Enregistrer¶

Réservé aux administrateurs. Cliquez sur Enregistrer les modifications en bas de l'écran. Le message « Réglages enregistrés » confirme l'opération.

Un message d'avertissement peut s'afficher en haut de l'écran :

Message	Ce qui s'est passé
« le nom … est réservé par le plugin »	Le nom a été remplacé par le numéro de l'emplacement. Choisissez un autre nom.
« le nom … est déjà utilisé par la couleur … »	Deux emplacements portaient le même nom : le second a reçu son numéro à la place.
« … est aussi le slug d'une catégorie d'articles »	Le nom est accepté, mais risque d'entrer en conflit avec la couleur de cette catégorie. Choisissez un autre nom.

Dès qu'une couleur change, le cache du site est vidé automatiquement : les visiteurs voient les nouvelles couleurs à leur prochaine visite.

Questions fréquentes¶

J'ai changé une couleur, mais le site n'a pas changé. Vérifiez que vous avez bien cliqué sur Enregistrer les modifications, puis rechargez la page du site avec Ctrl + F5 (sur Mac : Cmd + Maj + R) : votre navigateur gardait peut-être l'ancienne version.

Un bloc d'une page a perdu sa couleur de fond. Sa classe CSS ne correspond plus à aucune couleur : emplacement renommé ou vidé, ou ancienne classe d'activité (les activités ne produisent plus de classes). L'écran Outils > Migration des couleurs du site repère ces classes et les remplace.

La couleur que je cherche n'apparaît pas dans la liste d'une activité ou d'une page. L'emplacement n'a pas de couleur dans la palette. Remplissez-le ici, puis enregistrez.

Je ne peux pas modifier les couleurs. C'est normal si vous êtes éditeur : les couleurs font partie de la charte graphique, et seuls les administrateurs peuvent les changer. Vous pouvez toujours copier leurs classes CSS avec les boutons Fond et Texte.

Puis-je ajouter une onzième couleur ? Non, la palette compte toujours dix emplacements.

Puis-je utiliser une couleur hors de la palette ? Seulement dans deux cas : une page (« Couleur de la page » > « Choisir une autre couleur ») et un événement (« Couleur personnalisée »). Réservez-le aux exceptions : ces couleurs ne suivront pas les changements de la palette.

Où ces couleurs sont choisies¶

Écran	Réglage
Une activité	Couleur de l'activité dans l'agenda et sur les pages de cours et d'événements
Un événement	Couleur de remplacement, seulement si elle doit différer de celle de l'activité
Une page	Couleur de la page, dans l'encadré à droite de l'écran de modification
Une catégorie d'articles	Couleur de la catégorie

Pour la logique d'ensemble, voir Les couleurs du site.