UP dispose d'une feuille de style CSS qui définit des couleurs pour les fonds, les textes, les bordures.
Je trouve beaucoup d'avantages à cette méthode :
- plus besoin de mémoriser des codes
- uniformisation des couleurs pour toutes les utilisations sur un site
- possibilité de modifier à postériori une couleur
- utiliser une couleur au survol sans devoir créer une règle spécifique
Les couleurs proposées par UP ne vous conviennent pas tout à fait.
Aucun souci, il est facile de les adapter à votre gout. Il faudra conserver les noms proposés (qui existent en français et en anglais), mais est-ce un problème une couleur bleue sera toujours dans les bleus.
Depuis la version 2.5, il existe les couleurs primary et secondary qui définissent les couleurs principales du site.
La modification
Il existe dans le dossier plugins/content/up/assets/custom
un fichier _variables.scss
qui vous permet de saisir vos préférences.
- Il ne sera jamais écrasé lors d'une mise à jour de UP.
- Ce fichier, même vide, doit exister pour ne pas générer une erreur lors de la compilation SCSS.
Il existe également un fichier assets/custom/_variables.scss.dist
qui vous servira de modèle pour créer le vôtre.
Il contient les valeurs par défaut, mais pour faciliter la relecture, je vous conseille de copier uniquement les couleurs à modifier.
// VARIABLES WEBMASTER
// **********************
// ce fichier est un modèle pour créer un fichier _variables.scss spécifique au site
// Reprendre uniquement les variables modifiées. Cela évite de bloquer les mises à jours des autres.
// Ne pas modifier le nom des variables et de pas en créer de nouvelles
//== couleurs de base (utilisé par les fichiers SCSS, ...). On peut utiliser
// - le code hexadécimal de la couleur ou les fonctions rga, rgba
// - le nom d'une couleur nommée (red, navy, ...)
// - des fonctions scss (darken, lighten, ...)
$darkBlue : #001f3f; // bleuFonce
$blue : #01457F; // bleu
$lightBlue : #069; // bleuClair
$paleBlue : #BCE0FF; // bleuPale
$darkGreen : #006400; // vertFonce
$green : #46a546; // vert
$lightGreen : #98fb98; // vertClair
$darkRed : #8b0000; // rougeFonce
$red : #ff1111; // rouge
$lightRed : #f08080; // rougeClair
$pink : #f012be; // rose
$purple : #9400D3; // violet
$orange : #ff851b; // orange
$darkYellow : #ffc40d; // jauneFonce
$yellow : #ffee00; // jaune
$lightYellow : #ffffe0; // jauneClair
$tan : #E8DAC3; // beige
$brown : #a0522d; // brun
// -- les gris
$black : #000; // noir
$darkGrey : #333; // grisFonce
$grey : #888; // gris
$lightGrey : #bbb; // grisClair
$paleGrey : #eee; // grisPale
$white : #fff; // blanc
// -- la base
$primary : $blue; // c1
$secondary : $grey; // c2
//== les ombres
$shadow : 0 3px 2px rgba(0, 0, 0, 0.2);
$shadowMax : 0 5px 5px 0 rgba(0,0,0,0.25),0 2px 10px 0 rgba(0,0,0,0.16);
$shadow-bottom:0 10px 6px -6px rgba(0, 0, 0, .8); // pour action box
//== breakpoints pour mediaqueries
$breakpoint-s : 480px;
$breakpoint-m : 760px;
//== espaces et largeurs
// - espace : utilisé par ma1, pa2, ...
$up-space-0: 0;
$up-space-1: 10px;
$up-space-2: 24px;
$up-space-3: 36px;
// - largeurs : utilisé par border (b1, b2, ...)
$up-border-0: 0;
$up-border-1: 1px;
$up-border-2: 2px;
$up-border-3: 6px;
Le principe
Vous indiquez le nom anglais de la variable SCSS et sa valeur dans un des formats admis :
- hexadécimal (#rbg, #rrggbb)
- couleurs nommées (aqua, gray, navy, ...)
- rgb (rgb(255, 0, 0), rgb(100%, 0%, 0%))
- fonction SCSS si la variable utilisée est déjà déclarée (lighten, darken, ...)
La compilation
Une fois les modifications effectuées, il faut recompiler tous les fichiers SCSS de UP.
Le partiel _variables.scss
est également utilisé par les actions.
Je vous conseille de créer un article réservé au superadmin pour vous assister dans la mise au point des fichiers CSS. Voici un exemple :
{up color | info}
{up upscsscompiler | force | info}
Il est important que l'appel de l'action upscsscompiler soit en dernier. En effet, UP exécute les actions en commençant par la fin.
L'action color affiche une grille avec toutes les couleurs utilisées par le site avec leurs noms français et anglais ainsi que leurs valeurs.
- La bordure supérieure est toujours de la couleur définie à l'origine par UP. Cela vous permet de voir votre modification
- la couleur active sur le site
- La bordure inférieure est la couleur définie par votre template pour le nom anglais de la couleur.
black
#000
darkGrey
#333
grey
#888
lightGrey
#bbb
paleGrey
#ddd
white
#fff
darkBlue
#001f3f
blue
#01457F
lightBlue
#069
paleBlue
#BCE0FF
darkGreen
#006400
green
#46a546
lightGreen
#98fb98
brown
#a0522d
tan
#E8DAC3
darkRed
#8b0000
red
#ff1111
lightRed
#f08080
darkYellow
#ffc40d
yellow
#ffee00
lightYellow
#ffffe0
orange
#ff851b
pink
#f012be
purple
#9400D3
transparent
transparent
primary
#01457F
darkPrimary
#001f3f
palePrimary
#BCE0FF
secondary
#888
darkSecondary
#333
paleSecondary
#ddd
Exemple de rendu de l'action color | info
Ces 2 couleurs, à la mode bootstrap, sont utilisées pour définir les couleurs principales du site
Il faut lire les noms français c1 et c2 comme couleur-1 et couleur-2.
Créer de nouvelles couleurs
Si vous en éprouvez la nécessité, cela est possible à condition de respecter cette procédure dans votre fichier _variables.scss:
- choisir le nom anglais et français de votre nouvelle couleur
- $nomAnglais : #rgb;
- $nomFrancais : $nomAnglais;
- copier la totalité de la définition de la variable $colorlist dans le fichier assets/_variables.scss
- coller cette définition dans votre fichier _variables.scss
- insérer votre nouvelle couleur. exemple : ("nomFrancais", "nomAnglais", $nomAnglais)
Et pas que les couleurs !
Le fichiers _variables.scss ne sert pas uniquement pour les couleurs. Vous pouvez surcharger toutes les autres variables.
- les ombres
- la largeur des bordures
- l'espace pour les paddings et margins
- les points de rupture pour les médiaqueries