• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • Upgrade Your Account
    Hello Guest! Upgrade your account to download all VIP Resource here

Hướng dẫn Làm "Chủ Thớt" - Người tạo chủ đề cho xenforo

NamLee

Bơ Đi Mà Sống
Staff member
Joined
Dec 11, 2015
Messages
2,460
Chủ thớt
#1
Hi all,
Như các bạn thấy thì trên Codevn.Net trong 1 bài viết khi người tạo chủ đề trả lời comment trong chủ đề đó sẽ hiện biểu tượng "Chủ Thớt" ngay avatar.
Hôm nay mình sẽ hướng dẫn các bạn làm "Chủ Thớt" rất đơn giản.

Demo:


Hướng dẫn:

Đầu tiên bạn vào template message_user_info tìm
Code:
<div class="extraUserInfo">
Thêm vào bên dưới
Code:
<xen:if is="{$post.user_id} == {$thread.user_id} && {$post.position} != 0">
        <div class="codevn">
            <span>Chủ Thớt</span>
        </div>
        </xen:if>
Save lại

Đối với style mặc định chưa hiển thị thông tin bên dưới của thành viên như ngày tham gia, bài viết, đã được thích, điểm thành tích... thì các bạn tìm
Code:
<xen:hook name="message_user_info_avatar" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
Thêm vào bên dưới
Code:
<xen:if is="{$post.user_id} == {$thread.user_id} && {$post.position} != 0">
        <div class="codevn">
            <span>Chủ Thớt</span>
        </div>
        </xen:if>
Vào template EXTRA.css thêm vào đoạn css sau:
Code:
.codevn {
height: 75px;
left: -5px;
overflow: hidden;
position: absolute;
text-align: right;
top: -5px;
width: 75px;
z-index: 1;
}
.codevn span {
background: rgba(0, 0, 0, 0) linear-gradient(rgb(36, 111, 175) 0%, rgb(36, 111, 175) 100%) repeat scroll 0 0;
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
color: #fff;
display: block;
font-size: 10px;
font-weight: bold;
left: -21px;
line-height: 20px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 19px;
transform: rotate(-45deg);
width: 100px;
}
.codevn span::before {
border-color: rgb(36, 111, 175) transparent transparent rgb(36, 111, 175);
border-style: solid;
border-width: 3px;
content: "";
left: 0;
position: absolute;
top: 100%;
z-index: -1;
}
.codevn span::after {
border-color: rgb(36, 111, 175) rgb(36, 111, 175) transparent transparent;
border-style: solid;
border-width: 3px;
content: "";
position: absolute;
right: 0;
top: 100%;
}
Lưu lại và tận hưởng nhé.
Chúc các bạn thành công
 

Facebook Comment

New posts New resources Most viewed threads Threads with more replies