Ce tutoriel vous permettra d'installer des boutons d'avertissement sous forme de réponse rapide pour les modérateurs et les administrateurs 
Apparence dans la réponse rapide :
Apparence après publication : 
Maintenant passons à la mise en pratique
1) Création des Widgets
- Bouton Avertissement Modérateur
Créer un widget avec seul accès aux modérateurs et administrateurs (Comment créer un widget ?) et installez-le sur la page principale de la colonne activée.
Insérer ce code dans la source du widget :
- Code:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#text_editor_textarea").before("<img src='http://i73.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]'
});
});
</script>
- Bouton Avertissement Administrateur
Créer un widget avec des droits d'accès pour les administrateurs et mettre la page d'accueil dans la colonne activée.
Insérer ce code dans la source du widget :
- Code:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#text_editor_textarea").before("<img src='http://i73.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]'
});
});
</script>
2) Création d'un Javascript
PA -> Module -> Html et Javascript -> Gestion des codes Javascript -> Créer un nouveau Javascript
Remplir les champs :
Titre : ce que vous souhaitez ex : "Avertissement rapide modo et Admin"
Placement : Sur toutes les pages
Code Javascript : Copier/ coller celui fourni ci dessous :
- Code:
$(function() {
jQuery('div.postbody div').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').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>')) }
}); });
3) Mise en place du CSS
Dans PA -> Affichage -> Couleurs -> Feuille de style Css
Ajouter les éléments suivant à la fin de votre feuille :
- 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'enregistrement */
.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'enregistrement */
.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;
}
/* modernité 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 cocher "Non" pour optimiser le CSS.
|
Accueil
Créer un forum
Bouton Avertissement Rapide pour Modo et Admin
par Shadow le Mar 10 Sep 2013 - 10:54
