Demo:
Mã này chỉ thích hợp với giao diện IPB phiên bản PunBB: http://www.hotrofm.net/t695-topic#3374
1. Tìm phần này trong viewtopic_body và xoá nó đi
2. Thay nó bằng đoạn:
3. Tìm đoạn này, copy nó, rồi xóa:
4. Thay bằng:
5. Thêm vào CSS:
6. Tạo một JS mới:
Mã này chỉ thích hợp với giao diện IPB phiên bản PunBB: http://www.hotrofm.net/t695-topic#3374
1. Tìm phần này trong viewtopic_body và xoá nó đi
Code:
<div id="p{postrow.displayed.U_POST_ID}" class="posthead"{postrow.displayed.THANK_BGCOLOR}>
<span style="float:right; font-size: 12px;"><a href="{postrow.displayed.POST_URL}">#{postrow.displayed.COUNT_POSTS}</a></span>
<h4 class="username"><span class="creator">{postrow.displayed.POSTER_NAME}</span> <span style="margin-left: 5px; margin-top: -3px;">{postrow.displayed.ONLINE_IMG}</span></h4>
</div>
2. Thay nó bằng đoạn:
Code:
<div class="post post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
3. Tìm đoạn này, copy nó, rồi xóa:
Code:
<p style="color: #a4a4a4; font-size: 12px;">Posted <span class="data-post">{postrow.displayed.POST_DATE_NEW}</span></p>
4. Thay bằng:
Code:
<div class="post-entry">
5. Thêm vào CSS:
Code:
.icon {
max-height: 8px;
vertical-align: baseline;
}
.post_feature_box {
margin-top: 5px;
max-width:100%;
background-color: rgb(234, 248, 226);
border: 1px dotted rgb(51, 51, 51);
padding: 6px;
min-height: 60px;
}
#best-res {
color: #436500;
background: #dfedd1;
text-shadow: rgba(255,255,255,0.8) 0px 1px 0px;
border: 1px solid #accf8b;
border-top: 0;
padding: 0 12px;
height: 30px;
line-height: 30px;
position: relative;
float: right;
margin: -1px -2px 8px 8px;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius: 0px 0px 3px 3px;
border-radius: 0px 0px 3px 3px;
}
.ipsUserPhoto {
float: left;
padding: 1px;
border: 1px solid #d5d5d5;
background: #fff;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
margin-right: 8px;
}
.ipsUserPhoto:hover {
border-color: #7d7d7d;
}
.ipsUserPhoto img {
width: 50px;
height: 50px;
}
.ipsBadgee {
background: #7ba60d;
display: inline-block;
height: 16px;
line-height: 16px;
padding: 0 5px;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
vertical-align: middle;
margin-right: 8px;
}
6. Tạo một JS mới:
Code:
$(function(){
$('.posthead[style="background-color:#eaf8e2;"]').append('<div id="best-res" class="answerBadgeInPost">✓ Best Answer</div>').attr('style','background-image: -moz-linear-gradient(top, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.3)), color-stop(100%,rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%);background-image: -o-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%);background-image: -ms-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%);background-image: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%);-webkit-box-shadow: inset rgba(255,255,255,0.35) 0px 1px 0px;-moz-box-shadow: inset rgba(255,255,255,0.35) 0px 1px 0px;box-shadow: inset rgba(255,255,255,0.35) 0px 1px 0px;background: #dfedd1;text-shadow: rgba(255,255,255,0.8) 0px 1px 0px;border: 1px solid #accf8b;');
var topicauthor = $('.posthead #best-res').parents('.posthead').find('.creator').html();
var topicavatar = $('.post #best-res').parents('.post').find('.postmain .postbody .user .user-ident .user-basic-info a img').attr('src');
var urlavt= $('.post best-res').parents('.post').find('.postmain .postbody .user .user-ident .user-basic-info a').attr('href');
var topicpost = $('.posthead #best-res').parents('.posthead').find('a.post-number').attr('href');
var topicdata = $('.post #best-res').parents('.post').find('span.data-post').html();
var bestTopic = $('.post #best-res').parents('.post').find('.entry-content').html();
if($('#best-res').length){
$('.main.paged').before('<div class="post_feature_box">
<span class="ipsUserPhoto"><img src="'+topicavatar+'" /></span>
<span class="ipsBadgee">Best Answer</span> '+topicauthor+'
- '+topicdata+'<div style="border: 1px solid #ddd; border-bottom: 1px solid #ececec; margin: 3px;"></div><div style="display: inline-block;">'+bestTopic+'</div> <a href="'+topicpost+'">
<span class="ipsBadgee" style="background: #B3B3B3;font-weight: normal !important;">Go to the full post <img class="icon" src="http://i.imgur.com/omzqZnf.png"></span></a>
</div>');}
});