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.
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.
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.
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> !
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; }
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:
- 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 989955 messages
Habitants
Nous avons 27095 membres enregistrés
Bienvenue à
L'utilisateur enregistré le plus récent est https://www.never-utopia.com/u27097
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 989955 messages
Habitants
Nous avons 27095 membres enregistrés
Bienvenue à
L'utilisateur enregistré le plus récent est https://www.never-utopia.com/u27097
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 :
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 Sam 25 Mar 2017 - 20:46, édité 2 fois