Tutoriel Créer une barre de modération sur votre forum

HayzenRG

Ancien VIP
Contributeur
Inscription
10 Août 2012
Messages
8 669
Réactions
4 087
Points
16 902
    Réponse de HayzenRG Informatique ⌨️ Programmation Programmation web : Créer une barre de modération sur votre forum
  • #1
header.png


Bonjour et bienvenue dans ce topic où je vais vous montrer comment créer une barre de modération sur votre forum qui remplacera donc celle déjà présente de base. Personnellement, je la trouve beaucoup plus belle et plus fonctionnel que l'ancienne :smile:

djamel7.png


Tout d'abord, vous allez devoir créer deux templates et jouer avec les balises <xen:require> , <xen:if> et <xen:include>.

Créez votre première template que vous allez nommer moderationBar (exemple).
Une fois votre template crée, créez en une deuxième que vous allez nommer moderationBar.css (exemple).

Rendez vous dans votre première template où vous allez inclure votre template.css avec ce code :

<xen:require css="moderationBar.css"/>

Grâce à cette ligne, votre template sera obligé d'aller chercher du contenu css sur votre seconde template que vous avez crée plus tôt.

Maintenant, nous allons donner l'obligation d'afficher cette barre aux modérateurs et aux administrateurs via une balise <xen:if> qui se présente comme ceci :

<xen:if is="{$visitor.is_admin} OR {$visitor.is_moderator}">

Maintenant que vous avez fais vos pré-configuration, rendez vous dans le template PAGE_CONTAINER pour y inclure votre template.
Cherchez :

Code:
<xen:include template="ad_above_top_breadcrumb" />
                
                        <xen:hook name="page_container_breadcrumb_top">
                        <div class="breadBoxTop {xen:if $topctrl, withTopCtrl}">
                            <xen:if is="{$topctrl}"><div class="topCtrl">{xen:raw $topctrl}</div></xen:if>
                            <xen:include template="breadcrumb"><xen:set var="$microdata">1</xen:set></xen:include>
                        </div>
                        </xen:hook>

Ajoutez en dessous :

Code:
<xen:include template="moderationBar"/>

Dorénavant, votre template moderationBar est incluse en dessous du breadcrumb et sur tout le forum !

Pour tester si tout cela a marché, créez un titre sur votre template moderationBar et si le titre s'affiche en dessus du fil de navigation, tout est bien configuré et il ne vous reste plus qu'à développer votre barre de
modération ! :D

Vous pouvez y ajouter des liens vers les signalements, l'édition de la notice, les membres bannis de la shoutbox ainsi que votre classement, enfin tous les liens que vous voulez montrer à vos modérateurs.

Maintenant, nous allons inclure un lien vers l'adminCP visible uniquement par les administrateurs avec cette balise :

<xen:if is="{$visitor.is_admin}">

N'oubliez pas de fermer vos balise <xen:if> ;)

Je vous montre mon rendu :

Sans-titre-1.png


C'est pas mal non ? :p

Si vous voulez, voici mon code :
Code:
<xen:if is="{$visitor.is_admin} OR {$visitor.is_moderator}">

<xen:require css="moderationbar.css"/>
<div class="iconsModerationBar">
    <a href="{xen:link shoutbox/banned}" class="ban"><h3 class="bannis">{xen:phrase userBanned}</h3></a>
    <a href="{xen:link shoutbox/classement}" class="rank"><h3 class="classement">{xen:phrase shoutRank}</h3></a>
    <a href="{xen:link shoutbox/motd}" class="notice"><h3 class="notice">{xen:phrase editNotice}</h3></a>  
    <a href="{xen:link reports/}" class="reports"><h3 class="reports">{xen:phrase reports}</h3></a>
<xen:if is="{$visitor.is_admin}">
    <a href="{xen:link admin.php}" class="admincp"><h3 class="admincp">Admin CP</h3></a>
</xen:if>
</div>
</xen:if>

N'oubliez pas de créer les expressions afin que les textes s'affichent bien !

Le CSS :
Code:
.iconsModerationBar {
border: 1px solid #a5cae4;
border-radius: 10px;
padding: 13px;
}
h3.bannis {
font-family: Open Sans Condensed;
font-size: 14px;
display: inline;
margin-right: 10px;
}
h3.bannis:before {
font-family: "FontAwesome";
content: "\f05e";
padding-right: 5px;
}
h3.classement {
font-family: Open Sans Condensed;
font-size: 14px;
display: inline;
margin-right: 10px;
}
h3.classement:before {
font-family: "FontAwesome";
content: "\f0cb";
padding-right: 5px;
}
h3.admincp {
font-family: Open Sans Condensed;
font-size: 14px;
display: inline;
float: right;
}
h3.admincp:before {
font-family: "FontAwesome";
content: "\f023";
padding-right: 5px;
}
h3.notice {
font-family: Open Sans Condensed;
font-size: 14px;
display: inline;
margin-right: 10px;
}
h3.notice:before {
font-family: "FontAwesome";
content: "\f0e6";
padding-right: 5px;
}
h3.reports {
font-family: Open Sans Condensed;
font-size: 14px;
display: inline;
}
h3.reports:before {
font-family: "FontAwesome";
content: "\f129";
padding-right: 5px;
}
h3.bannis:hover {
color: #6b8fa8;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
texy-decoration: none;
}
a.rank:hover {
color: #6b8fa8;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
texy-decoration: none;
}
a.notice:hover {
color: #6b8fa8;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
texy-decoration: none;
}
a.admincp:hover {
color: #6b8fa8;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
texy-decoration: none;
}
a.reports:hover {
color: #6b8fa8;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
texy-decoration: none;
}
.iconsModerationBar a {
color: #25323b;
}

djamel7.png


C'est déjà fini pour ce tutoriel, si vous avez des questions je suis disponible en privé ou sur ce topic ! :)

Bonne journée :bye:

Rédigé le 28/07/2016, programmé.
 

Rivals

Développeur
Inscription
27 Août 2016
Messages
904
Réactions
806
Points
6 204
    Réponse de Rivals Informatique ⌨️ Programmation Programmation web : Créer une barre de modération sur votre forum
  • #2
Pas mal, il faut utiliser les modifications de template encore une fois : :p
 
D

deleted535977

    Réponse de deleted535977 Informatique ⌨️ Programmation Programmation web : Créer une barre de modération sur votre forum
  • #3
Très bon tuto , merci
 

PrayForAzkoz

Membre
Inscription
1 Mars 2014
Messages
19
Réactions
4
Points
1 296
    Réponse de PrayForAzkoz Informatique ⌨️ Programmation Programmation web : Créer une barre de modération sur votre forum
  • #4
Merci !
 

Frank Kaska

LegoznFR Twitch - Youtube
Contributeur
Inscription
6 Juin 2014
Messages
266
Réactions
51
Points
2 516
    Réponse de Frank Kaska Informatique ⌨️ Programmation Programmation web : Créer une barre de modération sur votre forum
  • #5
Ne fonctionne pas
 

Anarchy2306

Contributeur
Inscription
7 Juin 2015
Messages
117
Réactions
12
Points
3 746
    Réponse de Anarchy2306 Informatique ⌨️ Programmation Programmation web : Créer une barre de modération sur votre forum
  • #7
Voir la pièce jointe 94019

Bonjour et bienvenue dans ce topic où je vais vous montrer comment créer une barre de modération sur votre forum qui remplacera donc celle déjà présente de base. Personnellement, je la trouve beaucoup plus belle et plus fonctionnel que l'ancienne :smile:

Voir la pièce jointe 94020

Tout d'abord, vous allez devoir créer deux templates et jouer avec les balises <xen:require> , <xen:if> et <xen:include>.

Créez votre première template que vous allez nommer moderationBar (exemple).
Une fois votre template crée, créez en une deuxième que vous allez nommer moderationBar.css (exemple).

Rendez vous dans votre première template où vous allez inclure votre template.css avec ce code :

<xen:require css="moderationBar.css"/>

Grâce à cette ligne, votre template sera obligé d'aller chercher du contenu css sur votre seconde template que vous avez crée plus tôt.

Maintenant, nous allons donner l'obligation d'afficher cette barre aux modérateurs et aux administrateurs via une balise <xen:if> qui se présente comme ceci :

<xen:if is="{$visitor.is_admin} OR {$visitor.is_moderator}">

Maintenant que vous avez fais vos pré-configuration, rendez vous dans le template PAGE_CONTAINER pour y inclure votre template.
Cherchez :

Code:
<xen:include template="ad_above_top_breadcrumb" />
               
                        <xen:hook name="page_container_breadcrumb_top">
                        <div class="breadBoxTop {xen:if $topctrl, withTopCtrl}">
                            <xen:if is="{$topctrl}"><div class="topCtrl">{xen:raw $topctrl}</div></xen:if>
                            <xen:include template="breadcrumb"><xen:set var="$microdata">1</xen:set></xen:include>
                        </div>
                        </xen:hook>

Ajoutez en dessous :

Code:
<xen:include template="moderationBar"/>

Dorénavant, votre template moderationBar est incluse en dessous du breadcrumb et sur tout le forum !

Pour tester si tout cela a marché, créez un titre sur votre template moderationBar et si le titre s'affiche en dessus du fil de navigation, tout est bien configuré et il ne vous reste plus qu'à développer votre barre de
modération ! :D

Vous pouvez y ajouter des liens vers les signalements, l'édition de la notice, les membres bannis de la shoutbox ainsi que votre classement, enfin tous les liens que vous voulez montrer à vos modérateurs.

Maintenant, nous allons inclure un lien vers l'adminCP visible uniquement par les administrateurs avec cette balise :

<xen:if is="{$visitor.is_admin}">

N'oubliez pas de fermer vos balise <xen:if> ;)

Je vous montre mon rendu :

Voir la pièce jointe 94023

C'est pas mal non ? :p

Si vous voulez, voici mon code :
Code:
<xen:if is="{$visitor.is_admin} OR {$visitor.is_moderator}">

<xen:require css="moderationbar.css"/>
<div class="iconsModerationBar">
    <a href="{xen:link shoutbox/banned}" class="ban"><h3 class="bannis">{xen:phrase userBanned}</h3></a>
    <a href="{xen:link shoutbox/classement}" class="rank"><h3 class="classement">{xen:phrase shoutRank}</h3></a>
    <a href="{xen:link shoutbox/motd}" class="notice"><h3 class="notice">{xen:phrase editNotice}</h3></a> 
    <a href="{xen:link reports/}" class="reports"><h3 class="reports">{xen:phrase reports}</h3></a>
<xen:if is="{$visitor.is_admin}">
    <a href="{xen:link admin.php}" class="admincp"><h3 class="admincp">Admin CP</h3></a>
</xen:if>
</div>
</xen:if>

N'oubliez pas de créer les expressions afin que les textes s'affichent bien !

Le CSS :
Code:
.iconsModerationBar {
border: 1px solid #a5cae4;
border-radius: 10px;
padding: 13px;
}
h3.bannis {
font-family: Open Sans Condensed;
font-size: 14px;
display: inline;
margin-right: 10px;
}
h3.bannis:before {
font-family: "FontAwesome";
content: "\f05e";
padding-right: 5px;
}
h3.classement {
font-family: Open Sans Condensed;
font-size: 14px;
display: inline;
margin-right: 10px;
}
h3.classement:before {
font-family: "FontAwesome";
content: "\f0cb";
padding-right: 5px;
}
h3.admincp {
font-family: Open Sans Condensed;
font-size: 14px;
display: inline;
float: right;
}
h3.admincp:before {
font-family: "FontAwesome";
content: "\f023";
padding-right: 5px;
}
h3.notice {
font-family: Open Sans Condensed;
font-size: 14px;
display: inline;
margin-right: 10px;
}
h3.notice:before {
font-family: "FontAwesome";
content: "\f0e6";
padding-right: 5px;
}
h3.reports {
font-family: Open Sans Condensed;
font-size: 14px;
display: inline;
}
h3.reports:before {
font-family: "FontAwesome";
content: "\f129";
padding-right: 5px;
}
h3.bannis:hover {
color: #6b8fa8;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
texy-decoration: none;
}
a.rank:hover {
color: #6b8fa8;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
texy-decoration: none;
}
a.notice:hover {
color: #6b8fa8;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
texy-decoration: none;
}
a.admincp:hover {
color: #6b8fa8;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
texy-decoration: none;
}
a.reports:hover {
color: #6b8fa8;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
texy-decoration: none;
}
.iconsModerationBar a {
color: #25323b;
}

Voir la pièce jointe 94020

C'est déjà fini pour ce tutoriel, si vous avez des questions je suis disponible en privé ou sur ce topic ! :)

Bonne journée :bye:

Rédigé le 28/07/2016, programmé.
Salut si on utilise une bar, par exemple le jour que l'on passer en version superieur( MAJ ) nous devrons reinstaller le code ? dans extra CCS
 

HayzenRG

Ancien VIP
Contributeur
Inscription
10 Août 2012
Messages
8 669
Réactions
4 087
Points
16 902
    Réponse de HayzenRG Informatique ⌨️ Programmation Programmation web : Créer une barre de modération sur votre forum
  • #8

Insomniaque97

Contributeur
Inscription
21 Juillet 2015
Messages
1 088
Réactions
502
Points
5 085
    Réponse de Insomniaque97 Informatique ⌨️ Programmation Programmation web : Créer une barre de modération sur votre forum
  • #9
Voir la pièce jointe 94019

Bonjour et bienvenue dans ce topic où je vais vous montrer comment créer une barre de modération sur votre forum qui remplacera donc celle déjà présente de base. Personnellement, je la trouve beaucoup plus belle et plus fonctionnel que l'ancienne :smile:

Voir la pièce jointe 94020

Tout d'abord, vous allez devoir créer deux templates et jouer avec les balises <xen:require> , <xen:if> et <xen:include>.

Créez votre première template que vous allez nommer moderationBar (exemple).
Une fois votre template crée, créez en une deuxième que vous allez nommer moderationBar.css (exemple).

Rendez vous dans votre première template où vous allez inclure votre template.css avec ce code :

<xen:require css="moderationBar.css"/>

Grâce à cette ligne, votre template sera obligé d'aller chercher du contenu css sur votre seconde template que vous avez crée plus tôt.

Maintenant, nous allons donner l'obligation d'afficher cette barre aux modérateurs et aux administrateurs via une balise <xen:if> qui se présente comme ceci :

<xen:if is="{$visitor.is_admin} OR {$visitor.is_moderator}">

Maintenant que vous avez fais vos pré-configuration, rendez vous dans le template PAGE_CONTAINER pour y inclure votre template.
Cherchez :

Code:
<xen:include template="ad_above_top_breadcrumb" />
               
                        <xen:hook name="page_container_breadcrumb_top">
                        <div class="breadBoxTop {xen:if $topctrl, withTopCtrl}">
                            <xen:if is="{$topctrl}"><div class="topCtrl">{xen:raw $topctrl}</div></xen:if>
                            <xen:include template="breadcrumb"><xen:set var="$microdata">1</xen:set></xen:include>
                        </div>
                        </xen:hook>

Ajoutez en dessous :

Code:
<xen:include template="moderationBar"/>

Dorénavant, votre template moderationBar est incluse en dessous du breadcrumb et sur tout le forum !

Pour tester si tout cela a marché, créez un titre sur votre template moderationBar et si le titre s'affiche en dessus du fil de navigation, tout est bien configuré et il ne vous reste plus qu'à développer votre barre de
modération ! :D

Vous pouvez y ajouter des liens vers les signalements, l'édition de la notice, les membres bannis de la shoutbox ainsi que votre classement, enfin tous les liens que vous voulez montrer à vos modérateurs.

Maintenant, nous allons inclure un lien vers l'adminCP visible uniquement par les administrateurs avec cette balise :

<xen:if is="{$visitor.is_admin}">

N'oubliez pas de fermer vos balise <xen:if> ;)

Je vous montre mon rendu :

Voir la pièce jointe 94023

C'est pas mal non ? :p

Si vous voulez, voici mon code :
Code:
<xen:if is="{$visitor.is_admin} OR {$visitor.is_moderator}">

<xen:require css="moderationbar.css"/>
<div class="iconsModerationBar">
    <a href="{xen:link shoutbox/banned}" class="ban"><h3 class="bannis">{xen:phrase userBanned}</h3></a>
    <a href="{xen:link shoutbox/classement}" class="rank"><h3 class="classement">{xen:phrase shoutRank}</h3></a>
    <a href="{xen:link shoutbox/motd}" class="notice"><h3 class="notice">{xen:phrase editNotice}</h3></a> 
    <a href="{xen:link reports/}" class="reports"><h3 class="reports">{xen:phrase reports}</h3></a>
<xen:if is="{$visitor.is_admin}">
    <a href="{xen:link admin.php}" class="admincp"><h3 class="admincp">Admin CP</h3></a>
</xen:if>
</div>
</xen:if>

N'oubliez pas de créer les expressions afin que les textes s'affichent bien !

Le CSS :
Code:
.iconsModerationBar {
border: 1px solid #a5cae4;
border-radius: 10px;
padding: 13px;
}
h3.bannis {
font-family: Open Sans Condensed;
font-size: 14px;
display: inline;
margin-right: 10px;
}
h3.bannis:before {
font-family: "FontAwesome";
content: "\f05e";
padding-right: 5px;
}
h3.classement {
font-family: Open Sans Condensed;
font-size: 14px;
display: inline;
margin-right: 10px;
}
h3.classement:before {
font-family: "FontAwesome";
content: "\f0cb";
padding-right: 5px;
}
h3.admincp {
font-family: Open Sans Condensed;
font-size: 14px;
display: inline;
float: right;
}
h3.admincp:before {
font-family: "FontAwesome";
content: "\f023";
padding-right: 5px;
}
h3.notice {
font-family: Open Sans Condensed;
font-size: 14px;
display: inline;
margin-right: 10px;
}
h3.notice:before {
font-family: "FontAwesome";
content: "\f0e6";
padding-right: 5px;
}
h3.reports {
font-family: Open Sans Condensed;
font-size: 14px;
display: inline;
}
h3.reports:before {
font-family: "FontAwesome";
content: "\f129";
padding-right: 5px;
}
h3.bannis:hover {
color: #6b8fa8;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
texy-decoration: none;
}
a.rank:hover {
color: #6b8fa8;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
texy-decoration: none;
}
a.notice:hover {
color: #6b8fa8;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
texy-decoration: none;
}
a.admincp:hover {
color: #6b8fa8;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
texy-decoration: none;
}
a.reports:hover {
color: #6b8fa8;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
texy-decoration: none;
}
.iconsModerationBar a {
color: #25323b;
}

Voir la pièce jointe 94020

C'est déjà fini pour ce tutoriel, si vous avez des questions je suis disponible en privé ou sur ce topic ! :)

Bonne journée :bye:

Rédigé le 28/07/2016, programmé.
Super !
 

Rivals

Développeur
Inscription
27 Août 2016
Messages
904
Réactions
806
Points
6 204
    Réponse de Rivals Informatique ⌨️ Programmation Programmation web : Créer une barre de modération sur votre forum
  • #10

Haut Bas