Vous avez un certain contrôle sur vos modules en déterminant par quel élément de menu ils apparaissent. Vous faites habituellement cela avec l'onglet d'assignation de menu pour un module particulier dans le Gestionnaire de Module.

Que faire si vous voulez un style de module différent que les autres modules?

Que faire si vous ne voulez pas que le module apparaîsse sur les appareils mobiles pour aider à la vitesse de téléchargement et peut-être prendre moins de place sur l'écran?

Ajoutez un nom de classe pour le module

Pour ajouter un nom de classe à un module pour personnaliser son style, allez dans Extensions -> Gestionnaire de modules et ouvrez le module en question.

Cliquez sur l'onglet Avancé. Vous verrez une zone de texte à côté de suffixe de classe de Module. C'est là que vous mettez le nom de la classe.

Il y a quelque chose à noter à propos de cette zone de texte. Si vous ne mettez pas d'espace avant le nom de la classe, Joomla ajoutera votre classe sur le reste du texte. Par exemple, tapez fondrouge comme nom de classe dans la zone suffixe de classe de Module. N'ajoutez pas d'espaces. Enregistrez le module.

Quand vous ouvrez une page Web de votre site, puis observez la page avec un outil de diagnostic tels que Firebug, vous voyez le texte suivant :

<div class="modulefondrouge">
<div class="customfondrouge">
</div>
</div>

 

Joomla a ajouté le nom de votre classe à la fin de la classe pour les div que contient votre module. Cela peut vous convenir, mais si vous voulez que votre appel soit autonome, mettez un espace avant le nom dans la zone suffixe de classe de module.

Vous pouvez également ajouter plusieurs noms de classe dans la zone suffixe de classe de Module, juste en séparant chaque nom de classe par un espace.

Maintenant que vous avez un nom de classe pour ce module, vous pouvez le styliser à volonté. Utilisez vos outils de diagnostic pour être sûr que vous êtes en train de cibler l'élément correct et les classes pour vos styles personnalisés.

Par exemple :

.fondrouge {background: #890000; color: #ffffff;}

Faire en sorte que le module ne s'affiche pas sur les périphériques mobiles

Pour cibler ce module spécifique pour les appareils mobiles vous devez ajouter display: none pour les appels @media appropriés dans votre feuille de style. Par exemple :

@media (max-width: 767px) {
    .fondrouge {display: none}
}

 

Choses à garder à l'esprit

Vous devrez peut-être être plus précis avec votre style dans certains cas. Vous devrez peut-être cibler le module afin de remplacer un autre style qui modifie cet élément. Utilisez vos outils de diagnostic pour voir tout ce qui style l'élément. Vous devrez peut-être ajouter #aside avant la classe ou quelque chose du genre.

Sauvegarder
Choix utilisateur pour les Cookies
Nous utilisons des cookies afin de vous proposer les meilleurs services possibles. Si vous déclinez l'utilisation de ces cookies, le site web pourrait ne pas fonctionner correctement.
Tout accepter
Tout décliner
Fonctionnels