addClass ~ ajoute une classe à une balise ou son parent

Une action qui permet de styler vos pages individuellement

➠ addclass : ajoute une classe à la balise body par défaut.

Cliquer pour lire la documentation

avec possibilité d'ajouter du code CSS dans le head
syntaxe {up addclass=nom}
Utilisation : changer l'image de fond à partir d'un article
author LOMART version 1.0 license GNU/GPLv3
  • addclass: nom de la classe ajoutée à la balise
  • selector=body: balise cible. Ne pas oublié le point pour une classe ou le # pour un ID
  • parent: 1 si on cible le parent de selector
  • css-head: code CSS pour head. Attention utiliser [] au lieu de {}

    Pour la démonstration, nous allons mettre le logo Joomla 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/admin/joomla-fond.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.