Template 1.X Ajouter une icône devant les pseudos !

Nous vous conseillons de vérifier au préalable le contenu que vous téléchargez.
Si un lien de téléchargement ne fonctionne plus, merci de signaler le topic en question !

DarkStyl

Modérateur
XenTrad
Modérateur
Messages
160
Ressources
1
J'aime
31
Points
1 488
Hors ligne
#1
Bonjour,

pour avoir une icône pivotante (par défaut une étoile) à coté du pseudonyme des membres d'un groupe précis voici comment procéder :

  • Tout d'abord il faut télécharger l'archive
    Vous n'avez pas la permission de voir le lien Connectez-vous ou inscrivez-vous dès maintenant.
    et décompresser le dossier à la racine de son dossier "Forum".
  • Ensuite aller dans : Apparence > Styles > "NomduTemplate" > Templates > page_container_js_head , et ajouter en dessous de :
Code:
<!--XenForo_Require:JS-->
ceci :
Code:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
  • Pour activer la class à un groupe précis et non à l'ensemble des groupes dirigez vous vers : Utilisateurs > Groupes d'Utilisateurs > "GroupedevotreChoix(en exemple ici : Administrative)" , ajoutez un attribut de class comme par exemple les pseudos du groupe en rouge :
Code:
color: red;
  • Pour finir, direction : Apparence > Styles > "NomduTemplate" > Templates > EXTRA.css , pour y ajouter :
Code:
.username .style3:before {
content: "\f005";
font-family: FontAwesome;
margin-right: 4px;
display: inline-block;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}

.username:hover .style3:before {
content: "\f005";
font-family: FontAwesome;
margin-right: 4px;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
Pour attribuer une couleur différente du pseudo ajouter dans .username .style3:before :
Code:
color: votrecouleur,
Pour attribuer une icône différente à un autre groupe il vous suffit de remplacer .style3 par l'ID du groupe que vous voulez. Ici le .style3 correspond au groupe Administrative qui a pour ID le chiffre 3.

Pour connaitre l'ID d'un groupe cliquez dessus comme pour l'éditer puis regarder dans votre url : admin.php?user-groups/administrative.3/edit

Pour changer l'icône il vous faut modifier "\f005" de la ligne css content, pour connaitre le code des icônes ouvrez le fichier css : font-awesome.css

[EDIT] ne pas oublier de mettre une couleur pour le pseudo du groupe, si aucune couleur n'est indiqué l'icône ne s'affichera pas sur le forum.

Cordialement,
 
Dernière édition:

striarc

Membre
Membre
Messages
32
Ressources
0
J'aime
8
Points
1 333
Hors ligne
#4
Au fait, je viens de faire ce que tu as dit mais l'etoile est visible que quand j'ai la souris dessus. Et elle ne pivote pas. Tu serais expliquer ça ? ^^

Désolé une erreur de ma part, tout va bien :) Merci encore^^
 

DarkStyl

Modérateur
XenTrad
Modérateur
Messages
160
Ressources
1
J'aime
31
Points
1 488
Hors ligne
#5
Au fait, je viens de faire ce que tu as dit mais l'etoile est visible que quand j'ai la souris dessus. Et elle ne pivote pas. Tu serais expliquer ça ? ^^

Désolé une erreur de ma part, tout va bien :) Merci encore^^
pas de souci :D en suivant ce tuto c'est impossible que ça ne marche pas :) les erreurs sont humaine :D
 
Haut Bas