Une action qui permet de styler vos pages individuellement
- de cibler le parent d'un sélecteur CSS ou être relatif à l'emplacement du shortcode
- de créer la règle CSS avec l'option 'css-head=.foo[color:red]'
syntaxe
{up addclass=nom_classe}Utilisation : changer l'image de fond à partir d'un article *
- addclass: nom de la classe ajoutée à la balise
- selector = body: balise cible. Ne pas oublier le point pour une classe ou le # pour un ID
- parent: 1 si on cible le parent de selector, 2 le grand-père, ...
options secondaires
- id: identifiant
- css-head (base-css): code CSS pour head. Attention utiliser [] au lieu de {}
- filter: conditions. Voir doc action filter (v1.8)
- Version 1.8
- ajout option filter
- Version 1.9.5
- si parent & selector=body, on crée une référence à l'emplacement du shortcode
Pour la démonstration, nous allons mettre le logo UP sur le fond de la page (body) et un fond blanc au bandeau de titre avec ce shortcode
{up addclass=bgimg | css-head=.bgimg[background:url(../images/actions-demo/up-bg-beige-150x150.png) repeat] .menu-js01[background-color:#ffa] }on indique comme paramètre principal addclass un nom de classe qui n'est pas utilisé: bgimg dans notre exemple. Comme c'est obligatoirement le nom d'une classe, Il est inutile de mettre un point devant le nom.
La cible par défaut (selector) étant body, il est inutile de le préciser.
L'option css-head permet d'ajouter la règle CSS pour l'image (.bgimg) et de modifier la couleur du bandeau du menu (.menu-js01) en jaune clair.
UP ajoute les 2 règles CSS dans le head de la page.
Attention: les caractères { } étant utilisés pour le shortcode, on met des [ ] à la place.
Un peu plus compliqué
Mettre la couleur du fond de l'article en blanc pour cacher l'image de fond.
{up addclass=bgblanc | css-head=.bgblanc[background-color:rgba(255,255,180,0.8)] | selector=.com-content-article__body}Nous ciblons le bloc contenant l'article par le sélecteur .com-content-article__body en l'indiquant comme argument du paramétre SELECTOR
Si vous regardez le code source de cette page avec un inspecteur de page, vous verrez que UP a ajouté :
Les règles CSS..bgimg{background:url(../images/actions-demo/up-bg-beige-150x150.png) repeat} .menu-js01{background-color:#ffa}
.bgblanc{background-color:rgba(255,255,180,0.8)}document.querySelector("body").classList.add("bgimg");
document.querySelector(".com-content-article__body").classList.add("bgblanc");Nous aurions pu utiliser l'action addcsshead pour ajouter la règle directement à body et .com-content-article__body sans créer la classe bgblanc, mais cela a permis de vous montrer la possibilité.
Vous pouvez aussi utiliser cette méthode pour affecter des propriétés CSS définies dans une feuille de style en dehors de l'article.
Le webmaster s'occupe de l'intégration et le graphiste du style.
Père, grand-père, arrière-grand-père et compagnie
Souvent, il est nécessaire de styler un bloc ancêtre avec une classe ou une ID absente ou non suffisamment sélective
<div>
<p>grand-père</p>
<div>
<p>père</p>
<div class="petit_fils">
<p>petit-fils</p>
</div>
</div>
</div>Dans l'exemple de code ci-dessus, on aimerait mettre un fond rouge au grand-père, mais ce dernier n'a pas de sélecteur CSS.
Ce shortcode de UP va permettre de nous en sortir :
{up addclass=papy | selector=.petit_fils | parent=2 | css-head=.papy > p[background-color:red;color;white]}grand-père
père
petit-fils
Si vous regardez le code de la page, le bloc grand-père de "mon_bloc" a maintenant la classe "papy". Le paramètre "parent=2" a permis de remonter sur 2 générations.
Une règle CSS a été ajouté dans le head pour styler la balise p immédiatement sous la classe "papy".
version 1.8
- filter : exécute l'action dans certaines conditions. 🆙 Filter : liste des conditions
version 1.9.5
Si l'option parent est spécifiée, sans qu'un selector soit défini, la référence sera relative à l'emplacement du shortcode.
Ce shortcode à lemplacement du petit-fils aura le même effet sans avoir besoin de créer ou d'ajouter une classe. Le shortcode se suffit à lui-même.
{up addclass=papy | parent=2 | css-head=.papy > p[background-color:red;color;white]}Ce type de shortcode placé en tête d'un article est très utile pour le mettre en avant. Mais on peut encore faire plus simple en utilisant une classe existante comme argument principal. Ce qui donne :
{up addclass=bg-jauneClair | parent=2}upactionslist (1) readmore (1) csv2def (1) addclass (3) modal (1) jcontent-info (1)