Le CSS

Commençons d'abord par définir une classe et à lui appliquer des fonctions de base.

Je vais donc créer une classe "corbeille" avec un fond gris clair et une bordure gris foncé.

Pour cela, rendez-vous dans Panneau d'Administration > Affichage > Couleurs > Feuilles de style CSS et placez-y le code suivant :

Code:

.corbeille {
    background-color: #DDDDDD; /*--- Couleur de fond ---*/
    border: 1px solid #888888; /*--- Taille, type et couleur de la bordure ---*/
    color: #444444; /*--- Couleur du texte ---*/
}

Ce qui donne pour l'instant :

Rajoutons une image

Bon, je vous l'accorde, ce tag reste pour l'instant très basique. Mais maintenant nous allons lui appliquer une image de fond, la positionner, etc. :

Code:

.corbeille {
    background-image: url('URL_DE_VOTRE_IMAGE'); /*--- Image de la corbeille ---*/
    background-repeat: no-repeat; /*--- On ne fait apparaître l'image qu'une seule fois ---*/
    background-position: center left; /*--- On positionne notre corbeille au milieu à gauche ---*/
    background-color: #DDDDDD; /*--- Couleur de fond ---*/
    border: 1px solid #888888; /*--- Taille, type et couleur de la bordure ---*/
    color: #444444; /*--- Couleur du texte ---*/
}

Le code, commenté, parle de lui-même

Ou encore...:

Bon, on a mis une image, mais le texte est par-dessus et on ne la voit pas entièrement. On va y remédier en rajoutant une marge interne à gauche.
Et pour l'image qui est "mangée" en haut et en bas ? Et bien ça va être l'occasion de voir une propriété bien particulière, j'ai nommé min-height :

Code:

.corbeille {
    background-image: url('URL_DE_VOTRE_IMAGE'); /*--- Image de la corbeille ---*/
    background-repeat: no-repeat; /*--- On ne fait apparaître l'image qu'une seule fois ---*/
    background-position: center left; /*--- On positionne notre corbeille au milieu à gauche ---*/
    background-color: #DDD; /*--- Couleur de fond ---*/
    border: 1px solid #888888; /*--- Taille, type et couleur de la bordure ---*/
    color: #444444; /*--- Couleur du texte ---*/
    padding-left: 55px; /*--- On espace la bordure gauche du texte de 55px ---*/
    min-height: 60px; /*--- On donne une hauteur minimale de 60px au tableau ---*/
}

Kesako ça min-height ?

Pour commencer, j'imagine que vous connaissez déjà les propriétés width et height qui permettent de définir respectivement la largeur et la hauteur d'un élément de type bloc.

Pour que mon image s'affiche entièrement (ce qui serait plus joli, avouez le), il faut que mon bloc qui la contient soit plus grand. On aurait donc tendance à fixer cela avec un height: 60px; par exemple.

Oui mais voilà, si jamais j'ai un modérateur très bavard qui veut écrire un message de 10 lignes, mon bloc va être trop petit ! Inversement, je ne peux pas fixer une hauteur énorme, alors que ce n'est pas nécessaire dans la plupart des cas. Concrètement, je voudrais que le bloc s'adapte à la taille du contenu, mais avec une hauteur minimale de 60 pixels (pour que notre image soit visible).

Et beh ça tombe bien, parce-qu'en CSS ça existe : ce sont les propriétés min-width et min-height qui fixent respectivement une largeur et une hauteur minimales au bloc.

Dans notre exemple, seul min-height nous intéresse, c'est pour cela que nous l'avons utilisé !

C'est tout !

Et voilà, c'est terminé pour le CSS !

Après, vous pouvez ajouter vous-même votre touche personnelle, le principe de ce tutoriel étant de vous laisser personnaliser au maximum ces tags de modération (rajouter des marges internes, changer la taille du texte, la police, ...).

La mise en place

Ne vous inquiétez pas, je vous libère bientôt. xD

Pour pouvoir utiliser votre tag sur votre forum, il suffit tout simplement de créer une <div> avec la class du tag de modération, comme ceci :

Code:

<div class="corbeille">Votre message de modération indiquant le corbeillage de ce topic, par exemple</div>

Maintenant, vous saurez modérer vos forums avec classe.