Colorer les Messages des Modérateurs et Administrateurs (1.6)

[Saphir]

Dans ce tutoriel, nous allons apprendre à appliquer un style particulier aux membres de l'équipe du forum, comme c'est le cas ici-même.

Si vous avez plusieurs thèmes installés, il se peut que vous ayez à répéter l'opération pour chaque thème, avec parfois quelques différences.

Dans un premier temps, il faut créer ledit style. Rendons-nous donc dans le panneau d'administration, partie Templates et Style, cliquez sur "Default" dans la liste des thèmes puis sur "global.css".
Dans la mesure où nous allons avoir besoin d'ajouter un sélecteur, il faut passer en mode avancé.
Il va nous falloir connaître les identifiants des groupes auxquels appliquer un style particulier : par défaut, le groupe "Administrateurs" a pour identifiant 4, "Super Modérateurs", 3, et "Modérateurs", 6.
On va créer pour chaque groupe un sélecteur ".staffpost_ID" en remplaçant ID par l'identifiant du groupe.
Si je souhaite donner aux messages des administrateurs un fond vert, et à ceux des modérateurs et super modérateurs un fond pourpre, je vais donc ajouter en bas de global.css :

Code :

.staffpost_4 {
    background-color: green;
}
.staffpost_3, .staffpost_6 {
    background-color: #CC00CC;
}

Nous allons maintenant modifier les templates pour choisir où appliquer ce nouveau style.
Pour cela, toujours dans "Templates & Style", allez cette fois dans "Templates" et plus précisément dans "Default Templates" pour modifier dans "Post Bit Templates" deux templates.
Commençons par le template "postbit".
J'ai décidé de modifier le cadre contenant le message pour y appliquer le fond coloré préparé précédemment.
Pour cela, localisez la variable affichant le message : {$post['message']}, et appliquez le style soit en modifiant la balise qui entoure la variable, soit en l'entourant d'une nouvelle balise. Moi, je vais opter pour la seconde possibilité. J'ai commencé avec :

Code PHP :

            <td class="trow2 post_content {$unapproved_shade}">
                <span class="smalltext"><strong>{$post['icon']}{$post['subject']} {$post['subject_extra']}</strong></span>

                <div class="post_body" id="pid_{$post['pid']}">
                    {$post['message']}
                </div>
                {$post['attachments']}
                {$post['signature']}

                <div class="post_meta" id="post_meta_{$post['pid']}">
                {$post['iplogged']}
                </div>
            </td> 


je vais donc rajouter une balise div associée à la classe "staffpost_ID". Dans les templates, "staffpost_ID" se traduit par : "staffpost_{$post['usergroup']}". J'obtiens donc :

Code PHP :

            <td class="trow2 post_content {$unapproved_shade}">
                <div class="staffpost_{$post['usergroup']}">
                    <span class="smalltext"><strong>{$post['icon']}{$post['subject']} {$post['subject_extra']}</strong></span>

                    <div class="post_body" id="pid_{$post['pid']}">
                        {$post['message']}
                    </div>
                    {$post['attachments']}
                    {$post['signature']}
                </div>

                <div class="post_meta" id="post_meta_{$post['pid']}">
                {$post['iplogged']}
                </div>
            </td> 


Ce n'est pas terminé ! Certaines personnes préfèrent utiliser l'affichage classique qui place les données de l'expéditeur des messages à gauche au lieu d'en haut : il faut donc modifier également le template "postbit_classic" de façon similaire : j'ai changé

Code PHP :

    <td class="{$altbg}" valign="top">
        <table width="100%">
            <tr><td>{$post['posturl']}<span class="smalltext"><strong>{$post['icon']}{$post['subject']} {$post['subject_extra']}</strong></span>
            <br />
            <div id="pid_{$post['pid']}" class="post_body">
                {$post['message']}
            </div>
            {$post['attachments']}
            {$post['signature']}
            <div style="text-align: right; vertical-align: bottom;" id="post_meta_{$post['pid']}">
                <div id="edited_by_{$post['pid']}">{$post['editedmsg']}</div>
                {$post['iplogged']}
            </div>
        </td></tr> 


par :

Code PHP :

    <td class="{$altbg}" valign="top">
        <table width="100%">
            <tr><td><div class="staffpost_{$post['usergroup']}">{$post['posturl']}<span class="smalltext"><strong>{$post['icon']}{$post['subject']} {$post['subject_extra']}</strong></span>
            <br />
            <div id="pid_{$post['pid']}" class="post_body">
                {$post['message']}
            </div>
            {$post['attachments']}
            {$post['signature']}
            <div style="text-align: right; vertical-align: bottom;" id="post_meta_{$post['pid']}">
                <div id="edited_by_{$post['pid']}">{$post['editedmsg']}</div>
                {$post['iplogged']}
            </div>
        </div></td></tr> 


(ici aussi, le seul changement est sur la première ligne).

C'est tout, plus qu'à admirer l'oeuvre (et cela fonctionne aussi sur les messages postés précédemment). Une petite capture d'écran pour vous montrer le résultat sur les deux types d'affichage, un administrateur en normal :     , et un modérateur global en classique :     !

[Saphir]

Nouveau !

Si vous ne voulez pas que tous les messages des administrateurs et modérateurs soient colorés, mais qu'ils ne le soient que s'ils le souhaitent, vous pouvez créer un MyCode pour cela : seul le texte entre les balises [staff] et [/staff] (par exemple) sera ainsi coloré.

Dans global.css, au lieu de ce qui était indiqué au début du tutoriel, entrez plutôt :

Code :

.staffpost_4 .staff {
    background-color: green;
}
.staffpost_3 .staff, .staffpost_6 .staff {
    background-color: #CC00CC;
}

Maintenant, créez le MyCode suivant (vous pouvez entrer le nom de votre choix) :


Pour un effet plus esthétique, vous pouvez modifier le CSS à votre guise, et l'adapter à vos groupes.

vincelufologue nous a montré son résultat, bien sympathique :

Vous pouvez voir le code CSS correspondant dans son message : http://mybb.fr/thread-5046-post-40235.html#pid40235.
(Notez qu'il faudra trouver les images vous-même, évidemment.)