Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Deprecated: locale_accept_from_http(): Passing null to parameter #1 ($header) of type string is deprecated in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Deprecated: locale_accept_from_http(): Passing null to parameter #1 ($header) of type string is deprecated in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Deprecated: locale_accept_from_http(): Passing null to parameter #1 ($header) of type string is deprecated in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Warning: Undefined array key "HTTP_ACCEPT_LANGUAGE" in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

Deprecated: locale_accept_from_http(): Passing null to parameter #1 ($header) of type string is deprecated in /home/lmc77/sites/up310/plugins/content/up/upAction.php on line 2093

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.

🆙 color : retourne la valeur d'une couleur de la feuille de style de UP

Cliquer pour lire la documentation

syntaxe {up color=UP-COLOR-NAME}
@version: UP-2.5 @author: Lomart @license: GNU/GPLv3 @tags: HTML
  • 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.

avec l'option class
{up div | class=bg-darkRed t-yellow p2}
avec l'option <strong>class</strong>
{/up div}
avec l'option style
{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

Avec du HTML et CSS direct
{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.

Un bloc avec du texte rouge,
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-pink va créer la bordure rose de 2px avec les classes de UP
  • style=color:#ff1111  un style inline qui utilise l'action color pour récupérer le code de la couleur rouge pour le texte
  • style=outline:5px dotted var(--purple)  la bordure externe est définie avec la méthode CSS classique qui utilise le nom de la variable couleur
  • style=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 :

  1. le poids de son sélecteur : div.foo aura priorité sur .foo
  2. 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.

  1. dans les paramètres du plugin up, je désactive le chargement de UP.CSS
  2. dans le module LM-Custom, publié en position debug, j'ajoute l'appel plugins/content/up/assets/up.css dans 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}.

noir
black
#000
grisFonce
darkGrey
#333
gris
grey
#888
grisClair
lightGrey
#bbb
grisPale
paleGrey
#ddd
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
c1fonce
darkPrimary
#001f3f
c1pale
palePrimary
#BCE0FF
c2
secondary
#888
c2fonce
darkSecondary
#333
c2pale
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

 Consultez cet article pour  personnaliser les couleurs de UP

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.

Pour info, cette page utilise 26 action(s) :
upactionslist (1) flexbox (4) div (5) color (11) bbcode (1) icon (3) jcontent-info (1)