addClass ~ ajoute une classe à une balise ou son parent

Une action qui permet de styler vos pages individuellement

➠ addclass : ajoute une classe à un sélecteur CSS (body par défaut.)

Cliquer pour lire la documentation

Il est possible :
- 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
author LOMART version UP-0.9 license GNU/GPLv3 tags Expert
  • addclass: nom de la classe ajoutée à la balise
  • filter: conditions. Voir doc action filter (v1.8)
  • 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, ...
  • css-head (base-css): code CSS pour head. Attention utiliser [] au lieu de {}

    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] .bar-top[background-color:#fff] }

    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 header (#row1) en blanc. 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,255,0.9)] | selector=#sp-main-body .container}

    Nous ciblons le bloc contenant l'article par le sélecteur #sp-main-body .container 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é dans le head :

    Les règles CSS.
    .bgimg{background:url(../../images/admin/joomla-fond.png) repeat} .bar-top{background-color:#fff}
    .bgblanc{background-color:rgba(255,255,255,0.8)}
    Les scripts jQuery
    jQuery(document).ready(function($) {$("body").addClass("bgimg");});
    jQuery(document).ready(function($) {$("#sp-main-body .container").addClass("bgblanc");});
    

    Nous aurions pu utiliser l'action addcsshead pour ajouter la règle directement à #sp-main-body .container sans créer la classe bgblanc, mais cela a permis de vous montrer la possibilité.

    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="mon_bloc">
          <p>petit-fils</p>
        </div>
      </div>
    </div>

    Dans l'exemple de code ci-dessus, on aimerait mettre un fond jaune au grand-père (div class="container"). Modifier la class "container" aurait des effets de bord difficilement maîtrisables.

    Ce shortcode de UP va permettre de nous en sortir :

    {up addclass=papy | selector=.mon_bloc | parent=2 | css-head=.papy[background-color:yellow]}

    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" en plus de la classe "container". Une règle CSS a été ajouté dans le head pour styler la balise p immédiatement sous la classe "papy". Le paramètre "parent=2" a permis de remonter sur 2 générations.


    version 1.8


    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. Concrétement, ce shortcode va ajouter un fond jaune au bloc de l'article qui se trouve à 2 niveaux plus haut, 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[background-color:yellow]}

    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}