Personnaliser les phrases spéciales de la Chatbox
Bonjour, voici une astuce qui je l'espère va vous plaire...
Pour personnaliser ces phrases, il faut déjà avoir quelques notions de CSS. Vous pouvez agir sur la couleur, la taille, l'apparence... ^^ Mais aussi modifier certaines phrases. Voici comment faire :
1. Changer l'apparence des phrases :
Dans votre feuille de style css :
Panneau d'Administration >> Affichage >> Couleurs >> onglets à droite : feuille de style CSS.
Insérez ces codes pour changer :
La phrase de connection : PhpBB2 & Invision :
| Code: |
.chatbox .msg span[style="color:green;"] strong { color: #ff00ff; font-size : 10px; } |
PunBB & PhpBB3 : | Code: |
span[style="color:green;"] strong { color: #ff00ff; font-size : 10px; } |
La phrase de déconnection :
PhpBB2 & Invision :| Code: |
.chatbox .msg span[style="color:red;"] strong { color:#00ff00; font-size : 16px; } |
PunBB & PhpBB3 : | Code: |
span[style="color:red;"] strong { color:#00ff00; font-size : 16px; } |
la date et l'heure :
PhpBB2, PhpBB3 & Invision :| Code: |
.date-and-time { color:#ff0000; font-size: 10px; } |
le nom de l'utilisateur :
Attention si vous changez le code couleur du nom de l'utilisateur, cela mettra tous les membres de la même couleur
PhpBB2 & Invision : | Code: |
.chatbox .user strong { color : #000000; text-weight : normal; } |
PunBB & PhpBB3 : | Code: |
.user strong { color : #000000; font-weight : normal; } |
les phrases de modération, mais aussi celle valable par la commande /me :
Attention ce code change aussi la couleur du nom de l'utilisateur, cela mettra tous les membres de la même couleur
PhpBB2 & Invision : | Code:Sélectionner le contenu |
.chatbox .msg strong { color : #00ffff; }
|
PunBB & PhpBB3 : | Code:Sélectionner le contenu |
.msg strong { color : #00ffff; }
|

2. Modifier certaines phrases :
Nous pouvons en fait modifier deux phrases sans que cela ne génère de problème : la phrase de connection et celle de déconnection. Pour cela nous allons toujours utiliser la css, et en particulier deux propriétés : visibility et content.
Attention Le nom du membre et la date et l'heure à laquelle il se connecte n'apparaitront plus
La propriété visibility permet de masquer ou d'afficher comme son nom l'indique une fonction, la propriété content permet quant à elle d'insérer une phrase avant ou après une fonction. C'est pourquoi elles vont nous être utiles. La première permettant de masquer la phrase d'origine, la seconde de faire apparaitre la phrase que nous désirons.
a. Masquer les phrases par défaut :
Pour masquer la phrase de connection, nous allons donc mettre :
PhpBB2 & Invision :| Code: |
.chatbox .msg span[style="color:green;"] strong { visibility: hidden; } |
PunBB & PhpBB3 : | Code: |
span[style="color:green;"] strong { visibility: hidden; } |
et pour celle de déconnection :
PhpBB2 & Invision : | Code: |
.chatbox .msg span[style="color:red;"] strong { visibility: hidden; } |
PunBB & PhpBB3 : | Code: |
span[style="color:red;"] strong { visibility: hidden; } |
b. Faire apparaitre vos phrases :
Enfin, pour afficher les phrases que nous voulons faire apparaitre, nous allons ajouter pour la phrase de connection :
PhpBB2 & Invision :| Code: |
.chatbox .msg span[style="color:green;"] strong:before { content : "Et un de plus dans la Chatbox "; visibility: visible; } |
PunBB & PhpBB3 : | Code: |
span[style="color:green;"] strong:before { content : "Et un de moins dans la Chatbox "; visibility: visible; } |
et celle de déconnection :
PhpBB2 & Invision : | Code: |
.chatbox .msg span[style="color:red;"] strong:before { content : "Et un de moins dans la Chatbox "; visibility: visible; } |
PunBB & PhpBB3 : | Code: |
span[style="color:red;"] strong:before { content : "Et un de plus dans la Chatbox "; visibility: visible; } |
Et voilà le résultat :
Cette astuce a été proposée par Macema Aucune reproduction possible sans accord, conformément à l’article L122-1 du CPI.
Pour tout problème, merci de poser votre question ICI. |
|