AccueilFAQRechercherMembresGroupesS'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.


    Personnaliser certaines phrases du QEEL sans JS !

    Partagez
    Nihil Scar Winspeare
    Messages : 3942

    le Ven 25 Déc 2015 - 15:30

    Personnaliser des phrases du QEEL sans javascript



    Bonjour !

    Beaucoup d'entre vous utilisent du javascript pour changer les textes des phrases du Qui Est En Ligne. Nous allons voir aujourd'hui une méthode pour modifier certaines de ces phrases sans javascript, avec l'aide du CSS !

    Je vous invite à lire le tutoriel d'Onyx : Tuto - Guide du template "index-body" (Qeel) si vous avez des questions sur le template index_body.

    Exemple



    Pour l'instant, je n'ai testé sur phpbb2, mais normalement le concept est le même sur les autres versions.

    Voici les phrases que nous pouvons modifier ainsi :

    • Nombre de messages
    • Nombre de membres
    • Membre le plus récent


    Phrase d'origine : Nous avons 21 membres enregistrés
    Phrase modifiée : Depuis l'aube des temps 21 âmes hantent Volfury.

    Exemple de mise en page :

    Étant donné que ce système repose seulement sur une astuce visuelle en CSS, il n'y a pas de gestion du singulier / pluriel dans les phrases.
    Cela signifie que pour le nombre de messages et le nombre de membres, on peut avoir un résultat comme ça :
    S'il y a plus d'un membre tout va bien : Il y a en tout 15 habitants
    S'il n'y a qu'un seul membre, ça fait moche : Il y a en tout 1 habitants

    Je ne considère pas vraiment cela comme un problème, car ce sont des cas de figures rares, une fois le second membre / le second message atteint, mettre la phrase au singulier n'est pas important.


    Code en utilisation directe



    Toutes les modifications se font dans le template index_body.
    PA > Affichage > Templates > Général > index_body

    Changer la phrase avec le nombre de membres


    On remplace {TOTAL_USERS} par ceci :
    Code:
    Il y a en tout <span class="qeel-p-perso">{TOTAL_USERS}</span> habitants.
    Résultat : Il y a en tout 23610 habitants.

    Changer la phrase avec le nombre de messages


    On remplace {TOTAL_POSTS} par ceci :
    Code:
    Les pirates ont envoyé <span class="qeel-p-perso">{TOTAL_POSTS}</span> missives.
    Résultat : Les pirates ont envoyé 937571 missives.

    Changer la phrase avec le dernier membre enregistré


    On remplace {NEWEST_USER} par ceci :
    Code:
    Bienvenue à notre petit nouveau <span class="qeel-p-perso">{NEWEST_USER}</span> !
    Résultat : Bienvenue à notre petit nouveau Domeuniz584458 !



    CSS à rajouter (dans tous les cas)
    PA > Affichage > Couleurs > Feuille de style CSS

    Code:
    /* phrases perso QEEL */
    .qeel-p-perso {
        font-size: 0; /* on masque le texte de base */
    }

    .qeel-p-perso strong {
        font-size: 12px; /* modifier avec taille de police du reste du texte */
    }

    /* fin phrases perso QEEL*/

    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 : je sélectionne la balise strong
      Code:
      strong { }

    • Sélectionner une classe : je sélectionne la balise avec la classe msg
      Code:
      .msg { }

    • Sélecteur de descendance : je sélectionne la balise strong à l'intérieur de la classe msg
      Code:
      .msg strong { }



    Regardons dans le HTML


    Quand j'écris dans mon template {TOTAL_POSTS}, voici ce qu'il y a ensuite dans le HTML de ma page :
    Code:
    Nos membres ont posté un total de <strong>55</strong> messages

    On peut voir que le nombre (la valeur qui nous intéresse) est dans une balise strong. Cela signifie qu'avec du CSS, on peut la modifier !

    Pour changer ça, je vais commencer par mettre ma variable dans une classe, comme ça je vais pouvoir changer exclusivement cette phrase là avec mon CSS !

    Je mets une classe "test" (pour l'instant on l'appelle test) autour de ma variable :
    Code:
    <span class="test">{TOTAL_POSTS}</span>

    Le HTML ressemblera à ça :
    Code:
    <span class="test">Nos membres ont posté un total de <strong>55</strong> messages</span>

    Si je veux seulement sélectionner le nombre, pour par exemple l'écrire en rouge, dans mon CSS je mets ceci :
    Code:
    .test strong { color: red; }
    C'est à dire "sélectionne la balise strong dans .test et met le texte en rouge" :)

    Résultat => Nos membres ont posté un total de 55 messages

    Maintenant, je veux mettre le texte de la phrase en bleu, et juste le nombre en rouge. Le HTML reste le même, mais le CSS deviens :
    Code:
    .test { color: blue; }

    .test strong { color: red; }

    Résultat => Nos membres ont posté un total de 55 messages

    Trichons un peu


    Bien maintenant, on sait qu'on modifier en séparé le texte de la phrase et le nombre qui nous intéresse vraiment !

    L'astuce est purement visuelle, elle consiste à mettre la taille du texte à 0 (pour qu'il ne soit plus visible), et ensuite on remet la valeur normale au nombre :)
    Comme ça, les gens ne voient que le nombre apparaître Wink

    Ici, je vais faire une démonstration en mettant le texte à 3px au lieu de 0  :

    Le HTML :
    Code:
    <span class="test">{TOTAL_POSTS}</span>

    Dans le CSS je commence par tout mettre à 3px :
    Code:
    .test { font-size: 3px }

    Résultat : Nos membres ont posté un total de 55 messages

    Je rajoute cette ligne là pour remettre la taille normale au nombre dans la balise strong :
    Code:
    .test strong { font-size: 12px }

    Résultat : Nos membres ont posté un total de 55 messages

    Maintenant, plus qu'à remplacer cette histoire de 3 pixels par 0 (comme ça on ne voit plus du tout l'ancien texte), et seul le nombre apparaît.

    Une fois qu'on a plus que le nombre, il suffit de rajouter du texte autour, et le tour est joué :)

    HTML :
    Code:
    Les pirates ont envoyé <span class="qeel-p-perso">{TOTAL_POSTS}</span> missives.

    CSS :
    Code:
    /* phrases perso QEEL */
    .qeel-p-perso {
        font-size: 0; /* on masque le texte de base */
    }

    .qeel-p-perso strong {
        font-size: 12px; /* modifier avec taille de police du reste du texte */
    }

    /* fin phrases perso QEEL*/

    Sur quelles variables peut-on l'utiliser ?

    Ce code fonctionne que pour les variables où le contenu est simple (même si avec un peu d'inventivité on peut jouer avec d'autres phrases) et où le contenu est mis en avant en gras, ou avec un lien.

    Les 3 plus simples sont celles ci :
    Code:
    {TOTAL_USERS}
    {TOTAL_POSTS}
    {NEWEST_USER}

    Pour les plus avancés:
    En fouillant un peu plus loin avec d'autres variables, on peut aussi jouer avec juste du CSS, sans javascript. Par exemple la variable affichant les membres connectés :
    Avant :


    Après :


    Si on veut mettre une séparation différente à la place des virgules :


    => Le concept est exactement le même qu'avant, sauf qu'au lieu de remettre la taille sur les balises strong on va le faire sur les liens, donc les balises a.
    => Ensuite, il faut rajouter une  séparation, on utilise les :after. On va mettre un caractère en CSS avec :after sur chaque lien. Puis, on le retire sur le dernier élément avec un :last-of-type.

    Voici ce que donne le HTML :
    Code:
    <span class="qeel-p-logged-in">{LOGGED_IN_USER_LIST}</span>

    Et le CSS :
    Code:
    .qeel-p-logged-in {
        font-size: 0; /* on masque le texte de base */
    }

    .qeel-p-logged-in a {
        font-size: 12px; /* modifier avec taille de police du reste du texte */
    }


    Comme ça, on remet à la bonne taille les balises a :)

    Puis on ajoute la séparation :
    Code:
    .qeel-p-logged-in a:not(:last-of-type):after {
        content: ",";
        margin-right: 4px;
    }

    Il s'agit d'un exemple pour vous inciter à faire des essais <3

    Mise en pratique !



    Voici ce que l'on va réaliser ensemble :

    La première étape est de faire notre HTML, même avec de fausses données, pour bien placer chaque élément :

    Messages
    5
    Habitants
    3
    Bienvenue à
    Arend



    Le HTML actuel :
    Code:
    <!-- Début blocs statistiques-->
    <div class="qeel-blocs-stat">

      <div class="qeel-bloc bloc-mess">
        <div class="qeel-bloc-titre">Messages</div>
        <div class="qeel-p-perso">5</div>
      </div>
      
      <div class="qeel-bloc bloc-members">
        <div class="qeel-bloc-titre">Habitants</div>
        <div class="qeel-p-perso">3</div>
      </div>
      
      <div class="qeel-bloc bloc-welcome">
        <div class="qeel-bloc-titre">Bienvenue à</div>
        <div class="qeel-p-perso">Arend</div>
      </div>
      
    </div>
    <!-- Fin blocs statistiques -->

    Le CSS associé :
    Code:
    /* Début bloc stat QEEL */
    .qeel-blocs-stat {
      text-align: center;
      line-height: 1.5;
    }

    /* Style pour un bloc */
    .qeel-bloc {
      display: inline-block;
      width: 150px;
      padding: 35px 10px;  
      font-family: Consolas, Arial, sans-serif;
      font-size: 14px;
      color: #fff;
    }

    /* Espace entre chaque bloc */
    .qeel-bloc + .qeel-bloc {
      margin-left: 5px;
    }

     /* Couleur de fond pour chaque bloc */
    .bloc-mess      { background: #5BD0CB; }
    .bloc-members { background: #E2708F; }
    .bloc-welcome { background: #6FC89B; }

    /* Nombre mis en avant */
    .qeel-p-perso {
      font-size: 25px;
    }
    /* Fin bloc stat QEEL */


    Maintenant, je remplace les contenus par les bonnes variables :
    Code:
    <div class="qeel-bloc bloc-mess">
        <div class="qeel-bloc-titre">Messages</div>
        <div class="qeel-p-perso">{TOTAL_POSTS}</div>
    </div>

    <div class="qeel-bloc bloc-members">
        <div class="qeel-bloc-titre">Habitants</div>
        <div class="qeel-p-perso">{TOTAL_USERS}</div>
    </div>

    <div class="qeel-bloc bloc-welcome">
        <div class="qeel-bloc-titre">Bienvenue à</div>
        <div class="qeel-p-perso">{NEWEST_USER}</div>
    </div>

    Et le résultat est...hum...moche XD ?

    Messages
    Nos membres ont posté un total de 937571 messages
    Habitants
    Nous avons 23610 membres enregistrés
    Bienvenue à
    L'utilisateur enregistré le plus récent est Domeuniz584458


    On a déjà mis les bonnes classes autour de nos variables, on a plus qu'à remplacer ce CSS là :
    Code:
    /* Nombre mis en avant */
    .qeel-p-perso {
      font-size: 25px;
    }

    Par celui de notre tuto :
    Code:
    /* phrases perso QEEL */
    .qeel-p-perso {
        font-size: 0; /* on masque le texte de base */
    }

    .qeel-p-perso strong {
        font-size: 25px; /* taille de police du reste du texte */
    }

    /* fin phrases perso QEEL*/

    Messages
    Nos membres ont posté un total de 937571 messages
    Habitants
    Nous avons 23610 membres enregistrés
    Bienvenue à
    L'utilisateur enregistré le plus récent est Domeuniz584458



    On peut ensuite continuer à styliser comme on veut, mais voici un exemple d'application direct du tutoriel :)

    Petit rappel :
    Merci à Nyo de m'avoir signalé un cas pratique :
    @NyoTheNeko a écrit:Pour ceux qui gardent une autre div autour de l'ensemble de leur QEEL (comme la native gensmall), de vérifier qu'il n'y ait pas d'autre changement de texte dessus, comme par exemple le letter-spacing. Car avec le letter-spacing, on peut effectivement ne plus voir le texte, mais avoir tout de même un large espace. Exemple:

    Les pirates ont envoyé Nos membres ont posté un total de 55 messages missives.
    Code:
    <style type="text/css">.nyo_test { letter-spacing: 3px; font-size: 0px; } .nyo_test strong { font-size: 15px; }</style>

    Les pirates ont envoyé <span class="nyo_test">Nos membres ont posté un total de <strong>55</strong> messages</span> missives.


    J'espère que ce tutoriel pourra vous aider à modifier peut-être plus facilement vos phrases, et vous donner des idées pour d'autres modifications !

    J'essayerai de suivre les réponses à ce tutoriel si vous avez des questions. Si vous rencontrez des problèmes, il faut aller dans la section Problème avec mon code.

    Merci d'avoir lu ce tuto ♥


    Dernière édition par Nihil Scar Winspeare le Dim 31 Jan 2016 - 18:10, édité 1 fois




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    Rozenbrez
    FémininAge : 25Messages : 1177

    le Mar 29 Déc 2015 - 15:12

    Et bien ! Qu'elle astuce fort sympathique. Je la trouve plus à porté pour un néophyte en codage, que les js à mettre en place, où si tu te trompe c'est la cata. xD

    Merci pour ton travail qui va aider beaucoup de monde.



    Shaneliae
    FémininAge : 20Messages : 667

    le Jeu 31 Déc 2015 - 2:49

    Petit tuto sur une chose qui paraît tellement évidente qu'on y pense pas x)
    Vraiment sympa comme astuce en tous cas ! Tiens, comment on fait pour remplace par un autre symbole dans la liste ? :0 (c'est sûrement tout bête aussi x) )



    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Sam 2 Jan 2016 - 17:23

    Coucou Nini! :hug:
    Maintenant que les LS et les anciens tutos sont tout bien classés, je me penche enfin sur ce tuto! <3

    Donc j'ai querelleuse remarques. Comme Shane le remarque, tu parles de remplacer les utilisateurs enregistrés. Est-ce que tu peux aussi donner les codes pour ces derniers, vu que les gens vont se poser la question? ^^ (Tu utilises un :after et tu le retires jsute au last-of-type? ^^)

    Aussi, une autre remarque que je ferais, c'est pour ceux qui gardent une autre div autour de l'ensemble de leur QEEL (comme la native gensmall), de vérifier qu'il n'y ait pas d'autre changement de texte dessus, comme par exemple le letter-spacing. Car avec le letter-spacing, on peut effectivement ne plus voir le texte, mais avoir tout de même un large espace. Exemple:



    Les pirates ont envoyé Nos membres ont posté un total de 55 messages missives.

    Code:
    <style type="text/css">.nyo_test { letter-spacing: 3px; font-size: 0px; } .nyo_test strong { font-size: 15px; }</style>

    Les pirates ont envoyé <span class="nyo_test">Nos membres ont posté un total de <strong>55</strong> messages</span> missives.

    Donc juste ajouter une petite mise en garde, pour qu'on pense à regarder de ce côté, ce serait pas mal ^^

    Voilà, une fois que tu as modifié ça, je te classe ton tuto! :hug:



    Nihil Scar Winspeare
    Messages : 3942

    le Sam 16 Jan 2016 - 17:23

    Hello

    Je poste juste pour dire que ces temps ci je ne suis pas trop là, je ne peux donc pas faire les modifications demandées :hug:

    Bisous bisous <3




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Sam 16 Jan 2016 - 19:24

    Fais-les quand tu auras le temps et dis-moi quand c'est le cas. Je peux attendre, tu sais! ♥



    Nihil Scar Winspeare
    Messages : 3942

    le Dim 31 Jan 2016 - 18:12

    Hello !

    Me revoilà :)

    J'ai rajouté un spoiler avec une explication rapide pour la partie "Membres connectés", et à la fin du tuto j'ai rajouté une petite mise en garde en te citant Nyo <3

    J'espère que tout est bon ♡




    Merci Maféliquement <3
    Viens faire un tour sur la chatbox
    Présence fortement réduite :toto:
    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Dim 31 Jan 2016 - 18:27

    C'est parfait! ^w^
    Je classe dès que possible! :hug:



    Cheshire Cat
    FémininAge : 19Messages : 648

    le Dim 22 Mai 2016 - 22:07

    Très bon tutoriel, merci beaucoup Nihil ♥



    Toxinou
    FémininAge : 25Messages : 16

    le Lun 23 Mai 2016 - 20:07

    Super sympas comme astuce !
    Contenu sponsorisé

    Aujourd'hui à 0:58


      La date/heure actuelle est Ven 9 Déc 2016 - 0:58