Idea Les Râleuses sont absentes.. Idea
Le forum est en vacances mais toutes nos ressources restent disponibles. (En savoir +)

Aller en bas
Mäven
Mäven
Râleuse (Admin)
Informations : Absente / peu présente le soir à partir de 18h30
----
Idea Viens papoter avec nous sur le discord

Messages : 4323
https://tambouille-raleuses.forumactif.com/

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

le Sam 18 Mai 2019 - 12:45

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 Smile Mais d'abord, voyons de quoi je parle :
Pseudo d'un membre en dégradé ou avec plusieurs couleurs Pseudo11
ou
Pseudo d'un membre en dégradé ou avec plusieurs couleurs Pseudo12

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

Première méthode : en CSS

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"]

Deuxième méthode : en javascript

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.

Une légère modification de templates

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

PhpBB2

Aucune modification à faire

PhpBB3

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>

PunBB

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>

Invision & ModernBB

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>

On prépare le pseudo en dégradé ou couleurs multiples

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>

On prépare le javascript

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

Exclamation 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>');

Idea 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>');

On applique le javascript sur le forum

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 Smile

Pour appliquer des dégradés (ou couleurs multiples) sur plusieurs pseudos

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.




Dernière édition par Mäven le Lun 23 Sep 2019 - 18:35, édité 3 fois
Fleur'
Fleur'
Informations : J'essaie de passer une fois par semaine
Messages : 450
http://ecofriends.forumactif.com/

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

le Sam 18 Mai 2019 - 13:31
Merci pour le tuto Very Happy Je vais tester ca!
Fleur'
Fleur'
Informations : J'essaie de passer une fois par semaine
Messages : 450
http://ecofriends.forumactif.com/

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

le Lun 20 Mai 2019 - 13:13
Désolée pour le double post hihi

On peut copier plusieurs codes différents dans la Feuille de style CSS ? Vu que j'en ai déjà un pour la page d'accueil?
Et si on veut en faire pour plusieurs membres, on recopie du coup à chaque fois le code pour chaque membre?

Bon ceci dit, j'ai essayé la première méthode, et évidemment, ça ne marche pas lol *quiche du jour bonjour*

edit : bon j'ai réussi en javascript mais pas en dégradé
Pêpêche
Pêpêche
Mascotte
Messages : 4860

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

le Lun 20 Mai 2019 - 13:58
coucou Smile

Tu peux nous montrer ce que tu avais essayé de faire avec la méthode CSS ? Smile

_________________
Fleur'
Fleur'
Informations : J'essaie de passer une fois par semaine
Messages : 450
http://ecofriends.forumactif.com/

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

le Mar 21 Mai 2019 - 12:22
Il va falloir que je recherche ça, j'ai tout enlevé du coup lol
Pêpêche
Pêpêche
Mascotte
Messages : 4860

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

le Jeu 23 Mai 2019 - 9:11
Coucou

Pas de souci, on patiente Smile Mais ça nous permettra de savoir s'il y a un truc qui n'est pas clair dans le tuto ^^

_________________
Fleur'
Fleur'
Informations : J'essaie de passer une fois par semaine
Messages : 450
http://ecofriends.forumactif.com/

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

le Sam 1 Juin 2019 - 12:43
Je crois que j'ai trouvé mon erreur (oui moi lol). Si j'ai bien compris, dans le css, il faut séparer chaque code donc par exemple créer une ligne /** DEGRADE **/ ?
Pêpêche
Pêpêche
Mascotte
Messages : 4860

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

le Sam 1 Juin 2019 - 13:14
Coucou Smile

Voici un exemple avec plusieurs pseudos :

Code:

 a[href="/u1"] {
  background-image: linear-gradient(155deg, #960317, #FA3C55);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
 }
 
 a[href="/u4"] {
  background-image: linear-gradient(30deg, #f16e00, #fff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
 }
 
 a[href="/u5"] {
  background-image: linear-gradient(90deg, #33FF4C, #15541D);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
 }

http://miettes.lebonforum.com/memberlist
(Miettes, Tambouille et Pêpeche)

Idea Tu es sous chrome ? Dans ce cas, il faut modifier ça :
Code:
par ça :
Code:
@supports (background-clip: text) or (-webkit-background-clip: text)  {

Chrome ne connait pas "background-clip", du coup, il ne lisait pas la CSS. En revanche, il connait "-webkit-background-clip" (qui fait la même chose mais pour Chrome). Si tu changes ça, ça fonctionnera sur chrome Smile

Tiens nous au courant ^^

_________________
Fleur'
Fleur'
Informations : J'essaie de passer une fois par semaine
Messages : 450
http://ecofriends.forumactif.com/

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

le Sam 1 Juin 2019 - 13:18
Du coup j'ai tout dans une feuille javascript et ça marche bien donc je laisse comme ça Smile Mais merci Smile
Pêpêche
Pêpêche
Mascotte
Messages : 4860

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

le Sam 1 Juin 2019 - 13:26
D'accodac =) mais au moins, ceux qui utilisent chrome ont l'astuce :p

_________________
Mäven
Mäven
Râleuse (Admin)
Informations : Absente / peu présente le soir à partir de 18h30
----
Idea Viens papoter avec nous sur le discord

Messages : 4323
https://tambouille-raleuses.forumactif.com/

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

le Sam 1 Juin 2019 - 14:43
J'ai modifié le premier message pour ajouter la variante sur chrome =)

_________________
Mäven
Mäven
Râleuse (Admin)
Informations : Absente / peu présente le soir à partir de 18h30
----
Idea Viens papoter avec nous sur le discord

Messages : 4323
https://tambouille-raleuses.forumactif.com/

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

le Lun 23 Sep 2019 - 18:37
Une mise à jour du tutoriel a été effectuée : avec les avatars cliquables dans les messages, ils étaient aussi remplacés.... La version avec Javascript a donc été mise à jour avec un tout tout petit changement pour contrer ça Wink

_________________
Contenu sponsorisé

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

Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Post-It des Râleuses