Cette option est utile uniquement si vous utilisez la feuille de style de UP.
Elle permet d'utiliser le nom UP des couleurs comme argument d'une règle CSS.
L'action renvoyant uniquement un code couleur, elle ne peut être utilisée seule.
{up color=UP-COLOR-NAME}- color: nom UP de la couleur (français ou anglais) ou de la variable CSS (--red)
- default = #000: couleur retournée si nom couleur inexistant
- info: affiche la liste des couleurs avec leurs valeurs
un exemple simple
Une action div va servir de support pour la démonstration.
{up div | class=bg-darkRed t-yellow p2}
avec l'option <strong>class</strong>
{/up div}{up div | style=background-color:{up color=darkRed};color:{up color=yellow};padding:24px}
avec l'option <strong>style</strong>
{/up div}Le premier exemple utilise l'option class pour définir les couleurs de fond et du texte.
La feuille de style propose les classes bg-darkRed (bg-rougeFonce en français) et t-yellow (t-jaune) pour colorer notre pavé.
Le deuxième exemple, juste pour la démo, utilise l'option style pour définir les couleurs.
Une règle CSS n'acceptant pas les noms UP pour les couleurs, il est nécessaire d'utiliser l'action color pour le faire.
L'action color peut être utilisée directement dans une règle CSS inline, comme dans l'exemple ci-dessous.
Cette méthode n'est pas possible avec les éditeurs wysiwyg qui vont effacer cette formulation "exotique". Pour éviter cela, j'ai utilisé l'action bbcode
{up bbcode=[div style="border:3px dotted #ffee00; background-color:{up color=darkRed};color:{up color=yellow}; padding:24px"]
Avec du HTML et CSS direct
[/div]}Prise en charge des variables CSS
Depuis la version 2.5, UP déclare ses couleurs comme variables CSS. Cela permet de les utiliser directement dans une règle CSS.
sur fond jaune,
une bordure pleine rose
et des pointillés violet
{up div= bd2 bd-pink tc p2
| style=color:{up color=red};
outline:5px dotted var(--purple);
background-color:{up color=--YELLOW}
}
Un bloc avec du texte rouge, sur fond jaune, une bordure pleine rose et des pointillés violet
{/up div}Dans l'exemple ci-dessus, j'utilise toutes les méthodes pour colorer des éléments :
class= bd2 bd-pinkva créer la bordure rose de 2px avec les classes de UPstyle=color:#ff1111un style inline qui utilise l'action color pour récupérer le code de la couleur rouge pour le textestyle=outline:5px dotted var(--purple)la bordure externe est définie avec la méthode CSS classique qui utilise le nom de la variable couleurstyle=background-color:var(--yellow)pour la couleur de fond, on utilise la même méthode que pour outline, mais en utilisant l'action UP qui va retourner la syntaxe css attendue : var(--yellow). Les noms de variables css étant case-sensitive et généralement en minuscules, l'action color en tient compte.
Astuce : rendre prioritaire la feuille de style de UP
L'ordre de priorité des règles CSS dépend principalement de 2 facteurs :
- le poids de son sélecteur :
div.fooaura priorité sur.foo - pour un même poids, c'est la dernière règle chargée qui sera retenue.
Ne pouvant agir sur le premier point, il faut charger la feuille de UP le plus tard possible.
L'astuce consiste à charger up.css à l'aide d'un module en position debug. Pour cela, j'utilise le module LM-Custom version site.
- dans les paramètres du plugin up, je désactive le chargement de UP.CSS
- dans le module LM-Custom, publié en position debug, j'ajoute l'appel
plugins/content/up/assets/up.cssdans l'onglet CSS
En cas d'erreur
Non sensible minuscules/majuscules, le nom de la couleur doit toutefois exister !
En cas d'erreur, un message d'erreur sera affiché au début de l'article.
Par défaut, la couleur retournée sera le noir, mais il est possible de la choisir avec l'option default
Les couleurs UP
L'action color propose une aide pour visualiser les couleurs disponibles sur le site avec leurs noms en français et en anglais.
Il suffit d'ajouter l'option info, comme ceci {up color | info}.
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
Chaque pavé est composé :
❶ une bordure haute montre la couleur d'origine définie par UP
❷ la couleur de la partie centrale est celle qui est active. Celle que vous avez éventuellement modifiée. Y figure le nom en français, en anglais et sa valeur.
❸ une bordure basse indique qu'un autre plugin ou template prioritaire utilise le nom anglais comme nom de variable CSS (ex: --green). Le test est fait sur le nom anglais qui risque le plus de poser un conflit.
Note : c0, c1 et c2 sont les noms rapides pour color0=transparent, color1=primary et color2=secondary
Quelques explications techniques
Si vous êtes curieux, voici comment UP procède pour retrouver les codes couleurs dans la feuille de style up.css.
UP utilise le fichier assets/colorname.ini qui a été crée lors de la compilation CSS par l'action upscsscompiler.
Ce fichier contient la liste des couleurs utilisées (en majuscules) avec leur valeur. Il existe également une version avec les noms des couleurs tels que saisis dans les fichiers _variables.scss.
Important : l'action color ne fonctionne que si le fichier up.css est créé par l'action upscsscompiler.
upactionslist (1) flexbox (4) div (5) color (11) bbcode (1) icon (3) jcontent-info (1)