[Toutes versions]Retirer les : du profil dans les messages

Bonjour à toi !

Aujourd'hui, un tutoriel très rapide pour te montrer comment retirer les ":" des profils dans les messages.
Mais de quoi est-ce que je parle ?? Une image vaut mieux que 1000 mots, donc je vous montre.

Avec les ":":

Sans les ":":

Ca t'intéresse ? C'est parti !

Je pars ici de templates non modifiés. Si tu as des templates modifiés et ne sais pas comment adapter, n'hésite pas à poser la question


Eh bien c'est tout simple, il te suffit de poster cette CSS dans Affichage > Couleurs > Feuille de style CSS (choisis bien selon ta version ) :

Code:

.postdetails.poster-profile .label{
  font-size:0;
}
.postdetails.poster-profile .label span{
 font-size:12px;
}

Code:

.postprofile .label{
  font-size:0;
}
.postprofile .label span{
 font-size:12px;
}

Code:

.user-info .label{
  font-size:0;
}
.user-info .label span{
 font-size:12px;
}

Code:

.postprofile-details.postdetails .label{
  font-size:0;
}
.postprofile-details.postdetails .label span{
 font-size:12px;
}

Code:

.postprofile-info .label{
  font-size:0;
}
.postprofile-info .label span{
 font-size:12px;
}

Mais que fait ce code ?
En fait, on dit à tout le contenant qui a pour class "label" de mettre la police en taille 0px. Mais là : le label disparaît... Mais ce n'est pas grave, puisqu'en fait il se trouve dans un span à l'intérieur de la class label : on lui donne donc la taille que l'on souhaite (à adapter ici à la taille de police de base de ton forum).


Eh oui, maintenant qu'on a mis tout à 0px, les espaces sont mangés aussi. Aucun souci, tu vas pouvoir les espacer avec un peu de CSS : on va dire à notre "label" de prendre la propriété "inline-block" et en lui appliquant une marge à droite : (par ici si tu veux en savoir plus).
Juste après le font-size:0; tu peux ajouter ces 2 lignes :

Code:

  display:inline-block;
  margin-right:5px;

Tu veux pouvoir y mettre un autre séparateur, de type > ou = ou --> ou autre ? Tu peux l'appliquer "après" le libellé via le pseudo-élément "after" ([en savoir +]) .
Par exemple pour PhpBB2 :

Code:

.postdetails.poster-profile .label span::after{
  content:">>";
}

A toi d'adapter et voir ce que tu veux y mettre

---

Et voilà ! Tu as maintenant un libellé de profil qui n'est pas séparé de la valeur par ":"
Si tu as la moindre question n'hésite pas

A bientôt !