➠ 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
  • 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");});