frendeitpt

Personnaliser les couleurs de UP

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, ...)
Attention : le nom de la variable ne doit pas être modifié

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.

1 - La bordure supérieure est toujours de la couleur définie à l'origine par UP. Cela vous permet de voir votre modification

2 - la couleur active sur le site

3 - La bordure inférieure est la couleur définie par votre template pour le nom anglais de la couleur.

noir
black
#000
grisFonce
darkGrey
#333
gris
grey
#888
grisClair
lightGrey
#bbb
grisPale
paleGrey
#eee
blanc
white
#fff
bleuFonce
darkBlue
#001f3f
bleu
blue
#01457F
bleuClair
lightBlue
#069
bleuPale
paleBlue
#BCE0FF
vertFonce
darkGreen
#006400
vert
green
#46a546
vertClair
lightGreen
#98fb98
brun
brown
#a0522d
beige
tan
#E8DAC3
rougeFonce
darkRed
#8b0000
rouge
red
#ff1111
rougeClair
lightRed
#f08080
jauneFonce
darkYellow
#ffc40d
jaune
yellow
#ffee00
jauneClair
lightYellow
#ffffe0
orange
orange
#ff851b
rose
pink
#f012be
violet
purple
#9400D3
c0
transparent
transparent
c1
primary
#01457F
c2
secondary
#888

Exemple de rendu de l'action color | info

Une des premières modifications à réaliser est la mise à jour des couleurs $primary et $secondary
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:

  1. choisir le nom anglais et français de votre nouvelle couleur
  2. $nomAnglais : #rgb;
  3. $nomFrancais : $nomAnglais;
  4. copier la totalité de la définition de la variable $colorlist dans le fichier assets/_variables.scss
  5. coller cette définition dans votre fichier _variables.scss
  6. 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
Dans la terminologie SCSS, un partiel est un fichier commençant par un underscore. Il est importé par le fichier principal