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.


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 :

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 27028 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é 989668 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 https://www.never-utopia.com/u27030 !

---

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

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:

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 :




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 ?



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*/

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



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 ♥

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.

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) )

Coucou Nini!
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!

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

Bisous bisous <3

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

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 ♡

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

Très bon tutoriel, merci beaucoup Nihil ♥

Super sympas comme astuce !