Tutoriel Éditer un groupe d'utilisateurs | Couleurs & Effets pseudo | Icône de groupe

[MWHAX7]

Yo tout le monde, je vous fait là un petit tutoriel pour les éditions de groupe, pour les couleurs et effets sur pseudo

Pour commencer rendez vous dans votre panel admin sous > Groupes & permissions > Groupes d'utilisateurs

Cliquez sur n'importe quel groupe ou créez en un nouveau, vous pourrez voir ceci :

Ici pas besoin de class / id CSS vous pouvez entrez directement votre code CSS pour qu'il s'applique aux noms des utilisateurs du groupe, exemple :

J'ajoute ceci au code :

    color: #000000;
    font-weight: bold;
    text-shadow: 0 0 5px #ffaa00, 0 0 5px #ffaa00;
    background: url('xxx/xxx.xxx/gif') repeat scroll 0% 0% transparent;

Pour les moins à l'aise avec ce code, nous avons en gros un texte noir, en gras, avec une "ombre de texte" orange, et enfin une image de fond (il suffit de mettre l'URL de celle-ci à la pace de "'xxx/xxx.xxx/gif") :

On peut également le faire via l'extra.css :

En insérant :

.username .username--style1337 {
    color: #000000;
    font-weight: bold;
    text-shadow: 0 0 5px #ffaa00, 0 0 5px #ffaa00;
    background: url('url_de_l.image') repeat scroll 0% 0% transparent;
}

Pour choisir quel groupe vous éditez il faut utilisé l'id de celui-ci, on le retrouve dans l'URL de la page d'édition de ce même groupe :

On a ici "1337", donc dans le code on met : .username .username--style1337 { code }

Tout ça c'était pour les effets, couleurs / images de fond

Comment ajouté des icônes avant le pseudo en fonction du groupe ?

Dans l'extra.css :

.username .username--style1337:before {
content: "\f230";
font-family: FontAwesome;
margin-right: 5px;
margin-left: 2px;
display: inline-block;
}

On choisi l'icone avec : content: "\xxxx"

Pour savoir quel code correspond à quoi : https://fontawesome.com/

Comme vous pouvez le voir sur ce screen, vous avez le choix, catégories / icônes en tout genre

Dans le code plus haut on a donc l'icone Facebook, exemple :

Vous avez désormais tout les éléments pour innové et créer votre propre style sur vos groupes !

 

[0x]

Toutes les images sont mortes @MWHAX7

 

[0x]

Cette partie du tutoriel est pour toi @Enrydra

Comment ajouté des icônes avant le pseudo en fonction du groupe ?

Dans l'extra.css :
Code:
.username .username--style1337:before {
content: "\f230";
font-family: FontAwesome;
margin-right: 5px;
margin-left: 2px;
display: inline-block;
}
On choisi l'icone avec : content: "\xxxx"

Pour savoir quel code correspond à quoi : https://fontawesome.com/

 

[Nokeira]

Bonjour, je rencontre un problème dans le tuto, je ne trouve le extra.css ?

j'en créer dans le template ?

 

[0x]

Bonjour, je rencontre un problème dans le tuto, je ne trouve le extra.css ?

j'en créer dans le template ?

Non dans les templates de ton style tu en a une qui s'appelle : "EXTRA.less"
Tu n'a pas besoin de la créer

 

[Nokeira]

en fait j'ai un autre problème maintenant ^^'
il n'y pas de fichier EXTRA.css sur xenforo V2 c'est extra.less
et j'ai un autre problème avec le FontAwesome
image ou lien HS supprimé

j'ai lu qu'il y avait un FontAwesome directement intégrer dans le nouveau xenforo mais cela fonctionne pas.

 

[0x]

il n'y pas de fichier EXTRA.css sur xenforo V2 c'est extra.less

Oui extra.less

 

[0x]

j'ai lu qu'il y avait un FontAwesome directement intégrer dans le nouveau xenforo mais cela fonctionne pas.

Tu tes juste tromper dans le code que tu à mis. Ouvre un poste ici : https://veryleaks.to/forums/assistance.381/

 

[goofy]

Bonjour, comment faire la même chose mais avec le même effet que sur veryleaks ? genre avec les effets de couleur qui changent par rapport aux grades comme modérateur, super-administrateur etc ... ?

 

[0x]

Bonjour, comment faire la même chose mais avec le même effet que sur veryleaks ? genre avec les effets de couleur qui changent par rapport aux grades comme modérateur, super-administrateur etc

Je ne vais pas te dire comment nous copier ?
Cherche ce n'est pas bien compliqué

 

[goofy]

Je ne vais pas te dire comment nous copier ?
Cherche ce n'est pas bien compliqué

Je comprend bien, mais ce n’est pas spécialement dans le but de vous copier hehe, presque 80% des forums ont ça, j´ai dis comme VeryLeak’s pour donner une référence, mais j’aurais très bien pu donner un autre nom. Mais bon je chercherais donc par moi même, merci quand même :)

 

[Dyckbouh]

les images sont à remettre on vois plus rien

 

[Legoshii]

Yo tout le monde, je vous fait là un petit tutoriel pour les éditions de groupe, pour les couleurs et effets sur pseudo

Pour commencer rendez vous dans votre panel admin sous > Groupes & permissions > Groupes d'utilisateurs

Cliquez sur n'importe quel groupe ou créez en un nouveau, vous pourrez voir ceci :

Ici pas besoin de class / id CSS vous pouvez entrez directement votre code CSS pour qu'il s'applique aux noms des utilisateurs du groupe, exemple :

J'ajoute ceci au code :

    color: #000000;
    font-weight: bold;
    text-shadow: 0 0 5px #ffaa00, 0 0 5px #ffaa00;
    background: url('xxx/xxx.xxx/gif') repeat scroll 0% 0% transparent;

Pour les moins à l'aise avec ce code, nous avons en gros un texte noir, en gras, avec une "ombre de texte" orange, et enfin une image de fond (il suffit de mettre l'URL de celle-ci à la pace de "'xxx/xxx.xxx/gif") :

On peut également le faire via l'extra.css :

En insérant :

.username .username--style1337 {
    color: #000000;
    font-weight: bold;
    text-shadow: 0 0 5px #ffaa00, 0 0 5px #ffaa00;
    background: url('url_de_l.image') repeat scroll 0% 0% transparent;
}

Pour choisir quel groupe vous éditez il faut utilisé l'id de celui-ci, on le retrouve dans l'URL de la page d'édition de ce même groupe :

On a ici "1337", donc dans le code on met : .username .username--style1337 { code }

Tout ça c'était pour les effets, couleurs / images de fond

Comment ajouté des icônes avant le pseudo en fonction du groupe ?

Dans l'extra.css :

.username .username--style1337:before {
content: "\f230";
font-family: FontAwesome;
margin-right: 5px;
margin-left: 2px;
display: inline-block;
}

On choisi l'icone avec : content: "\xxxx"

Pour savoir quel code correspond à quoi : https://fontawesome.com/

Comme vous pouvez le voir sur ce screen, vous avez le choix, catégories / icônes en tout genre

Dans le code plus haut on a donc l'icone Facebook, exemple :

Vous avez désormais tout les éléments pour innové et créer votre propre style sur vos groupes !

Tu pourrais remettre les images stp car elles sont mortes. Merci