Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Quoi de neuf
Nouveaux messages
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Forums généraux
Informatique
Développement
Créer des bannières d'utilisateurs
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="1899" data-source="post: 6783589" data-attributes="member: 146051"><p style="text-align: center"><span style="font-family: 'MyriadPro'">[ATTACH=full]94395[/ATTACH]</span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'"></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'">Bonjour et bienvenue dans ce topic où je vais vous montrer comment <strong><span style="color: #b30000">créer vos bannières d'utilisateurs</span></strong>, afin d'avoir un large choix dans la création de vos bannières <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite355" alt=":)" title=":) :)" loading="lazy" data-shortname=":)" /></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'"></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'">[ATTACH=full]94397[/ATTACH]</span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'"></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'">Pour commencer, vous devrez vous rendre dans votre template <strong><span style="color: #b30000">EXTRA.css</span></strong> pour y créer votre class. Commencez par la class <strong><span style="color: #b30000">.userBanner</span></strong> et terminez par le nom de la class de votre bannière.</span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'"></span></p> <p style="margin-left: 20px"><span style="color: #b30000"><strong><span style="font-family: 'MyriadPro'">[fa]fa fa-gg fa-border[/fa] Exemple :</span></strong></span></p> <p style="margin-left: 20px"></p><p><span style="font-family: 'MyriadPro'">[CODE].userBanner.banniereTuto[/CODE]</span></p><p><span style="font-family: 'MyriadPro'"></span></p><p style="text-align: center"><span style="font-family: 'MyriadPro'">Dans ce cas, le nom de ma class est<strong><span style="color: #b30000"> banniereTuto</span></strong>. Il est indispensable de conserver la class par défaut (.userBanner), ou alors vous <strong><span style="color: #b30000">pouvez la refaire vous même</span></strong> (mais ce ne sera pas expliqué dans ce tutoriel <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite355" alt=":)" title=":) :)" loading="lazy" data-shortname=":)" /></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'"></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'">Une fois votre class déclaré, vous allez maintenant la styliser en utilisant les propriété de <strong><span style="color: #b30000">color</span></strong>, <strong><span style="color: #b30000">background-color</span></strong> et<strong><span style="color: #b30000"> border-color</span></strong>.</span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'"></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'">Pour ma part je veux créer une <strong><span style="color: #b30000">bannière violette</span></strong>, mon code sera donc celui-ci :</span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'"></span></p> <p style="margin-left: 20px"><span style="color: #b30000"><strong><span style="font-family: 'MyriadPro'">[fa]fa-code fa-border[/fa] Code :</span></strong></span></p> <p style="margin-left: 20px"></p><p><span style="font-family: 'MyriadPro'">[CODE].userBanner.banniereTuto { color: white; background-color: purple; border-color: purple; }[/CODE]</span></p><p><span style="font-family: 'MyriadPro'"></span></p><p style="text-align: center"><span style="font-family: 'MyriadPro'">Là, j'ai modifié la couleur de la bannière, mais pas celle des rabattements.</span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'">Pour ce faire, vous allez devoir utiliser la même class, en y ajoutant simplement <strong><span style="color: #b30000">.wrapped span</span></strong>. Il faudra utiliser simplement la propriété de <strong><span style="color: #b30000">background-color</span></strong>, voici le code :</span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'"></span></p> <p style="margin-left: 20px"><span style="color: #b30000"><strong><span style="font-family: 'MyriadPro'">[fa]fa-code fa-border[/fa] Code :</span></strong></span></p> <p style="margin-left: 20px"></p><p><span style="font-family: 'MyriadPro'">[CODE].userBanner.banniereTuto.wrapped span { background-color: purple; }[/CODE]</span></p><p><span style="font-family: 'MyriadPro'"></span></p><p style="text-align: center"><span style="font-family: 'MyriadPro'">Une fois votre bannière finalisé, vous obtiendrez donc un code <strong><span style="color: #b30000">similaire</span></strong> à celui-ci :</span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'"></span></p><p><span style="font-family: 'MyriadPro'">[CODE].userBanner.banniereTuto { color: white; background-color: purple; border-color: purple; }</span></p><p><span style="font-family: 'MyriadPro'">.userBanner.banniereTuto.wrapped span { background-color: purple; }[/CODE]</span></p><p><span style="font-family: 'MyriadPro'"></span></p><p style="text-align: center"><span style="font-family: 'MyriadPro'">Maintenant, allons assigner cette bannière à votre groupe d'utilisateur.</span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'">Pour ce faire, allez dans les paramètres de votre groupe d'utilisateur (la page pour assigner une bannière à votre groupe) et cochez la case <strong><span style="color: #b30000">Autre</span></strong> pour y inscrire le nom de la class de votre bannière.</span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'"></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'">Vous devrez y inscrire le nom de la class sans les points, c'est très important !</span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'">Pour ma part le nom de class qui à la base est <strong><span style="color: #b30000">.userBanner.banniereTuto</span></strong> deviendra <strong><span style="color: #b30000">userBanner banniereTuto</span></strong> !</span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'"></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'">Lorsque tout est fait, sauvegardez et appréciez le rendu ! <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite348" alt=":cool:" title="Cool :cool:" loading="lazy" data-shortname=":cool:" /></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'"></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'">Le rendu :</span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'">[ATTACH=full]94398[/ATTACH]</span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'"></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'">C'est beau n'est-ce pas ? <img src="/images/smiley-pack/oui.gif" class="smilie" loading="lazy" alt=":oui:" title="Oui :oui:" data-shortname=":oui:" /></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'"></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'">Petite astuce :</span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'"></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'">Si vous voulez ajouter une <strong><span style="color: #b30000">icône FontAwesome</span></strong> dans la bannière, il va falloir utiliser la même class en y ajoutant <strong><span style="color: #b30000">:before</span></strong> à la fin, ce qui donne une class similaire à celle-ci :</span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'"></span></p> <p style="margin-left: 20px"><span style="color: #b30000"><strong><span style="font-family: 'MyriadPro'">[fa]fa-gg fa-border[/Fa] Exemple :</span></strong></span></p> <p style="margin-left: 20px"></p><p><span style="font-family: 'MyriadPro'">[CODE].userBanner.banniereTuto:before[/CODE]</span></p><p><span style="font-family: 'MyriadPro'"></span></p><p style="text-align: center"><span style="font-family: 'MyriadPro'">Et à l'intérieur, vous allez y inscrire le numéro de l'icône en prenant soin de déclarer la police FontAwesome. Vous aurez ainsi un code similaire à celui-ci :</span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'"></span></p> <p style="margin-left: 20px"><span style="color: #b30000"><strong><span style="font-family: 'MyriadPro'">[fa]fa-code fa-border[/fa] Code :</span></strong></span></p> <p style="margin-left: 20px"></p><p><span style="font-family: 'MyriadPro'">[CODE].userBanner.banniereTuto:before { font-family: "FontAwesome"; content: "\f005"; margin-right: 5px; }[/CODE]</span></p><p><span style="font-family: 'MyriadPro'"></span></p><p style="text-align: center"><span style="font-family: 'MyriadPro'">Le rendu :</span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'">[ATTACH=full]94399[/ATTACH]</span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'"></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'">Encore plus beau non ? <img src="/images/smiley-pack/oui.gif" class="smilie" loading="lazy" alt=":oui:" title="Oui :oui:" data-shortname=":oui:" /></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'"></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'">[ATTACH=full]94397[/ATTACH]</span></p><p></p><p style="text-align: center"><span style="font-family: 'MyriadPro'">Si vous avez des questions, je suis disponibles par le biais de ce topic ou en message privé <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite355" alt=":)" title=":) :)" loading="lazy" data-shortname=":)" /></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'"></span></p> <p style="text-align: center"><span style="font-family: 'MyriadPro'">Bonne journée <img src="/data/assets/smilies/bye.gif" class="smilie" loading="lazy" alt=":bye:" title="Bye :bye:" data-shortname=":bye:" /></span></p><p></p><p style="text-align: right"><span style="font-family: 'MyriadPro'"><span style="font-size: 9px"><em>Sujet rédigé le 01/08/2016, programmé.</em></span></span></p></blockquote><p></p>
[QUOTE="1899, post: 6783589, member: 146051"] [CENTER][FONT=MyriadPro][ATTACH=full]94395[/ATTACH] Bonjour et bienvenue dans ce topic où je vais vous montrer comment [B][COLOR=#b30000]créer vos bannières d'utilisateurs[/COLOR][/B], afin d'avoir un large choix dans la création de vos bannières :) [ATTACH=full]94397[/ATTACH] Pour commencer, vous devrez vous rendre dans votre template [B][COLOR=#b30000]EXTRA.css[/COLOR][/B] pour y créer votre class. Commencez par la class [B][COLOR=#b30000].userBanner[/COLOR][/B] et terminez par le nom de la class de votre bannière. [/FONT][/CENTER] [INDENT][COLOR=#b30000][B][FONT=MyriadPro][fa]fa fa-gg fa-border[/fa] Exemple :[/FONT][/B][/COLOR] [FONT=MyriadPro][/FONT][/INDENT] [FONT=MyriadPro][CODE].userBanner.banniereTuto[/CODE] [/FONT] [CENTER][FONT=MyriadPro]Dans ce cas, le nom de ma class est[B][COLOR=#b30000] banniereTuto[/COLOR][/B]. Il est indispensable de conserver la class par défaut (.userBanner), ou alors vous [B][COLOR=#b30000]pouvez la refaire vous même[/COLOR][/B] (mais ce ne sera pas expliqué dans ce tutoriel :) Une fois votre class déclaré, vous allez maintenant la styliser en utilisant les propriété de [B][COLOR=#b30000]color[/COLOR][/B], [B][COLOR=#b30000]background-color[/COLOR][/B] et[B][COLOR=#b30000] border-color[/COLOR][/B]. Pour ma part je veux créer une [B][COLOR=#b30000]bannière violette[/COLOR][/B], mon code sera donc celui-ci : [/FONT][/CENTER] [INDENT][COLOR=#b30000][B][FONT=MyriadPro][fa]fa-code fa-border[/fa] Code :[/FONT][/B][/COLOR] [FONT=MyriadPro][/FONT][/INDENT] [FONT=MyriadPro][CODE].userBanner.banniereTuto { color: white; background-color: purple; border-color: purple; }[/CODE] [/FONT] [CENTER][FONT=MyriadPro]Là, j'ai modifié la couleur de la bannière, mais pas celle des rabattements. Pour ce faire, vous allez devoir utiliser la même class, en y ajoutant simplement [B][COLOR=#b30000].wrapped span[/COLOR][/B]. Il faudra utiliser simplement la propriété de [B][COLOR=#b30000]background-color[/COLOR][/B], voici le code : [/FONT][/CENTER] [INDENT][COLOR=#b30000][B][FONT=MyriadPro][fa]fa-code fa-border[/fa] Code :[/FONT][/B][/COLOR] [FONT=MyriadPro][/FONT][/INDENT] [FONT=MyriadPro][CODE].userBanner.banniereTuto.wrapped span { background-color: purple; }[/CODE] [/FONT] [CENTER][FONT=MyriadPro]Une fois votre bannière finalisé, vous obtiendrez donc un code [B][COLOR=#b30000]similaire[/COLOR][/B] à celui-ci : [/FONT][/CENTER] [FONT=MyriadPro][CODE].userBanner.banniereTuto { color: white; background-color: purple; border-color: purple; } .userBanner.banniereTuto.wrapped span { background-color: purple; }[/CODE] [/FONT] [CENTER][FONT=MyriadPro]Maintenant, allons assigner cette bannière à votre groupe d'utilisateur. Pour ce faire, allez dans les paramètres de votre groupe d'utilisateur (la page pour assigner une bannière à votre groupe) et cochez la case [B][COLOR=#b30000]Autre[/COLOR][/B] pour y inscrire le nom de la class de votre bannière. Vous devrez y inscrire le nom de la class sans les points, c'est très important ! Pour ma part le nom de class qui à la base est [B][COLOR=#b30000].userBanner.banniereTuto[/COLOR][/B] deviendra [B][COLOR=#b30000]userBanner banniereTuto[/COLOR][/B] ! Lorsque tout est fait, sauvegardez et appréciez le rendu ! :cool: Le rendu : [ATTACH=full]94398[/ATTACH] C'est beau n'est-ce pas ? :oui: Petite astuce : Si vous voulez ajouter une [B][COLOR=#b30000]icône FontAwesome[/COLOR][/B] dans la bannière, il va falloir utiliser la même class en y ajoutant [B][COLOR=#b30000]:before[/COLOR][/B] à la fin, ce qui donne une class similaire à celle-ci : [/FONT][/CENTER] [INDENT][COLOR=#b30000][B][FONT=MyriadPro][fa]fa-gg fa-border[/Fa] Exemple :[/FONT][/B][/COLOR] [FONT=MyriadPro][/FONT][/INDENT] [FONT=MyriadPro][CODE].userBanner.banniereTuto:before[/CODE] [/FONT] [CENTER][FONT=MyriadPro]Et à l'intérieur, vous allez y inscrire le numéro de l'icône en prenant soin de déclarer la police FontAwesome. Vous aurez ainsi un code similaire à celui-ci : [/FONT][/CENTER] [INDENT][COLOR=#b30000][B][FONT=MyriadPro][fa]fa-code fa-border[/fa] Code :[/FONT][/B][/COLOR] [FONT=MyriadPro][/FONT][/INDENT] [FONT=MyriadPro][CODE].userBanner.banniereTuto:before { font-family: "FontAwesome"; content: "\f005"; margin-right: 5px; }[/CODE] [/FONT] [CENTER][FONT=MyriadPro]Le rendu : [ATTACH=full]94399[/ATTACH] Encore plus beau non ? :oui: [ATTACH=full]94397[/ATTACH][/FONT][/CENTER] [FONT=MyriadPro][/FONT] [CENTER][FONT=MyriadPro]Si vous avez des questions, je suis disponibles par le biais de ce topic ou en message privé :) Bonne journée :bye:[/FONT][/CENTER] [FONT=MyriadPro][/FONT] [RIGHT][FONT=MyriadPro][SIZE=1][I]Sujet rédigé le 01/08/2016, programmé.[/I][/SIZE][/FONT][/RIGHT] [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
Informatique
Développement
Créer des bannières d'utilisateurs
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut