Avoir des bannieres sur son forum xenforo

Statut
N'est pas ouverte pour d'autres réponses.
D

deleted247906

Bonjour à tous !
Voici un petit tutoriel pour avoir des bannieres sur xenforo sans avoir la version 1.2.x, car après celle-ci c'est ajouté par les fondateur.

Alors, déjà voici ce que c'est une banniere :
1419116018-sans-titre.png


Donc, il suffit d'aller dans :
Admin CP > Apparence > Templates > Extra.css

Ensuit, dès le début écrire coller ceci :
.ribbon { font-size: 10px; font-weight: bold; margin: -5px -5px -2px; text-align: center; }
.ribbon li
{
border-radius: 3px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
box-shadow: 0px 1px 3px rgba(0,0,0, 0.25);
padding: 1px;
position: relative;
margin-bottom: 5px;
}
.ribbon li:last-child { margin-bottom: 0px; }
.ribbon li div { position: absolute; top: -4px; width: 4px; height: 4px; }
.ribbon li .right { border-top-right-radius: 3px; right: -1px; }
.ribbon li .left { border-top-left-radius: 3px; left: -1px; }

.ribbonHost
{
background: #000;
border: 1px solid #000;
color: #FF3E96;
}
.ribbonHost div { background-color: #000; }

.ribbonLotsofRibbons
{
background: #000;
border: 1px solid #000;
color: #00FF00;
}
.ribbonLotsofRibbons div { background-color: #000; }

.ribbonStaff
{
background: #000;
border: 1px solid #000;
color: #0FF;
}
.ribbonStaff div { background-color: #000; }

.ribbonContributor
{
background: #010101;
border: 1px solid #FD0000;
color: #FD0000;
}
.ribbonContributor div { background-color: #FD0000; }

.ribbonAwesome
{
background: #616161;
border: 1px solid #000;
color: #5B0000;
}
.ribbonAwesome div { background-color: #000; }

.ribbonDiamond
{
background: #010101;
border: 1px solid #010101;
color: #00B1F2;
}
.ribbonDiamond div { background-color: #010101; }

Alors, pour modifié selon vos envis :
background: #XXXXXX; sera la couleur du fond, donc en l'occurrence pour le screen au début, c'est jaune/or.

Voici un site pour vos code couleur,
Il faut copier le code à droite, #XXXXXX.

Border: 1px solid #XXXXXX sera une sorte de contour, comme ceci:
1419116306-sans-titre.png

On vois bien l'encadré rouge, et bien c'est ceci.
Ensuit, color: #XXXXXX; c'est la couleur du texte.

Juste en dessous, il y a : .ribbonXXX div { background-color: #XXXXXX; } c'est les petites choses que l'on voit derriere, qui font un peu l'enrouler.
1419116408-sans-titre.png

Vous le mettez encore de la couleur désirer.

Maintenant, vous allez sur votre forum dans un sujet, mais vous ne voyez rien.
C'est normal, nous avons juste fais la partie 'graphique'.
Alors, pour y assigner à certains groupes, il suffit de prendre l'id d'un groupe.
Pour celà, Admin CP > Utilisateurs > Groupes d'utilisateurs > vous cliquez sur le groupe, puis regardez l'URL :
1419116538-sans-titre.png

Maintenant, rendez vous :
Admin CP > Apparence > Templates > message_user_info
/!\ Ne confondez pas dans message_user_info.css /!\

Ecrivez :
<xen:if hascontent="true">
<ul class="ribbon">
<xen:contentcheck>
<xen:if is="{xen:helper ismemberof, $user, 12}">
<li class="ribbonLotsofRibbons">
<div class="left"></div>
<div class="right"></div>
Lots of Ribbons
</li>
</xen:if>
<xen:if is="{xen:helper ismemberof, $user, 11}">
<li class="ribbonHost">
<div class="left"></div>
<div class="right"></div>
Server Host
</li>
</xen:if>
<xen:if is="{xen:helper ismemberof, $user, 13}">
<li class="ribbonHost">
<div class="left"></div>
<div class="right"></div>
SynapseHLP Owner
</li>
</xen:if>
<xen:if is="{xen:helper ismemberof, $user, 3}">
<li class="ribbonContributor">
<div class="left"></div>
<div class="right"></div>
Admin
</li>
</xen:if>
<xen:if is="{xen:helper ismemberof, $user, 8}">
<li class="ribbonAwesome">
<div class="left"></div>
<div class="right"></div>
<b>Support</b>
</li>
</xen:if>
<xen:if is="{xen:helper ismemberof, $user, 4}">
<li class="ribbonDiamond">
<div class="left"></div>
<div class="right"></div>
Moderateur
</li>
</xen:if>

Il y a que 2 choses à modifier :

<xen:if is="{xen:helper ismemberof, $user, 4}">
<li class="ribbonDiamond">
<div class="left"></div>
<div class="right"></div>

Moderateur
</li>

Alors, le 4 il faut le modifié par l'ID du groupe désirer, je vous ai expliquer juste avant comment connaitre l'id par rapport au groupe.

Moderateur, il faut le modifier par ce que vous voulez voir apparaître sur la banniere.

Vous pouvez bien entendu mettre + de bannières en copiant et en collant, mais en changeant la classe bien entendu

Mais je veux deux bannieres pour la même personne, pourtant on ne peux mettre qu'un groupe?

Alors, pour cela imaginons que la personne a le grade Admin, et veux avoir la banniere Admin donc qui est relié au groupe Admin, mais aussi la banniere support qui est relié au groupe Support. (La banniere Moderateur peut etre associé au groupe Débutant, il n'y a aucuns rapport, c'est l'ID du groupe qui fais.)

Alors, il suffit d'utiliser les groupes secondaires :
1419117063-sans-titre.png

Donc là, j'ai la banniere Admin,Modo et support.

Voilà, j'ai finis ce poste. Ceci est mon premier tutoriel, merci de me dire ce qui ne va pas.
 
Dernière édition par un modérateur:

Snake's

Administrateur
Ancien staff
Inscription
5 Juin 2012
Messages
8 792
Réactions
6 913
Points
25 465
C'est une fonction de base dans les versions supérieures à 1.2.x.
Si les couleurs proposées ne sont pas à vos goûts, il suffit de déclarer une nouvelle classe. ;)
 
Statut
N'est pas ouverte pour d'autres réponses.
Haut