Tutoriel Création d'un style de bannière utilisateur personnalisé par Brogan

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 !

Membres qui ont lu cette discussion : 0

nitro

Assistant
SyTry Community
Assistant
Messages
106
Réactions
15
Points
718
Hors ligne
Bonjour voici un tuto pour créer des bannières personnalisé.

Auteur : Brogan
Forum : XENFORO

Version compatible 2.x : 2.0 - 2.1 - 2.2

Par défaut, XF est fourni avec les styles de bannière utilisateur suivants:

1566747742470.png


Créer un style personnalisé à l'aide de l' option Autre, en utilisant l' option de nom de classe CSS personnalisé est assez simple.

Ce guide vous expliquera comment faire.

Le moyen le plus simple et de loin d'ajouter un nouveau style de préfixe et de s'assurer qu'il hérite de tous les styles de base est de modifier le modèle app_user_banners.less .

Recherchez la section dans le modèle mis en évidence dans la capture d'écran ci-dessous:

1566746468224.png


Ensuite, ajoutez simplement vos entrées personnalisées après l' entrée orange et avant la fermeture } , comme suit:

1566746538270.png


Je recommande d'utiliser un nom qui ne causera aucun conflit potentiel avec le code principal ou les modules complémentaires tiers.
Je préfixe toutes mes entrées personnalisées avec l'acronyme de mon site - cta - et j'aime aussi lui donner un nom descriptif, donc dans ce cas, j'ai utilisé ctaSupporter .

Les deux valeurs / couleurs entre accolades désignent la couleur du texte, dans ce cas le blanc , et la couleur de fond, dans ce cas # 008800 .

XF générera ensuite la couleur de la bordure en fonction de ces valeurs, en utilisant le CSS principal.

Enfin, configurez le groupe d'utilisateurs:

1566746708977.png


Le résultat de tout cela est le suivant:

1566746760594.png


Vous pouvez bien sûr

le styliser comme vous le souhaitez, en ajoutant des icônes, des images, etc. Pour ce faire, vous utiliserez le modèle extra.less .
L'exemple suivant ajoute une icône d' étoile Font Awesome (
S'il vous plaît, Connexion ou S'inscrire pour voir le lien !
) devant le texte.

1566746995913.png


Ainsi:

1566747030985.png
 
Haut Bas