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

Kévin 🚀

Administrateur
Administrateur
Inscription
18 Décembre 2012
Messages
4 832
Réactions
5 540
Points
27 882
RGCoins
776
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
 
D

deleted577633

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

SyTry'

Premium
Inscription
22 Mai 2015
Messages
2 608
Réactions
814
Points
13 171
RGCoins
0
J'ai du oublier quelque chose, sa rend comme ceci :
Sa peut être du à quoi ? :mmh:
 
Inscription
1 Janvier 2015
Messages
5 089
Réactions
2 379
Points
20 610
RGCoins
0
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
 

Alain LeThug

Membre
Inscription
30 Juillet 2016
Messages
28
Réactions
4
Points
556
RGCoins
0
Pas compris.

Ça marche pas.
 
Dernière édition par un modérateur:

Kong SEC

Retraité
Ancien staff
Inscription
14 Mai 2016
Messages
2 714
Réactions
2 349
Points
14 400
RGCoins
0
Bonsoir, tout d'abord merci à toi pour ce tutoriel mais juste une question, comment avoir d'autres choses que l'étoile :D ? Merci
 

Rivals

Ancien staff
Inscription
27 Août 2016
Messages
1 706
Réactions
897
Points
13 104
RGCoins
0
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
 

Kong SEC

Retraité
Ancien staff
Inscription
14 Mai 2016
Messages
2 714
Réactions
2 349
Points
14 400
RGCoins
0
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 ;)
 

Noxyz

>_Dev.Web()
Premium
Inscription
1 Juin 2013
Messages
194
Réactions
61
Points
7 016
RGCoins
0
sa ne marche pas moi :/
 

Rivals

Ancien staff
Inscription
27 Août 2016
Messages
1 706
Réactions
897
Points
13 104
RGCoins
0
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 ;)
 
Haut