On entend souvent parler de suffixe de classe CSS dans Joomla!, mais qu'est ce que c'est ? C'est simplement un paramètre que l'on peut utiliser pour personnaliser les classes CSS utilisées pour identifier les éléments de la page.

Suffixe de classe de module

Dans les options avancées de l'administration des modules on peut définir un suffixe de classe CSS. Ce suffixe sera ajouté au conteneur du module en fonction du style utilisé dans l'appel Jdoc. Je m'explique, dans le fichier 'index.php' du template on charge les modules avec le code suivant (un exemple avec la position-7) :

<jdoc:include type="modules" name="position-7" style="xhtml" />

Il existe plusieurs styles natifs mais nous ne verrons que le style 'xhtml' et le style 'rounded'.

Pour un style 'rounded', on obtient une structure 'div.module[sufffixe]'

Pour un style 'xhtml', on obtient une structure 'div.moduletable[suffixe]'

 

Exemple avec un suffixe '_gris'

alt

Lorsque l'on ajoute un suffixe en un seul mot sans espace il se colle directement derrière le conteneur du module, voici donc la structure HTML que l'on récupère (avec un style xhtml) :

div.moduletable_gris

Dans les CSS on peut ainsi identiifer le module pour y appliquer ses propres styles :

div.moduletable_gris h3 {
    background: #ddd;
}

De cette manière on rend le fond du titre du module gris. Le gros problème de cette technique c'est qu'elle supprime tous les styles qui sont appliqués par défaut car la classe '.moduletable' n'existe plus.

 

Exemple avec un suffixe ' gris'

suffixe css module joomla

En mettant un espace devant le suffixe (' gris') on crée une nouvelle classe. La structure HTML obtenue ressemble à cela :

div.moduletable gris

Et dans les CSS on peut alors identifier le module  :

div.gris h3 {
background: #ddd;
}

De cette manière on conserve les styles du template qui sont appliqués à div.moduletable et on peut ajouter une personnalisation spécifique à chaque module grâce au suffixe.

 

 

Site réalisé par Cédric KEIFLIN - Mentions légales

Copyright © 2010 - 2020 Tutoriels Joomla! - Tous droits réservés - Joomla! est un Logiciel Libre diffusé sous licence GNU General Public

https://tutoriels-joomla.joomlack.fr n'est ni affilié à Open Source Matters ou au projet Joomla ni approuvé par eux.
Le nom Joomla!® est utilisé sous license limitée de Open Source Matters, le propriétaire mondial de la marque de commerce.