JoomlaDay FR
➠ addclass : ajoute une classe à la balise body par défaut. DEMO
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, 2 le grand-parent et ainsi de suite
  • 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 | codecss=.bgblanc[background-color:#FFF] | selector=.item-page | parent}

    L'article est dans le sélecteur .item-page (selector=.item-page), mais nous voulons cibler le bloc parent (qui n'a pas d'identifiant unique) pour englober les marges et paddings. C'est très simple, il suffit d'ajouter le paramètre parent

    N'ayant pas de classe correspondant à mon besoin, je vais la créer en direct-live. J'indique comme paramètre principal, le nom de la nouvelle classe avec sa définition dans le paramètre codecss. Attention: les caractères {} étant utilisés pour le shortcode, on met des [ ] à la place.

    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:#FFF}
    
    Les scripts jQuery
    jQuery(document).ready(function($) {$("body").addClass("bgimg");});
    jQuery(document).ready(function($) {$("#maincontent").parent().addClass("bgblanc");});

    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 class="row">
      <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="row"). Modifier la class "row" 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 "row". Une règle CSS a été ajouté dans le head pour styler la classe "papy". Le paramètre "parent=2" a permis de remonter sur 2 générations.