Bouton d'avertissement pour modérateurs et administrateurs et BBcode

par **Shadow** Mar 10 Sep 2013 - 10:54

Ce tutoriel vous permet de créer deux nouvelles balises BBCode [mod] et [adm] pour créer des cadres d'avertissements pour les administrateurs et modérateurs. Vous pouvez également ajouter des boutons dans la réponse rapide pour insérer rapidement ces BBCodes.

Voir illustration :

Création des BBCodes et cadres d'avertissement

Création du code Javascript

Citation :: Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript est activée, puis créez un nouveau javascript ayant pour titre "Avertissements modérateur et administrateur" et pour placement "Sur toutes les pages" (plus d'informations sur la gestion des scripts).

Insérez-y le code suivant :

Code:: $(function() {

jQuery('div.postbody div, div.post-content').each(function () {
if(jQuery(this).text().indexOf('[adm]') != -1) {
jQuery(this).html(jQuery(this).html().replace(/\[adm\](.+?)\[\/adm\]/gi, '<div class="adm_mess"><div class="titl">Avertissement Administrateur</div><div>$1 </div></div>')) }
});

jQuery('div.postbody div, div.post-content').each(function () {
if(jQuery(this).text().indexOf('[mod]') != -1) {
jQuery(this).html(jQuery(this).html().replace(/\[mod\](.+?)\[\/mod\]/gi, '<div class="mod_mess"><div class="titl">Avertissement Modérateur</div><div>$1 </div></div>')) }
}); });

N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Mise en place du CSS

Citation :: Panneau d'administration  Affichage  Couleurs - Feuille de style CSS

Ajoutez le code suivant :

Code:: /*Bouton avertissement rapide */

.mod_mess, .adm_mess {
margin: 5px auto;
width: 90%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

.mod_mess a.postlink, .adm_mess a.postlink {
color: #FFF !important;
text-decoration: underline !important;
}

/* administrateur bb-Code - bloc de message d'avertissement*/

.adm_mess {
background: #e54858;
background: -moz-linear-gradient(left, #e54858 0%, #f5b57a 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #e54858), color-stop(100%, #f5b57a));
background: -webkit-linear-gradient(left, #e54858 0%, #f5b57a 100%);
background: -o-linear-gradient(left, #e54858 0%, #f5b57a 100%);
background: -ms-linear-gradient(left, #e54858 0%, #f5b57a 100%);
background: linear-gradient(left, #e54858 0%, #f5b57a 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e54858", endColorstr="#f5b57a", GradientType=1);
-webkit-box-shadow: 4px 4px 0px 0px #352727;
-moz-box-shadow: 4px 4px 0px 0px #352727;
box-shadow: 4px 4px 0px 0px #352727;
}

/* Administrateur bb-Code - mise en page */
.adm_mess .titl {
font-size: 15px;
font-weight: bold;
padding: 5px;
border-bottom: 1px dashed #B60505;
}

/* Administrateur BB-Code - présentation du texte */
.adm_mess .titl + div {
display: block;
margin-left: 10px;
padding: 25px 5px 25px 80px;
background: transparent url(http://i33.servimg.com/u/f33/17/37/83/89/gnome-10.png) no-repeat left center;
}

/* Messages BB-Code - bloc de message d'avertissement*/

.mod_mess {
background: #5c93f5;
background: -moz-linear-gradient(left, #5c93f5 0%, #afcfda 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #5c93f5), color-stop(100%, #afcfda));
background: -webkit-linear-gradient(left, #5c93f5 0%, #afcfda 100%);
background: -o-linear-gradient(left, #5c93f5 0%, #afcfda 100%);
background: -ms-linear-gradient(left, #5c93f5 0%, #afcfda 100%);
background: linear-gradient(left, #5c93f5 0%, #afcfda 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5c93f5", endColorstr="#afcfda", GradientType=1);
-webkit-box-shadow: 4px 4px 0px 0px #352727;
-moz-box-shadow: 4px 4px 0px 0px #352727;
box-shadow: 4px 4px 0px 0px #352727;
}

/* Messages BB-Code - Un titre */
.mod_mess .titl {
font-size: 15px;
font-weight: bold;
padding: 5px;
border-bottom: 1px dashed #0D4DD3;
}

/* modérateur BB-Code - présentation du texte */
.mod_mess .titl + div {
display: block;
margin-left: 10px;
padding: 25px 5px 25px 80px;
background: transparent url(http://i33.servimg.com/u/f33/17/37/83/89/gnome610.png) no-repeat left center;
}

N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Ajout de boutons au dessus de l'éditeur

Ce code vous permet, une fois les BBCodes configurés, d'ajouter des boutons permettant de les insérer plus rapidement dans votre message.

Citation :: Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript est activée, puis créez un nouveau javascript ayant pour titre "Bouton avertissements modérateur et administrateur" et pour placement "Sur les sujets" (plus d'informations sur la gestion des scripts).

Insérez-y le code suivant :

Code:: $(function() {
if (_userdata.user_level == 2) {
jQuery("#text_editor_textarea").before("<img src='https://i.servimg.com/u/f73/11/66/92/55/bouton12.png' title='Avertissement Modo' id='modbutt' />");

jQuery('#modbutt').click(function(){
jQuery("div.sceditor-toolbar + iframe").contents().find("body").append('[mod][/mod]');
jQuery('.sceditor-container textarea')[0].value += '[mod][/mod]';
});
}

if(_userdata.user_level == 1) {
jQuery("#text_editor_textarea").before("<img src='https://i.servimg.com/u/f73/11/66/92/55/bouton13.png' title='Avertissement Admin' id='admbutt' />");

jQuery('#admbutt').click(function(){
jQuery("div.sceditor-toolbar + iframe").contents().find("body").append('[adm][/adm]');
jQuery('.sceditor-container textarea')[0].value += '[adm][/adm]';
});
}
});

N'oubliez pas de cliquer sur le bouton Valider afin de sauvegarder les modifications.

Bouton d'avertissement pour modérateurs et administrateurs et BBcode

Vous et Forumactif...

Trucs et astuces