Warning button for Administrators and Moderators

Go down

Warning button for Administrators and Moderators

Post by Ange Tuteur on Fri 17 Oct 2014 - 15:14

Warning button for Administrators and Moderators

This tutorial will allow you to install warning buttons before the editor, for Moderators and Administrators of your Forumotion forum.

Appearance in quick reply :



Appearance after posting :



Installing buttons

Go to Administration Panel > Modules > JavaScript codes managment and create a new script.

Title : Your choice
Placement : In all the pages
Paste the code below and submit :
Code:
$(function() {
  var modButton = true, admButton = true,
  modImage = 'http://i39.servimg.com/u/f39/18/21/41/30/bouton11.png',
  admImage = 'http://i39.servimg.com/u/f39/18/21/41/30/bouton10.png';

  if (_userdata.user_level != 0 && modButton === true) {
    $("#text_editor_textarea").before("<img src='"+modImage+"' title='Moderator warning' id='mod-b'/>");
    $('#mod-b').click(function(){$('#text_editor_textarea').sceditor('instance').insertText('[mod]','[/mod]')});
  }
  if (_userdata.user_level === 1 && admButton === true) {
    $("#text_editor_textarea").before("<img src='"+admImage+"' title='Admin warning' id='adm-b'/>");
    $('#adm-b').click(function(){$('#text_editor_textarea').sceditor('instance').insertText('[adm]','[/adm]')});
  }
  $('div.postbody div').each(function () {
    if ($(this).text().indexOf('[adm]') != -1) $(this).html($(this).html().replace(/\[adm\](.+?)\[\/adm\]/gi, '<div class="adm_mess"><div class="titl">Administrator Warning</div><div>$1 </div></div>'));
    if ($(this).text().indexOf('[mod]') != -1) $(this).html($(this).html().replace(/\[mod\](.+?)\[\/mod\]/gi, '<div class="mod_mess"><div class="titl">Moderator Warning</div><div>$1 </div></div>'));
  });  
});

Modifications :
There are a few variables you can modify.

modButton : Allows you to toggle the display of the moderator warning button. It takes two values : true and false
admButton : Allows you to toggle the display of the administrator warning button. It takes two values : true and false

true : enabled
false : disabled

How to change the button images ?
modImage : Changes the moderator button. Replace http://i39.servimg.com/u/f39/18/21/41/30/bouton11.png by the URL of your button image.
admImage : Changes the administrator button. Replace http://i39.servimg.com/u/f39/18/21/41/30/bouton10.png by the URL of your button image.


Installing CSS

Go to Administration Panel > Display > Couleurs > CSS stylesheet and paste the codes below into your sheet.
Code:
/* Warning buttons */
 
.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;
}
 
/* Administrator bb-Code - message block */
 
.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;
}
 
/* Administrator bb-Code - title */
.adm_mess .titl {
font-size: 15px;
font-weight: bold;
padding: 5px;
border-bottom: 1px dashed #B60505;  
}
    
/* Administrator BB-Code - text presentation */
.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;
}
 
/* Moderator BB-Code - message block */
 
.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;
}
 
/* Moderator BB-Code - title */
.mod_mess .titl {
font-size: 15px;
font-weight: bold;
padding: 5px;
border-bottom: 1px dashed #0D4DD3;    
}
    
/* Moderator BB-Code - text presentation */
.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;  
}

Remember to tick "No" for optimize your CSS.


Submit and save your CSS, and you're done !



avatar
Ange Tuteur
Forumaster

Male Posts : 13195
Reputation : 2910
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum