Home
2014-09-26, 13:31
![[Javascript] IPB thread moderation panel Alerte10](https://i.servimg.com/u/f66/15/86/37/09/alerte10.png) | Tutorial: Moderate your thread |
This tutorial will give you the same look of IPB moderation threads.
Credit goes to: @Deamon
--> Tutorials, tips and tricks <--
Moderate your thread
Moderate your thread
1º - Javascript
Placement: In topics
- Code:
[panda=js] $(function(){
var level = _userdata["user_level"];
var del = $('.main-foot a[href*="mode=delete"]').attr('href');
var trash = $('.main-foot a[href*="mode=trash"]').attr('href');
var move = $('.main-foot a[href*="mode=move"]').attr('href');
var lockunlock = $('.main-foot a[href*="mode=lock"]').attr('href');
var split = $('.main-foot a[href*="mode=split"]').attr('href');
var merge = $('.main-foot a[href*="merge"]').attr('href');
if(level === 1 | level === 2 | trash) {
$('.paged-head').after('<div id="moderation_tool" class="act_mod"><p class="mod" title="Moderate topic">Moderate topic</p></div>');
$('#moderation_tool').append('<div id="popw" class="action_mod">
<div class="mod_hover"></div>
<div class="popwinner">
<li><a href="'+del+'">Delete topic</a></li>
<li><a href="'+trash+'">Trash this topic</a></li>
<li><a href="'+move+'">Move this topic</a></li>
<li><a href="'+lockunlock+'">Lock / Unlock topic</a></li>
<li><a href="'+split+'">Split this topic</a></li>
<li><a href="'+merge+'">Merge topic</a></li>
</div></div>');
$('.mod').click(function(){
$('.action_mod').slideToggle(300);
});
}
});
2º - CSS
- Code:
[panda=css]#moderation_tool {
margin:0 0 8px;
}
#moderation_tool.act_mod p {
-moz-border-radius:3px;
-moz-box-shadow:0 1px 0 rgba(255,255,255,1) inset,0 1px 0 rgba(0,0,0,0.3);
-moz-transition:all .2s ease-in-out;
-webkit-border-radius:3px;
-webkit-box-shadow:0 1px 0 rgba(255,255,255,1) inset,0 1px 0 rgba(0,0,0,0.3);
-webkit-transition:all .2s ease-in-out;
cursor:pointer;
webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
background:0;
background-image:0;
border:1px solid #D9DBDD;
border-radius:3px;
box-shadow:0 1px 0 rgba(255,255,255,1) inset,0 1px 0 rgba(0,0,0,0.3);
color:#616161;
display:inline-block;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f8fa',endColorstr='#edeeef',GradientType=0);
font-size:12px;
height:22px;
line-height:22px;
white-space:nowrap;
padding:0 10px;
}
#popw {
background-color:rgba(70,70,70,0.6);
-webkit-box-shadow:0 8px 15px rgba(0,0,0,0.7);
-moz-box-shadow:0 8px 15px rgba(0,0,0,0.7);
box-shadow:0 8px 15px rgba(0,0,0,0.7);
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
display:none;
z-index:999;
margin-top:16px;
position:absolute;
padding:4px;
}
#popw .mod_hover {
background-image:url(http://i38.servimg.com/u/f38/18/24/85/15/bottom10.png);
width:31px;
height:16px;
top:-16px;
left:5px;
z-index:999;
position:absolute;
}
#popw .popwinner {
background:#fff;
max-height:465px;
width:190px;
overflow:auto;
-webkit-box-shadow:0 0 3px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 3px rgba(0,0,0,0.4);
box-shadow:0 0 3px rgba(0,0,0,0.4);
overflow-x:hidden;
}
#popw .popwinner li {
background:#f8f8f8;
list-style-type:none;
border-bottom:1px solid #eaeaea;
text-align:center;
padding:3px 4px;
}
#popw .popwinner li a {
color:#333!important;
}
3º - Preview
![[Javascript] IPB thread moderation panel J1BUiW2](https://i.imgur.com/j1BUiW2.png)
© PunBB Design
![[Javascript] IPB thread moderation panel Act_bottom](https://www.forumeiros.com/i/img/act_bottom.png) | If you have any questions related to this topic create a topic with the following title: Moderate your thread |
![[Javascript] IPB thread moderation panel Left1011](https://i.servimg.com/u/f57/17/68/86/50/left1011.png){kind=small}
![[Javascript] IPB thread moderation panel Middle10](https://i.servimg.com/u/f72/17/48/02/71/middle10.png){kind=small}
![[Javascript] IPB thread moderation panel Right10](https://i.servimg.com/u/f72/17/48/02/71/right10.png){kind=small}
