Chatbox
Changer le style des messages de connexion / déconnexion
Changer le style des messages de connexion / déconnexion
Voici un petit libre service / tuto expliquant comment changer le style des messages de connexion et déconnexion sur la chatbox. Je fournis directement le code CSS, puis les explications suivent pour les intéressés
Rendu visuel
(en haut messages normaux, en dessous messages modifiés)
Oui oui, je sais, c'est moche, je donne ici un exemple très simple avec très peu de CSS.
(en haut messages normaux, en dessous messages modifiés)
Oui oui, je sais, c'est moche, je donne ici un exemple très simple avec très peu de CSS.
Le code n'est pas sous hide,
mais bien entendu un petit merci est toujours apprécié
mais bien entendu un petit merci est toujours apprécié
Code en libre service
CSS
PA > Affichage > Couleurs > Feuille de style CSS
- Code:
/* Message de connexion CB */
.msg span[style*="green"] strong {
color: #2980b9; /* couleur */
font-variant: small-caps; /* petites majuscules */
}
/* Message de déconnexion CB */
.msg span[style*="red"] strong {
color: #8e44ad; /* couleur */
font-variant: small-caps; /* petites majuscules */
}
Explications
Je vous invite à lire ces 2 tutoriels de Manumanu pour en savoir plus sur les sélecteurs CSS que nous allons utiliser : Principe du CSS : Les sélecteurs (Partie 1 : CSS2) et Principes du CSS - Les sélecteurs (Partie 2 : CSS3).
Prérequis
Je n'ai pas l'intention de faire un doublon du tuto sur les sélecteurs, donc si vous êtes intéressés, prenez le temps de le lire. (◕‿◕✿)
Voici les sélecteurs que l'on va utiliser (ils sont dans les tutoriels de Manumanu, pour vous rafraichir la mémoire, je vous met un exemple pour chaque) :
- Sélectionner une balise.
- Code:
strong { }
- Sélectionner une classe.
- Code:
.msg { }
- Sélecteur de descendance.
- Code:
.msg span { }
- Sélecteur d'attribut :
- Code:
a[href="#top"]
Le HTML
Voilà à quoi ressemble la structure HTML d'un message de connexion sur la chatbox (il y a juste la classe chatbox_row_1 qui change une ligne sur 2 pour être chatbox_row_2) :
- Code:
<p class="chatbox_row_1 clearfix">
<span title="27 Déc 2014" class="date-and-time">[17:52:55]</span>
<span class="msg">
<span style="color:green"><strong>Truc a rejoint le chat le Sam 27 Déc 2014 - 17:52</strong></span>
</span>
</p>
- Pour comparer:
- En comparaison, voici la structure html de base pour un message tout simple sur la CB (pas de couleur pour le membre, pas de droit de modération, rien de spécial quoi)
- Code:
<p class="chatbox_row_2 clearfix">
<span title="27 Déc 2014" class="date-and-time">[17:49:01]</span>
<span class="user-msg">
<span class="user">
<a target="_blank" onclick="return copy_user_name('Truc');" href="/u2">Truc</a> :
</span>
<span class="msg">
<span>Message</span>
</span>
</span>
</p>
La partie qui nous intéresse étant celle ci :
- Code:
<span class="msg">
<span style="color:green"><strong>Truc a rejoint le chat le Sam 27 Déc 2014 - 17:11</strong></span>
</span>
- Les messages sont dans une span avec la classe "msg".
- Ensuite pour les messages de connexion il y a une span avec du CSS directement appliqué : style="color:green" pour un message de connexion et style="color:red" pour un message de déconnexion.
- Et enfin, le texte est dans une balise strong qui permet de mettre en gras. C'est celle ci que nous allons tenter de cibler
Le CSS
Il nous suffit de reprendre ce qu'il y a au dessus :
- Sélectionner une span avec la classe "msg" :
- Code:
.msg
- Ensuite, on va sélectionner à l'intérieur de la classe "msg" une balise span :
- Code:
.msg span
Cette span a du CSS directement appliqué, avec l'attribut style (style="color:green")
Pour sélectionner une span avec l'attribut style :
- Code:
span[style]
Pour sélectionner une span avec l'attribut style qui a une valeur (eh oui, on veut pouvoir sélectionner seulement les couleurs de connexions et de déconnexions !)
Ici notre HTML est :
Le sélecteur CSS est donc :<span style="color:green"><strong>Truc a rejoint le chat le Sam 27 Déc 2014 - 17:11</strong></span>
- Code:
span[style="color:green"]
- Et enfin... On veut sélectionner la balise strong à l'intérieur, ce qui donne donc :
- Code:
.msg span[style="color:green"] strong {
/* personnaliser ici */
}
Les plus attentifs d'entre vous auront remarqué que j'ai pas utilisé [style="color"] mais [style*="green"] dans mon CSS fourni tout au début.
*= n'est pas la même chose que =.
[style*="green"] signifie "il faut qu'il y ait écrit "green" dans l'attribut style".
[style="color"] signifie il faut que l'attribut style ai exactement comme valeur "color:green" .
Il s'agit tout simplement d'un petit raccourci pour moi ಠ_ಠ, et permet d'éviter les cas où on oublierait le point virgule, ou si on mettait un espace en trop par exemple.
*= n'est pas la même chose que =.
[style*="green"] signifie "il faut qu'il y ait écrit "green" dans l'attribut style".
[style="color"] signifie il faut que l'attribut style ai exactement comme valeur "color:green" .
Il s'agit tout simplement d'un petit raccourci pour moi ಠ_ಠ, et permet d'éviter les cas où on oublierait le point virgule, ou si on mettait un espace en trop par exemple.
Ensuite pour le message de déconnexion c'est exactement la même chose, il suffit de changer "green" en "red".
Aucun risque d'interférer avec la couleur des messages mises par les membres sur la CB. Pour ces messages là FA met la couleur grâce au code couleur en hexa. Du coup, si quelqu'un met son message en rouge il y a aura #FF0000 et non pas "red".
Dernière édition par Nihil Scar Winspeare le Mer 19 Aoû 2020 - 19:23, édité 5 fois (Raison : Modification du HTML de la chatbox par Forumactif)
