Template Creator CK

Créez vos propres templates Joomla! avec Template Creator CK

Templates Joomla!

ebook_128

Téléchargez le livre de création de templates Joomla!

320 pages de Documentation technique, 2 Tutoriels pour créer les templates Joomla!, et 3 templates inclus

Maximenu CK

logo_maximenuck

Créez votre Megamenu Joomla! avec Maximenu CK. Multicolonnes, multirangés, chargement de module, nombreux effets, thèmes responsive.

Note utilisateur: 5 / 5

Etoiles activesEtoiles activesEtoiles activesEtoiles activesEtoiles actives
 

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.

 

 

Mentions légales

Site réalisé par Cédric KEIFLIN

Mentions légales

Copyright © 2010 - 2011

http://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.

Compteur de visites

mod_vvisit_counterNombre de visiteurs1519319

Qui est en ligne

Nous avons 45 invités et aucun membre en ligne