Pseudo d'un membre en dégradé ou avec plusieurs couleurs

Bonjour à toi !

On peut voir sur ForumActif des pseudos en dégradé ou avec plusieurs couleurs. Aujourd'hui je te montre comment le faire Mais d'abord, voyons de quoi je parle :

Ce tutoriel n'est pas adapté à la version AwesomeBB puisque les pseudos ne sont pas cliquables sur l'index...


Ici, on ne peut faire que les dégradés, pas les textes en couleurs multiples. Pour mettre une couleur par lettre, réfère toi à la méthode javascript.

Voilà le code à coller dans PA > Affichage > Couleurs > Feuille de style CSS :

Code:

@supports (background-clip: text) or (-webkit-background-clip: text) {
 a[href="/u2"] {
  background-image: linear-gradient(155deg, #960317, #FA3C55);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
 }
}


Pour créer le dégradé, je t'invite à lire [ce tutoriel], ensuite il suffit de l'appliquer à la place de ceci :

Code:

background-image: linear-gradient(155deg, #960317, #FA3C55);

Pour appliquer au bon pseudo, il faut modifier le a[href="/u2"] par le bon lien : pour cela, quand on clique sur le pseudo pour atteindre le profil, on récupère le "uX" avec X une valeur. Par exemple ici : mon url est /u2.

Code:

a[href="/u2"]

Si le but n'est de faire que des dégradés, il est préférable d'utiliser la version CSS qui consommera moins les ressources du navigateur.


Afin de pouvoir cibler mieux le pseudo, à cause des avatars cliquables, on va devoir modifier très légèrement les templates.
Je pars de templates non modifiés précédemment.
N'oublies pas de valider et publier les templates après chaque modifications


Aucune modification à faire


Dans le template INDEX_BODY , il faut encadrer chaque ligne qui suit pas un "span" :

Code:

{LOGGED_IN_USER_LIST}
{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br />
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

Ce qui donne :

Code:

  <span>{LOGGED_IN_USER_LIST}</span>

  <span>{L_ONLINE_USERS}</span>
  <span>{L_CONNECTED_MEMBERS}</span><br />
  <span>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</span>

Et dans le template VIEWTOPIC_BODY , il faut remplacer :

Code:

<strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>

par :

Code:

<span><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong></span>

Dans le template INDEX_BODY , il faut encadrer chaque ligne qui suit pas un "span" :

Code:

{LOGGED_IN_USER_LIST}
{L_ONLINE_USERS}
{L_CONNECTED_MEMBERS}<br />
{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

Ce qui donne :

Code:

  <span>{LOGGED_IN_USER_LIST}</span>

  <span>{L_ONLINE_USERS}</span>
  <span>{L_CONNECTED_MEMBERS}</span><br />
  <span>{L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</span>

Et dans le template VIEWTOPIC_BODY , il faut remplacer :

Code:

<h4 class="username">{postrow.displayed.POSTER_NAME}</h4>

par :

Code:

<h4 class="username"><span>{postrow.displayed.POSTER_NAME}</span></h4>

Ici seul le template VIEXTOPIC_BODY est à modifier. Il faut mettre dans un span :

Code:

{postrow.displayed.POSTER_NAME}

Ce qui donne :

Code:

 <span>{postrow.displayed.POSTER_NAME}</span>

Pour appliquer un dégradé ou des couleurs par lettre, on va créer manuellement en HTML.
pour l'exemple je voudrai une lettre de chaque couleur, je vais entourer chaque lettre de mon pseudo par la balise "span" avec une couleur. Un exemple vaut mieux que mille mots.

Mäven

Code:


<span style="color:red">M</span><span style="color:blue">ä</span><span style="color:green">v</span><span style="color:orange">e</span><span style="color:black">n</span>

Tout d'abord, on va cibler le membre auquel on veut appliquer un dégradé sur le pseudo, on va récupérer l'url qui lui correspond. Pour cela, quand on clique sur le pseudo pour atteindre le profil, on récupère le "uX" avec X une valeur. Par exemple ici : mon url est /u2.

Code:

$('a[href="/u2"]')

Puis on va lui appliquer du HTML, celui préparé précédemment :

Code:

$('a[href="/u2"]').html('
<span style="color:red">M</span><span style="color:blue">ä</span><span style="color:green">v</span><span style="color:orange">e</span><span style="color:black">n</span>');

Avec les avatars cliquables, ça pose un petit souci : l'avatar est remplacé aussi... On doit donc cibler un peu mieux grâce à notre légère modification de tout à l'heure.
On va lui dire "tous les liens /u2 qui sont dans un span qui n'a pas la class postdetail" :

Code:

$('span:not(".postdetails")  a[href="/u2"]').html('
<span style="color:red">M</span><span style="color:blue">ä</span><span style="color:green">v</span><span style="color:orange">e</span><span style="color:black">n</span>');

Pour que ça soit plus facile à lire, tu peux "couper" ton javascript et le mettre sur plusieurs lignes:

Code:

$('span:not(".postdetails") a[href="/u2"]').html('<span style="color:red">M</span>' +
'<span style="color:blue">ä</span>' +
'<span style="color:green">v</span>' +
'<span style="color:orange">e</span>' +
'<span style="color:black">n</span>');

Il est temps d'appliquer tout ça sur le forum : PA > Modules > Gestion des codes javascript > Créer un code javascript
On applique le javascript à toutes les pages, et pour que le code soit lancé au chargement de la page on l'entoure par :

Code:

$(function(){

});

Ce qui nous donne :

Code:

$(function(){
 $('span:not(".postdetails")  a[href="/u2"]').html('<span style="color:red">M</span>' +
'<span style="color:blue">ä</span>' +
'<span style="color:green">v</span>' +
'<span style="color:orange">e</span>' +
'<span style="color:black">n</span>');
});

On enregistre et c'est tout bon


Pour ajouter un dégradé à un second membre, pas besoin de créer un deuxième javascript, on utilise le même.
Par exemple si je veux appliquer 2 couleurs sur le pseudo de Miettes et toutes les couleurs sur le mien je créer le code :

Code:

$('span:not(".postdetails")  a[href="/u1"]').html('<span style="color:red">Miet</span>'+
                      '<span style="color:black">tes</span>');

Et je l'ajoute dans le même javascript :

Code:

$(function(){
$('span:not(".postdetails")  a[href="/u2"]').html('<span style="color:red">M</span>' +
'<span style="color:blue">ä</span>' +
'<span style="color:green">v</span>' +
'<span style="color:orange">e</span>' +
'<span style="color:black">n</span>');

$('span:not(".postdetails")  a[href="/u1"]').html('<span style="color:red">Miet</span>'+
                      '<span style="color:black">tes</span>');
});

En javascript, il faut re-taper le pseudo pour sélectionner les couleurs de chaque lettre.

---

Si tu as la moindre question à ce propos, n'hésite pas à la poser.