Pseudo mi-couleur

[Valkoor]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : 2015-04-08
Lien du forum : http://mythworld-v2.forumactif.com

Description du problème

Salut à tous.
Il y a un code que j'ai modifié pour avoir deux couleur,mais toutes fois je voudrais que la lettre du millieu lorsque le nombre de lettres est impaire soit des deux couleurs. Est-ce posibble, si oui dites-le moi.

codage:

merci o/

[no_way]

Bonjour est-ce ce résultat que vous recherchez (séparation verticale:voir) ?

Si oui sachez que vous serez obligé de passer par une police monospace ...
Là dans mon essai il s'agit de la police "Ubuntu Mono"

[Valkoor]

en fait je cherchais plutôt un effet de transition entre les deux, style dégradé ^^, mais merci quand même

[Invité]

Bonsoir,

Vous pouvez vous aider de ceci :
https://forum.forumactif.com/t345726-ajouter-un-effet-de-transition-sur-les-liens

Amicalement,
Zoch

[no_way]

en fait je cherchais plutôt un effet de transition entre les deux, style dégradé ^^, mais merci quand même

Ainsi, si je comprends bien, si le pseudo commence par la couleur bleue et finit par la couleur rouge, la lettre du milieu devrait être violette ?

[Valkoor]

oui ^^ je voudrais un code pour que je puisse faire un dégradé d'une couleur à une autre sans pour autant devoir mettre une couleur différente a chaque lettre.

ce que je cherche a faire c'est ça (pour ceux qui sont visuel):

[no_way]

Aaaah mais c'est pas pareil un dégradé, votre titre m'a induit en erreur, regardez ici : essai
En deuxième ligne, il est possible de faire une couleur unie pour chaque lettre se dégradant de manière assez propre.

Voici le code créé:

Code:

function degrade_pseudo(pseudo,couleurA,couleurB){
        /*canaux couleur couleurA*/
        var canal_R,canal_G,canal_B;
        /*différence canaux couleur*/
        var diff_canal_R,diff_canal_G,diff_canal_B;
        if(couleurA.substr(1).length==3){
        canal_R=parseInt(couleurA.substr(1,1)+couleurA.substr(1,1),16);
        canal_G=parseInt(couleurA.substr(2,1)+couleurA.substr(2,1),16);
        canal_B=parseInt(couleurA.substr(3,1)+couleurA.substr(3,1),16);
        diff_canal_R=parseInt(couleurA.substr(1,1)+couleurA.substr(1,1),16)-parseInt(couleurB.substr(1,1)+couleurB.substr(1,1),16);
        diff_canal_G=parseInt(couleurA.substr(2,1)+couleurA.substr(2,1),16)-parseInt(couleurB.substr(2,1)+couleurB.substr(2,1),16);
        diff_canal_B=parseInt(couleurA.substr(3,1)+couleurA.substr(3,1),16)-parseInt(couleurB.substr(3,1)+couleurB.substr(3,1),16);
        }else if(couleurA.substr(1).length==6){
        canal_R=parseInt(couleurA.substr(1,2),16);
        canal_G=parseInt(couleurA.substr(3,2),16);
        canal_B=parseInt(couleurA.substr(5,2),16);
        diff_canal_R=parseInt(couleurA.substr(1,2),16)-parseInt(couleurB.substr(1,2),16);
        diff_canal_G=parseInt(couleurA.substr(3,2),16)-parseInt(couleurB.substr(3,2),16);
        diff_canal_B=parseInt(couleurA.substr(5,2),16)-parseInt(couleurB.substr(5,2),16);
        }
        /*création du dégradé du pseudo*/
        var degrade='';
        for(var a in pseudo){
        degrade+='<span style="color:rgb('+parseInt((canal_R-(diff_canal_R/(pseudo.length-1))*a))+','+parseInt((canal_G-(diff_canal_G/(pseudo.length-1))*a))+','+parseInt((canal_B-(diff_canal_B/(pseudo.length-1))*a))+')">'+pseudo[a]+'</span>';
        }
        return degrade;
        };

Puis pour l'utiliser sur vos pseudos, utilisez le code suivant:

Code:

$(function(){
$(".post .name a[href^='/u']").each(function(){
$(this).html(degrade_pseudo($(this).text(),"couleur_format_hexadecimal_de_depart","couleur_format_hexadecimal_de_fin"));
});
});

A vous de renseigner "couleur_format_hexadecimal_de_depart" et "couleur_format_hexadecimal_de_fin".
Pour le moment je ne détaille pas plus, j'attends de savoir précisément ce que vous prévoyez de faire avec ces dégradés afin de remanier ou/et expliquer.
Désirez-vous des dégradés différents selon l'utilisateur ou autre...

[Valkoor]

Oui c'est en plein cela que je voulais

Je vais utiliser ce dégradés pour illustrer de quel groupe sont issu les hybrides (exemple d'un hybride druides//vampire: valkoor (en dégradés xP)

donc le pseudo apparaitra bleu et rouge puisqu'il est druide et vampire.

Je ne sais pas si vous comprenez, mais bon. J'ai 4 groupes, soit vampire/druides/animorphe/humain. Il y a donc douze possibilité de dégradés. Donc oui j'aimerais des dégradés différent pour chaque utilisateur puisque les hybrides ne seront pas tous issu des même créatures.

Merci de m'aider c'est très aprécié <3

Amicalement, Valkoor

[no_way]

Service , par contre j'espère que vous n'aurez pas trop de membres dans chaque groupe !
Dirigez-vous dans votre panneau d'administration pour créer un nouveau javascript, choisissez un titre explicite et cochez "Sur toutes les pages", puis copiez-collez le code suivant:

Code:

var degrade={
        "creer":function(texte,couleurA,couleurB){
        /*canaux couleur couleurA*/
        var canal_R,canal_G,canal_B;
        /*différence canaux couleur*/
        var diff_canal_R,diff_canal_G,diff_canal_B;
        if(couleurA.substr(1).length==3){
        canal_R=parseInt(couleurA.substr(1,1)+couleurA.substr(1,1),16);
        canal_G=parseInt(couleurA.substr(2,1)+couleurA.substr(2,1),16);
        canal_B=parseInt(couleurA.substr(3,1)+couleurA.substr(3,1),16);
        diff_canal_R=parseInt(couleurA.substr(1,1)+couleurA.substr(1,1),16)-parseInt(couleurB.substr(1,1)+couleurB.substr(1,1),16);
        diff_canal_G=parseInt(couleurA.substr(2,1)+couleurA.substr(2,1),16)-parseInt(couleurB.substr(2,1)+couleurB.substr(2,1),16);
        diff_canal_B=parseInt(couleurA.substr(3,1)+couleurA.substr(3,1),16)-parseInt(couleurB.substr(3,1)+couleurB.substr(3,1),16);
        }else if(couleurA.substr(1).length==6){
        canal_R=parseInt(couleurA.substr(1,2),16);
        canal_G=parseInt(couleurA.substr(3,2),16);
        canal_B=parseInt(couleurA.substr(5,2),16);
        diff_canal_R=parseInt(couleurA.substr(1,2),16)-parseInt(couleurB.substr(1,2),16);
        diff_canal_G=parseInt(couleurA.substr(3,2),16)-parseInt(couleurB.substr(3,2),16);
        diff_canal_B=parseInt(couleurA.substr(5,2),16)-parseInt(couleurB.substr(5,2),16);
        }else{return false}
        /*création du dégradé du texte*/
        var degrade='';
        for(var a in texte){
        degrade+='<span style="color:rgb('+parseInt((canal_R-(diff_canal_R/(texte.length-1))*a))+','+parseInt((canal_G-(diff_canal_G/(texte.length-1))*a))+','+parseInt((canal_B-(diff_canal_B/(texte.length-1))*a))+')">'+texte[a]+'</span>';
        }
        return degrade;
        }
        };       
        $(function(){
        /*membres groupes*/
        var groupes={
            "druide-vampire":{
                  "membres":[1],
                  "couleur_depart":"#00f",
                  "couleur_fin":"#f00"}
            ,
            "autre_groupe":{
                  "membres":[2],
                  "couleur_depart":"#d00",
                  "couleur_fin":"#0f0"}
         };
        for(var a in groupes){
        for(var b in groupes[a].membres){
        $("a[href='/u"+groupes[a].membres[b]+"']").each(function(){
        var c=degrade.creer($(this).text(),groupes[a].couleur_depart,groupes[a].couleur_fin);
        c&&$(this).html(c)
        })}
        }
        });

Une fois ceci fait cherchez dans le script copié-collé la partie suivante:

Code:

/*membres groupes*/
        var groupes={
            "druide-vampire":{
                  "membres":[1],
                  "couleur_depart":"#00f",
                  "couleur_fin":"#f00"}
            ,
            "autre_groupe":{
                  "membres":[2],
                  "couleur_depart":"#d00",
                  "couleur_fin":"#0f0"}
         };

C'est dans cette partie que vous pourrez indiquer l'identifiant de chaque utilisateur et le dégradé pour chaque groupe.
J'utilise ici la notation JSON, voici une explication pour chaque niveau:

Code:

var groupes={...}

représente l'objet "groupes".

Code:

"druide-vampire":{...}

représente le groupe "druide-vampire", remarquez qu'il y a toujours une virgule afin de séparer les éléments.

Puis nous avons les propriétés et leur valeur pour chaque groupe:

1. "membres": c'est un tableau, les identifiants sont séparés par une virgule puis encadrés par des crochets.
2. "couleur_depart":La couleur de départ au format hexadecimal.
3. "couleur_fin":La couleur de fin au format hexadecimal.

Si vous désirez un exemple afin de mieux comprendre, indiquez moi 2 membres pour chaque groupe ainsi que le dégradé désiré, je vous ferai un bout pour que vous cerniez mes propos.

[Valkoor]

J'ai essayer ce que vous m'avez donner et cela ne fonctionne pas...

Pourriez vous m'expliquer pour voir si j'ai tout bien fait ou pas.


Les deux pseudos: Valkoor, Cristal
Le groupe Druides-Vampire
Couleur: #8C00FF à #C70000

[no_way]

"membres": c'est un tableau, les identifiants sont séparés par une virgule puis encadrés par des crochets.

Il s’agit des identifiants et non des pseudos, ce sont toujours des valeurs numériques, pour les connaitre, allez sur le profil d'un membre, puis regardez dans votre barre d'adresse, cette dernière doit se terminer par:

Code:

/u(valeur numérique)

c'est cette dernière qu'il vous faut indiquer .

Donc là si je vais sur le forum de votre profil votre identifiant est 3 et celui de Cristal est 2.

[Valkoor]

ca a marcher <3
merci mille fois no_way de ton aide

parcontre je voudrais que ma couleur de départ (bleu) s'étende un petit peu plus ^^ et mettre le pseudo en gras, comment je fais ?

[no_way]

Pour mettre en gras, remplace cette portion:

Code:

c&&$(this).html(c)

par:

Code:

c&&$(this).html('<strong>'+c+'</strong>')

Tu ne peux pas faire un dégradé non linéaire, le bleu se dégradera obligatoirement de façon linéaire jusqu'au rouge avec la fonction actuelle.

Je peux te proposer malgré tout 2 possibilités:
- Réécriture de la fonction dégradé afin qu'elle accepte plusieurs couleurs dans le dégradé.
- Maintien de la fonction, mais on ne commence à dégrader qu'à partir de la moitié du pseudo.

Si tu souhaites employer une des deux possibilités, je te laisserai essayer de coder par toi même.

Si tu pouvais mettre un titre plus explicite à ton sujet, par exemple:
pseudo en dégradé
Ce serait mieux et faciliterait la recherche aux membres qui pourraient être intéressés.

[MlleAlys]

..	Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif