L'option css-head, présente dans la majorité des actions, permet d'ajouter des règles CSS dans le head de la page.
Cela permet des personnalisations non prévues par l'action ou la neutralisation d'un style général pour une action.
Le résultat :
Démo de l'option css-head
Le shortcode :
1 - {up div | class=foo-1 | id=monID
2 - | css-head=
3 - body[background:#ffffe0 !important]
4 - .foo-1[background:#FFD700]
5 - #id[text-align:center; padding:1rem]
6 - \[class^="foo"\][color:var(--rouge)]
} Démo de l'option css-head {/up div}L'argument attendu par l'option css-head est un classique code CSS.
Comme il est impossible de mettre des accolades dans les shortcodes, elles sont remplacées par des crochets. Pour saisir un crochet, échappez-le avec un antislash (voir ligne 6).
- ligne 1 : on utilise l'action div pour la démo avec la classe foo-1. Comme cette action ne génère pas automatiquement un identifiant, nous l'indiquons pour les besoins de la démo.
- ligne 2 : appel de l'option css-head. les sauts de lignes ne sont pas obligatoire, mais facilitent la lecture.
- ligne 3 : une règle pour modifier la couleur de fond de la fenêtre. L'action color est utilisée pour avoir la couleur jaune claire définie pour le site.
- ligne 4 : on donne la propriété pour la classe foo-1
- ligne 5 : #id, sera remplacé par l'identifiant de l'action (#monID).
- ligne 6 : un exemple de sélecteur utilisant les crochets.