Pseudo bicolore

2 participants

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

Résolu Pseudo bicolore

Message par Flibustier Sam 28 Jan 2012 - 18:33

Bonjour,

Cela fait plusieurs jours que je cherche en vain à afficher un pseudo particulier en bicolore et j'ai beau avoir fouillé les tutos et les questions/réponses je n'ai pas trouvé de solution. J'ai donc décidé de m'inscrire afin de pouvoir exposer mon problème.

J'ai trouvé comment faire référence à un pseudo particulier en CSS sur cette page

J'ai donc, dans un premier temps ajouté ceci dans la feuille CSS :

Spoiler:

Mais d'une part cela ne fonctionne pas dans mon CSS (le pseudo en question fait parti d'un groupe) et d'autre part (à ma connaissance) on ne peut changer la couleur que de l'ensemble en CSS (donc pas de bicolore)

Je me suis donc tourné vers le JavaScript et la fonction .replace en me basant sur ce post mais ça ne fonctionne pas non plus, ceci dit je ne connais pas le JS et ma fonction est probablement erronée.

Spoiler:

Y aurait-il une âme charitable capable de me donner un coup de main ?

Merci d'avance


Dernière édition par Flibustier le Dim 29 Jan 2012 - 18:33, édité 1 fois
Flibustier

Flibustier
Nouveau membre

Messages : 3
Inscrit(e) le : 28/01/2012

http://spqr-fourmizzz.forumgratuit.org
Flibustier a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pseudo bicolore

Message par Threax Dim 29 Jan 2012 - 12:20

Bonjour,

Vous pouvez ajouter ce JS :
Code:
$(function() {
  var thispseudo = $('.postprofile a[href="/u12"]').text();
  var pseudofirst = '<span class="firstpart">'+ thispseudo.substr(0, 4) +'</span>';
  var pseudosecond = '<span class="secondpart">'+ thispseudo.substr(4, 8) +'</span>';
  $('.postprofile strong a[href="/u12"]').html(pseudofirst + pseudosecond);
});

Et dans votre CSS :
Code:
.firstpart { color: red; }
.secondpart { color: orange;}

Et voilà le résultat :
Pseudo bicolore Flibus10
Threax

Threax
Membre actif

Masculin
Messages : 17276
Inscrit(e) le : 27/08/2005

http://lesforumsde.forumactif.com
Threax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pseudo bicolore

Message par Flibustier Dim 29 Jan 2012 - 15:50

Merci beaucoup Threax

J'ai légèrement modifié ton script et ton CSS afin que les changements interviennent partout où le pseudo est affiché. Voici mes codes :

JS :
Code:

$(function() {
          var thispseudo = $('a[href="/u12"]').text();
          var pseudofirst = '<span class="firstpart">'+ thispseudo.substr(0, 4) +'</span>';
          var pseudosecond = '<span class="secondpart">'+ thispseudo.substr(4, 4) +'</span>';
          $('a[href="/u12"]').html(pseudofirst + pseudosecond);
        });


CSS :
Code:

.firstpart {
  color: black;
  font-weight : bold;
  display : inline !important;
}
.secondpart {
  color: white;
  font-weight : bold;
  display : inline !important;
}

Problème :
- Dans le JS le "strong" de la dernière ligne étant supprimé l'image de l'avatar est également remplacée
- Le display : inline est nécessaire sinon les 2 parties se trouvent sur 2 lignes différentes dans la colonne "derniers messages" des tables "catégories"). Avec ce inline il reste toutefois un espace entre les 2 parties du pseudo que je n'arrive pas à retirer

Je suis en train de bidouiller pour arriver à résoudre ces 2 problèmes (avec l'aide d'un ami ^^)
En remettant le "strong", l'image de l'avatar revient bien mais de nouveau seul le pseudo dans le postprofile est affecté (ainsi que dans la colonne des derniers messages) Neutral Existe-t-il un moyen de mettre un exclusif ? C'est à dire tous les liens sauf les images ?

Pour l'autre problème j'ai tenté avec un white-space:nowrap sur le dd.lastpost span mais ça ne fonctionne pas sur le pseudo du posteur et ça agit par contre sur le titre du sujet du dernier post ^^

Une idée ?


Dernière édition par Flibustier le Dim 29 Jan 2012 - 18:39, édité 1 fois
Flibustier

Flibustier
Nouveau membre

Messages : 3
Inscrit(e) le : 28/01/2012

http://spqr-fourmizzz.forumgratuit.org
Flibustier a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Pseudo bicolore

Message par Flibustier Dim 29 Jan 2012 - 17:43

Bon après quelques bidouillage voici le nouveau code JS :

Code:
$(function() {
          var thispseudo = $('a[href="/u12"]').text();
          var pseudofirst = '<span class="firstpart">'+ thispseudo.substr(0, 4) +'</span>';
          var pseudosecond = '<span class="secondpart">'+ thispseudo.substr(4, 4) +'</span>';
         
          $('.postprofile strong a[href="/u12"]').html(pseudofirst + pseudosecond);
          $('p a[href="/u12"]').html(pseudofirst + pseudosecond);
          $('.module a[href="/u12"]').html(pseudofirst + pseudosecond);
        });
          $('.dd a[href="/u12"]').html(pseudofirst + pseudosecond);

Tout les endroits où figure le lien (et donc le pseudo) sont bien affectés sauf l'image de l'avatar

mais j'ai toujours le problème avec ce maudit espace, il semblerait qu'une nouvelle cellule soit automatiquement créée en séparant le pseudo en 2 span

Si quelqu'un avait une idée pour que cela n'affecte pas la mise en forme...

Edit : Problème résolu avec ce CSS
Code:
.firstpart {
  color: black;
  font-weight : bold;
  display : inline !important;
}
.secondpart {
  color: white;
  font-weight : bold;
  padding-left : 0px !important;
  display : inline !important;
}

Sujet à verrouiller

PS : Un grand merci à Treax pour son aide ainsi qu'à Brendhal qui à modifié les codes JS et CSS d'origine et me les a envoyer par mail salut
Flibustier

Flibustier
Nouveau membre

Messages : 3
Inscrit(e) le : 28/01/2012

http://spqr-fourmizzz.forumgratuit.org
Flibustier 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