[Xenforo] Comment ajouter la petite étoile devant le grade et le pseudo

Merci pour ce magnifique tutoriel mais je sais ou trouver les fa mais pas les centent genre : /123 peux-tu me dire STP ? :)
Salut,
je t'ai encadré le code dans le rectangle rouge ;)
Tu le trouveras au même endroit pour chaque icône
 
Salut,
je t'ai encadré le code dans le rectangle rouge ;)
Tu le trouveras au même endroit pour chaque icône
Ah d'accord merci :)
Par contre ça ne marche pas pour moi :( J'ai modifier plusieurs fois l'URL d'arrivée et ça change rien :(
 
J'ai du oublier quelque chose, sa rend comme ceci :
Sa peut être du à quoi ? :mmh:
 
Salut à tous,

Je vous partage ce soir la solution pour ajouter la petite étoile devant le grade et le pseudo de vos membres sur votre forum :)

Voici un exemple
You must be registered for see images attach


Pour ajouté ceci il suffit de vous rendre dans votre AdminCP puis aller dans Utilisateur puis Groupes d'utilisateurs sélectionner le groupe ou vous lui attribuer une étoile. Pour moi ce sera ancien Staff ;)
Donc il faut regarder l'URL pour pouvoir avoir l'id du groupe

You must be registered for see images attach


Maintenant que nous avons l'id du groupe nous pouvons aller dans les templates de votre style xenforo puis allons dans la template "username_styles.css"

L'id servi à déterminer le style du groupe exemple style12, style11 etc ...

À la fin de la template vous ajoutez ceci
Code:
.username .style12:before {
font-family: "FontAwesome";
content: "\f005";
color: #FC7F3C;
padding-right: 4px;
display: inline-block;
}

.username .style12:hover:before{
display:inline-block;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition:all 0.35s;
-webkit-transition:all 0.35s;
-moz-transition:all 0.35s;
-ms-transition:all 0.35s;
-o-transition:all 0.35s
}

N'oubliez pas d'ajouter font-awesome
Pour cela allez dans PAGE_CONTAINER
Ajouter en bas de celle ci
Code:
<link rel="stylesheet" href="http://NDDdevotreforum/styles/VOTREstyle/font/font-awesome.min.css">
Voici le fichier CSS =>
Virus scan =>

Lien des fichiers fonts =>

Vous sauvegardez.
Et admirer le résultat
Sympa... Je vais peut-être en re-monter un un jour, un forum XenForo
 
Pas compris.

Ça marche pas.
 
Dernière édition par un modérateur:
Bonsoir, tout d'abord merci à toi pour ce tutoriel mais juste une question, comment avoir d'autres choses que l'étoile :D ? Merci
 
Bonsoir, tout d'abord merci à toi pour ce tutoriel mais juste une question, comment avoir d'autres choses que l'étoile :D ? Merci
Salut,

Tu modifies cette ligne :
Code:
content: "\f005";

En modifiant l'unicode f005 par celui de ton choix, pour en trouver un autre il suffit de te rendre sur cette page : puis de choisir une icône, enfin tu trouveras l'unicode de l'icône sous celle-ci.

You must be registered for see images attach
 
Salut,

Tu modifies cette ligne :
Code:
content: "\f005";

En modifiant l'unicode f005 par celui de ton choix, pour en trouver un autre il suffit de te rendre sur cette page : puis de choisir une icône, enfin tu trouveras l'unicode de l'icône sous celle-ci.

You must be registered for see images attach
Merci, depuis le temps j'ai résolu mon problème mais merci tout de même d'y avoir répondu ;)
 
veille à bien mettre le code dans PAGE_CONTAINER


Code:
<link rel="stylesheet" href=" ">
Il faut télécharger FontAwesome pour pouvoir utiliser ce lien absolu ^^

Le mieux est d'utiliser le CDN ;)
 
Retour
Haut