Tutoriel Joomla

Ajouter une image au titre d'un module

Que ce soit pour améliorer le rendu visuel d'une page ou pour différencier les titres des modules entre eux, il peut être utile d'ajouter une image de type "icône" au titre d'un module. Parmi les différentes options à notre disposition pour réaliser cela, la version CSS est la plus simple à mettre en oeuvre. Nous allons voir au travers de ce tutoriel comment ajouter une image au titre d'un module dans Joomla.

Table des matières
- Principe
- Images
- Code CSS
- Application de la classe

Principe

Le principe retenu ici est le suivant : appliquer une classe CSS au titre du module. Ainsi, il nous sera possible d'appliquer autant de classes que nécessaire et d'avoir autant d'images que voulues dans les titres de nos modules. Le but étant d'obtenir une présentation différente pour chaque titre de module.

Images

Pour les besoins de ce tutoriel, nous choisissons d'utiliser des images de 30 pixels x 30 pixels. Les images sont ensuite transférées sur le serveur au moyen de notre client FTP favori, dans le dossier "images" situé à la racine de notre site Joomla.

Code CSS

Pour les besoins de ce tutoriel, nous avons ajouté nos lignes de codes supplémentaires dans le fichier "joomla.css" du template.
Nous indiquons la taille de la font (ici : 30 pixels) pour avoir une hauteur similaire à notre image. Pour que l'image soit positionnée en face du titre, nous appliquons un padding-bottom de 21px. La propriété :before nous permet d'indiquer à quel emplacement se positionnera notre image.

/* Moduletable Title */

.moduletable h3 { 
  font-size: 30px; 
  margin-top: 0;
  margin-bottom: 21px;
}
.moduletable.icon-1 h3 { 
  position: relative;
  padding-left: 44px;
}
.moduletable h3:before {
	content: '';
	width: 35px !important;
	height: 35px !important;
	display: inline-block;
	position: absolute;
	left: 0;
	top: 2px;	
}
.moduletable.icon-1 h3:before {
	background: url('../../../images/icone_joomla.jpg') no-repeat;
}

Dans cet exemple, la classe CSS "icon-1" affichera l'image correspondante "icone_joomla.jpg". Si vous avez différentes images (icon-1, icon-2, icon-3, etc), vous devrez dupliquez autant de fois que nécessaires les parties du code CSS pour chaque image.

Une fois que vous avez rédigé le code CSS pour votre ou vos images, enregistrez votre saisie et transférez le ficher "joomla.css" dans le dossier CSS de votre template.

Application de la classe

Ouvrez le panneau d'administration de votre site Joomla puis ouvrez "Extensions - Gestion des modules".

Ouvrez le module concerné puis cliquez sur l'onglet "Paramètres avancés".

Dans la partie "Suffixe de classe CSS", indiquez la classe CSS que vous avez crée à l'étape précédente (p.ex : icon-1) en veillant à laisser un espace avant le nom de la classe. Cliquez ensuite sur "Enregistrez & Fermer".