AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment : -23%
EVGA SuperNOVA 650 G6 – Alimentation PC 100% ...
Voir le deal
77.91 €
Le Deal du moment :
Fnac : 2 Funko Pop achetées : le 3ème ...
Voir le deal

    Chatbox - Styliser les messages de connexion / déconnexion (CSS)

    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Sam 27 Déc 2014 - 19:14



    Chatbox
    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 :toto:

    Rendu visuel
    (en haut messages normaux, en dessous messages modifiés)

    Chatbox - Styliser les messages de connexion / déconnexion (CSS) 1419703079-screen-cb-nu
    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é ♥

    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:

    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>

    1. Les messages sont dans une span avec la classe "msg".

    2. 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.

    3. 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 :


    1. Sélectionner une span avec la classe "msg" :
      Code:
      .msg

    2. 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 :
      <span style="color:green"><strong>Truc a rejoint le chat le Sam 27 Déc 2014 - 17:11</strong></span>
      Le sélecteur CSS est donc :
      Code:
      span[style="color:green"]

    3. 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.


    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)

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Ven 23 Jan 2015 - 0:02

    Merci Nihil! Je classe donc! :hug:



    Nat
    Nat
    FémininAge : 29Messages : 42

    Sam 24 Jan 2015 - 10:47

    Merci à toi, ça donne une nouvelle dimension à la chatbox ! ^^
    Alumine
    Alumine
    FémininAge : 26Messages : 487

    Sam 7 Mar 2015 - 15:34

    Ho, c'est super ! merci beaucoup ^^ J'attends avec impatience celui sur les phrases de connexion !



    Alumine
    Tempy
    Tempy
    FémininAge : 25Messages : 76

    Dim 8 Mar 2015 - 4:35

    Merci pour ce tutoriel !
    J'ai appris quelque chose là ! Je ne savais pas du tout qu'on pouvait mettre un style derrière un span pour le sélectionner !
    Merci encore !
    Anonymous
    Invité

    Ven 3 Avr 2015 - 20:05

    Hello :)
    Nihil Scar Winspeare, je t'aime !
    Merci beaucoup :hug:
    ROGERS.
    ROGERS.
    FémininAge : 29Messages : 335

    Ven 3 Avr 2015 - 20:12

    Je n'y crois pas c'est merveilleux ♫ *o* MERCI
    Ayfoth
    Ayfoth
    MasculinAge : 34Messages : 1330

    Dim 19 Avr 2015 - 22:34

    Oh un grand bisous pour toi Nihil.



    Chatbox - Styliser les messages de connexion / déconnexion (CSS) Oyl7
    Swanny.
    Swanny.
    FémininAge : 40Messages : 5

    Mer 6 Mai 2015 - 18:07

    Ah super, je cherchais à faire ça depuis un petit moment sans jamais y arriver.
    Merci beaucoup !
    potion
    potion
    FémininAge : 37Messages : 33

    Ven 10 Juil 2015 - 21:37

    J'ai cherché ça toute la journée sur le net !! un grand merci !
    Lamire
    Lamire
    FémininAge : 30Messages : 96

    Lun 13 Juil 2015 - 2:26

    Merci beaucoup~~
    Adrosh
    Adrosh
    MasculinAge : 22Messages : 17

    Mer 5 Aoû 2015 - 15:43

    Merci Nihil
    o~°Passion HELL
    o~°Passion HELL
    FémininAge : 35Messages : 215

    Mar 18 Aoû 2015 - 21:46

    Merci beaucoup Wink



    ....
    Cruelly
    Cruelly
    FémininAge : 30Messages : 2605

    Lun 21 Sep 2015 - 2:55

    Merci beaucoup pour ce tuto pour ma part j'ai modifier un peut et sa me donner ceci :
    Spoiler:



    :heart: :heart:
    Dragonia
    Dragonia
    FémininAge : 35Messages : 24

    Mar 29 Sep 2015 - 21:31

    Super c'était ce qu'il me fallait ! J'en avais marre de voir des guirlandes vertes et rouges sur la cb XD

    Merci beaucoup Wink
    Sasha57
    Sasha57
    FémininAge : 29Messages : 35

    Ven 9 Oct 2015 - 10:37

    Super tutoriel, clair et bien expliqué, merci du partage ! Very Happy
    Laety
    Laety
    FémininAge : 28Messages : 13

    Lun 12 Oct 2015 - 10:19

    Alors ça ! Si je m'y attendais ! je voulais juste virer la Chat box du milieu de la page, et ça fait une demie heure que je m'extasie sur cette découverte ! Je vais faire des folies sur ma cb ! o/ Merciiiii !
    Kaht
    Kaht
    MasculinAge : 34Messages : 13

    Jeu 19 Nov 2015 - 13:48

    Très très stylé pour une astuce toute bête Wink bien joué !
    #FifuKing.
    #FifuKing.
    MasculinAge : 27Messages : 37

    Mar 15 Déc 2015 - 16:10

    merci beaucoup :B
    Zekarant
    Zekarant
    MasculinAge : 22Messages : 51

    Dim 10 Jan 2016 - 21:50

    Merci
    Lunyh
    Lunyh
    FémininAge : 23Messages : 41

    Sam 16 Jan 2016 - 1:20

    Merciii
    Leyakath
    Leyakath
    FémininAge : 31Messages : 44

    Lun 21 Mar 2016 - 23:57

    Merci d'avoir partagé! :)
    Youp
    Youp
    FémininAge : 29Messages : 579

    Mar 22 Mar 2016 - 1:40

    C'est chouette ! Le vert et rouge c'est bien trop moche. Merci Nihil ^^



    Chatbox - Styliser les messages de connexion / déconnexion (CSS) 262632clip20160315at092522
    Toxinou
    Toxinou
    FémininAge : 32Messages : 41

    Dim 22 Mai 2016 - 16:00

    Mercii ! J'en pouvais plus de ce vert. C'est super sympas d'expliquer tout en détail pour la compréhension en plus =w=
    Asarigolo
    Asarigolo
    MasculinAge : 31Messages : 29

    Sam 9 Juil 2016 - 22:31

    Oh bah merci, décidément j'ai bien fait de m'inscrire. Ce vert était d'une laideur, en plus. Et l'explication détaillée après le code est super compréhensible.
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 9:59