YOUPASS - convertir le crédit téléphonique en monnaie ! : Partenaire RealityGaming.fr

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

Hayzen.

VIP
VIP
Inscription
10 Août 2012
Messages
8 712
Réactions
4 060
Points
13 842
    Réponse de Hayzen. Forums généraux Informatique ⌨️ Programmation Programmation web : Créer une barre de modération sur votre forum
  • #1
Vous devez être inscrit pour voir les fichiers joints


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:

Vous devez être inscrit pour voir les fichiers joints


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 :

Vous devez être inscrit pour voir les fichiers joints


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;
}

Vous devez être inscrit pour voir les fichiers joints


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
Développeur
Inscription
27 Août 2016
Messages
879
Réactions
755
Points
2 834
    Réponse de Rivals Forums généraux Informatique ⌨️ Programmation Programmation web : Créer une barre de modération sur votre forum
  • #2
D

deleted535977

Invité
    Réponse de deleted535977 Forums généraux 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 Forums généraux Informatique ⌨️ Programmation Programmation web : Créer une barre de modération sur votre forum
  • #4
Merci !
 

Frank Kaska

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

Anarchy2306

Membre Premium
Premium
Inscription
7 Juin 2015
Messages
117
Réactions
12
Points
2 436
    Réponse de Anarchy2306 Forums généraux Informatique ⌨️ Programmation Programmation web : Créer une barre de modération sur votre forum
  • #7
Vous devez être inscrit pour voir les fichiers joints


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:

Vous devez être inscrit pour voir les fichiers joints


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 :

Vous devez être inscrit pour voir les fichiers joints


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;
}

Vous devez être inscrit pour voir les fichiers joints


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
 

Hayzen.

VIP
VIP
Inscription
10 Août 2012
Messages
8 712
Réactions
4 060
Points
13 842
    Réponse de Hayzen. Forums généraux Informatique ⌨️ Programmation Programmation web : Créer une barre de modération sur votre forum
  • #8

Insomniaque97

Donateur
Premium
Inscription
21 Juillet 2015
Messages
1 088
Réactions
503
Points
3 775
    Réponse de Insomniaque97 Forums généraux Informatique ⌨️ Programmation Programmation web : Créer une barre de modération sur votre forum
  • #9
Vous devez être inscrit pour voir les fichiers joints


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:

Vous devez être inscrit pour voir les fichiers joints


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 :

Vous devez être inscrit pour voir les fichiers joints


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;
}

Vous devez être inscrit pour voir les fichiers joints


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
Développeur
Inscription
27 Août 2016
Messages
879
Réactions
755
Points
2 834
    Réponse de Rivals Forums généraux Informatique ⌨️ Programmation Programmation web : Créer une barre de modération sur votre forum
  • #10

Mobile app for XenForo 2 by Appify
Haut