Bouton Avertissement Rapide pour Modo et Admin

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Bouton Avertissement Rapide pour Modo et Admin

Message par Shadow le Mar 10 Sep 2013 - 10:54

Bouton Avertissement Rapide pour Modo et Admin

Ce tutoriel vous permettra d'installer des boutons d'avertissement sous forme de réponse rapide pour les modérateurs et les administrateurs Very Happy

Apparence dans la réponse rapide  :



Apparence après publication :






Maintenant passons à la mise en pratique Very Happy 

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;  
}
Warning N'oubliez pas  de cocher "Non" pour optimiser le CSS.





Dernière édition par Zen le Lun 16 Sep 2013 - 10:57, édité 1 fois


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Shadow
Adminactive
Adminactive

Féminin
Messages : 23787
Inscrit(e) le : 30/03/2007

http://forum.forumactif.com
Shadow a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum