Gérer les couleurs du site publié le 08/02/2019 - mis à jour le 01/03/2019
Les sites SPIP de l’académie de Poitiers ont dans l’espace privé une page dédiée à la gestion des couleurs du site.
Les webmestres sont ainsi libres de de choisir en toute autonomie les couleurs qu’ils souhaitent appliquer à leur espace.
Au moment de la validation des couleurs retenues, une vérification automatique est faite afin de s’assurer de l’accessibilité des couleurs choisies (contraste) et apporte si nécessaire une modification de la teinte pour respecter cette contrainte inhérente à tous les sites institutionnels.
Présentation de la page de configuration
Pour accéder à la page de configuration des couleurs, rendez-vous dans le menu Configuration -> Couleurs du site
Les chiffres dans le tableau correspondent
au ratio du contraste entre la police et le fond.
Le chiffre sur fond rouge indique que le contraste est insuffisant...
La page affichée se présente sous la forme suivante :
- Mémorisations des palettes
- Modifier les couleurs
- Palette de couleurs en cours sur le site
Le site peut se décliner en 4 couleurs différentes avec selon les emplacements des déclinaisons selon leur emplacement (fond de couleur plus pâle etc.) :
- Couleur principale :
cette couleur intervient sur les zones telles que :- le menu horizontal,
- le bas de page,
- les sections des articles,
- les liens,
- fond de page et de pagination
- Couleur complémentaire :
cette couleur intervient sur les zones telles que :- Blocs des titres des widgets,
- liens survolés,
- contour des icônes,
- dates,
- intertitres des articles
- tableaux,
- code,
- pagination (page en cours)
- Couleur secondaire :
cette couleur intervient sur les zones telles que :- champ de saisie de la recherche
- fil d’ariane de la page d’accueil
- poésie
- Couleur secondaire complémentaire :
cette couleur intervient sur les zones telles que : - modifier une ou plusieurs couleur.s dans la palette en cours ;
- créer une nouvelle palette.
Modifier une ou plusieurs couleur.s
- cliquer sur le lien "Changer les couleurs manuellement" ;
- cliquer sur la couleur de la zone que vous souhaitez modifier ;
- dans la fenêtre nouvellement apparue, vous pouvez :
- choisir une couleur de base,
- ou saisir les valeurs prélevée de la couleur retenue (valeurs Rouge, Vert et Bleu)
Pour vous aider à capturer vos couleurs et obtenir les valeurs associées, vous pouvez utiliser Colorpix, petit gratuitiel, sans installation. - glisser le curseur pour ajuster cette couleur
- déplacer le curseur pour éclaircir ou foncer cette couleur
- avoir un aperçu de la nouvelle couleur obtenue
- Valider les couleurs retenues
- Appliquer les couleurs retenues sur le site en cliquant sur le bouton "Valider cette palette" situé sous le tableau récapitulant les couleurs.
Assortir les couleurs à partir d’une couleur principale
Vous pourrez utiliser l’outil en ligne Paletton.
- Prélever à l’aide de Colorpix (voir précédemment) le code héxadécimal de la couleur retenue
- saisir ce code dans le champ "Base RGB" de Paletton
- cliquer sur "EXAMPLES" pour obtenir un aperçu de ces couleurs appliquées dans une page de site
- prélever les 3 autres couleurs choisies (toujours avec Colorpix) parmi les propositions de Paletton
- cliquer sur le lien "Changer les couleurs manuellement"
- appliquer ces couleurs sur les zones choisies
- valider votre choix et la nouvelle palette pour l’appliquer sur le site
Mémorisation des palettes
Au gré de vos essais ou de vos hésitations, il est parfois utile de conserver en mémoire les différentes palettes retenues.
Ainsi, il est possible de sauvegarder/restaurer des palettes dans l’espace mémoire de la page de configuration des couleurs.
Dans cet espace mémoire, vous pouvez :
- voir la palette en cours ;
- sauvegarder la palette en cours dans la zone mémoire choisie ;
- restaurer une palette en mémoire ;
- supprimer une palette de la mémoire.