Nous allons voir avec du CSS, comment arriver facilement à mettre un peu de couleurs à nos textes et paragraphes, pour signaler un message d'alerte, de validation, ou encore d’information. Pour commencer, il vous faut télécharger le pack d’icônes.

Une fois le pack téléchargé, choisissez 3 icônes que vous placez dans le dossier themes/nom_du_theme/images/gestion, renommez les alerte.png - valide.png et info.png
Ensuite, ouvrez la feuille de style de votre thème (style.css) et insérer ce code à la fin:
/* Les Bulles */
.alerte{background:#efcbcb url(../images/gestion/alerte.png) no-repeat 5px 5px;border:1px solid #eea1a1;margin:10px 0px;padding:10px 10px 10px 40px;}
.valide{background:#e0ecb4 url(../images/gestion/valide.png) no-repeat 5px 5px;border:1px solid #bbd167;margin:10px 0px;padding:10px 10px 10px 40px;}
.info{background:#a2cfe6 url(../images/gestion/info.png) no-repeat 5px 5px;border:1px solid #469bc6;margin:10px 0px;padding:10px 10px 10px 40px;}

On vient de créer 3 class : alerte - valide et info, pour chacune des class on défini une couleur de fond et on demande d’afficher l’image qui se trouve dans le dossier gestion (background:...;), puis on fini avec une bordure de 1 pixel (border:1px solid #469bc6;)

Maintenant, il vous reste à insérer les différentes class dans votre code HTML des news, des articles ou bien des pages faites avec le module page. Par exemple si je veux afficher un message d'alerte dans ma news:
<p class="alerte">Pour signaler un message d&rsquo;alerte, j'utilise la class="alerte" </p>

Voilà c’est fini. Avec cette méthode vous donnez plus de valeur et de visibilité à vos messages d’information.

Pour aller plus loin:

• Télécharger des enveloppes
• Le memento CSS
• Le plan du site