Pseudo mi-couleur

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Résolu Pseudo mi-couleur

Message par Valkoor le Mer 8 Avr 2015 - 21:17

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:
Code:
$(function(){
  $('a[href="/u1"] span strong').html('<font style="color:black">Val</font><font style="color:red">koor</font>');
});

merci o/

Valkoor
Nouveau membre

Messages : 7
Inscrit(e) le : 28/03/2013

http://mythworld.forum-canada.com/
Valkoor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pseudo mi-couleur

Message par no_way le Lun 13 Avr 2015 - 8:18

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"

no_way
Aidactif
Aidactif

Messages : 1743
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pseudo mi-couleur

Message par Valkoor le Lun 13 Avr 2015 - 20:05

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

Valkoor
Nouveau membre

Messages : 7
Inscrit(e) le : 28/03/2013

http://mythworld.forum-canada.com/
Valkoor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pseudo mi-couleur

Message par Zoch le Lun 13 Avr 2015 - 21:10

Bonsoir,

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

Amicalement,
Zoch Smile

Zoch
****

Masculin
Messages : 241
Inscrit(e) le : 17/09/2014

Zoch a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pseudo mi-couleur

Message par no_way le Mar 14 Avr 2015 - 16:50

@Valkoor a écrit: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 ?

no_way
Aidactif
Aidactif

Messages : 1743
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Pseudo mi-couleur

Message par Valkoor le Mer 15 Avr 2015 - 5:13

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


Valkoor
Nouveau membre

Messages : 7
Inscrit(e) le : 28/03/2013

http://mythworld.forum-canada.com/
Valkoor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pseudo mi-couleur

Message par no_way le Mer 15 Avr 2015 - 7:14

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

no_way
Aidactif
Aidactif

Messages : 1743
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pseudo mi-couleur

Message par Valkoor le Mer 15 Avr 2015 - 17:59

Oui c'est en plein cela que je voulais Smile

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

Valkoor
Nouveau membre

Messages : 7
Inscrit(e) le : 28/03/2013

http://mythworld.forum-canada.com/
Valkoor a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Pseudo mi-couleur

Message par no_way le Jeu 16 Avr 2015 - 10:46

Service Wink, 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.

no_way
Aidactif
Aidactif

Messages : 1743
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pseudo mi-couleur

Message par Valkoor le Jeu 16 Avr 2015 - 21:33

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

Valkoor
Nouveau membre

Messages : 7
Inscrit(e) le : 28/03/2013

http://mythworld.forum-canada.com/
Valkoor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pseudo mi-couleur

Message par no_way le Ven 17 Avr 2015 - 6:26

@no_way a écrit:"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 Smile.

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

no_way
Aidactif
Aidactif

Messages : 1743
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pseudo mi-couleur

Message par Valkoor le Ven 17 Avr 2015 - 18:46

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 ? Smile

Valkoor
Nouveau membre

Messages : 7
Inscrit(e) le : 28/03/2013

http://mythworld.forum-canada.com/
Valkoor a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pseudo mi-couleur

Message par no_way le Sam 18 Avr 2015 - 6:22

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.

no_way
Aidactif
Aidactif

Messages : 1743
Inscrit(e) le : 26/03/2010

no_way a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pseudo mi-couleur

Message par MlleAlys le Jeu 23 Avr 2015 - 19:13

..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 résolu
  • 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 Smile

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


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