Hướng dẫn hiển thị bài viết đầu tiên nằm ngang trên XenForo

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,086
Được Like
10,205
Nếu như bạn không thích khung thành viên của bài viết đầu tiên nằm dọc theo mặc định của XenForo . Và bạn muốn tùy biến nó nằm ngang để trong đẹp hơn. Thì bài viết này sẽ hướng dẫn bạn cách tùy biến!

a9442441209dcb76d61e40021b4c299f.png

Các bạn thêm đoạn sau vào template EXTRA.css
Mã:
.firstPost .messageUserInfo {
    float: none;
}
.firstPost .messageUserInfo .messageUserBlock .arrow {
    display: none;
}
.firstPost .messageInfo {
    margin-left: 5px !important;
    margin-top: 10px;
}
.newIndicator {
    display: none !important;
}

.firstPost .messageUserInfo {
    width: 100% !important;
}
.firstPost .messageUserInfo .messageUserBlock .arrow {
    display: none;
}
.firstPost .messageUserBlock {
    -moz-border-bottom-colors: none !important;
    -moz-border-image: none !important;
    -moz-border-left-colors: none !important;
    -moz-border-right-colors: none !important;
    -moz-border-top-colors: none !important;
    background: none repeat scroll 0 0 transparent !important;
    border-color: -moz-use-text-color -moz-use-text-color #CDE5F0 !important;
    border-style: none none dashed !important;
    border-width: 0 0 1px !important;
    height: 64px;
}
.firstPost .avatar .img {
    margin-left: 0 !important;
}
.firstPost .avatarHolder {
    padding: 0 !important;
    position: absolute !important;
}
.firstPost .userText {
    margin-left: 58px;
    position: absolute !important;
    top: 18px;
}
.firstPost .tt_share_page {
    margin-left: 220px;
    position: absolute;
    top: 34px;
    width: 420px;
}
.firstPost .shareControl {
    float: right;
}
.firstPost .addthis {
    padding-left: 20px;
}
.titleBar h1 {
    font-size: 20pt !important;
}

Sau đó bạn tạo 1 template mới và đặt tên nó là message_user_info_firstpost . Và Paste đoạn sau vào
Mã:
<xen:require css="message_user_info.css" />
<div class="messageUserInfo" itemscope="itemscope" itemtype="http://data-vocabulary.org/Person">
    <div class="messageUserBlock">
        <xen:hook name="message_user_info_avatar" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
            <div class="avatarHolder"> <span class="helper"></span>
                <xen:avatar user="$user" size="s" />
            </div>
        </xen:hook>
        <xen:if is="!{$isQuickReply}">
            <xen:hook name="message_user_info_text" params="{xen:array 'user={$user}', 'isQuickReply={$isQuickReply}'}">
                <h3 class="userText"> <xen:username user="$user" itemprop="name" rich="true" /> <xen:if hascontent="true"><em class="userTitle" itemprop="title"><xen:contentcheck>{xen:helper userTitle, $user}</xen:contentcheck></em></xen:if> <!-- slot: message_user_info_text --> </h3> </xen:hook>
        </xen:if> <span class="tt_share_page"> <div class="facebookLike shareControl"> <fb:like href="{$url}" layout="button_count" action="{$xenOptions.facebookLikeAction}" font="trebuchet ms" colorscheme="@fbColorScheme"></fb:like> </div> <div class="plusone shareControl"> <div class="g-plusone" data-size="medium" data-count="true" data-href="{$url}"> </div> </span> <span class="arrow"><span></span></span>
    </div>
</div>

Tiếp đến bạn vào template message tìm đoạn sau:
Mã:
<li id="{$messageId}" class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_admin} OR {$message.is_moderator}', 'staff'} {xen:if $message.isIgnored, ignored}" data-author="{$message.username}"> <xen:include template="message_user_info"> <xen:map from="$message" to="$user" />
.......
.......
</xen:include>

Thay thế thành:
Mã:
<xen:if is="{$post.position} == 0 AND !{$message.conversation_id}">
    <li id="{$messageId}" class="message firstPost {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_admin} OR {$message.is_moderator}', 'staff'} {xen:if $message.isIgnored, ignored}" data-author="{$message.username}">
        <xen:include template="message_user_info_firstpost">
            <xen:map from="$message" to="$user" /> </xen:include>
        <xen:else />
        <li id="{$messageId}" class="message {xen:if $message.isDeleted, 'deleted'} {xen:if '{$message.is_admin} OR {$message.is_moderator}', 'staff'} {xen:if $message.isIgnored, ignored}" data-author="{$message.username}">
            <xen:include template="message_user_info">
                <xen:map from="$message" to="$user" /> </xen:include>
</xen:if>

Đơn giản chỉ vậy thôi . Bây giờ bạn F5 lại và hưởng thành quả nhé! Chúc các bạn thành công!


Nguồn: itonline.vn​
 

Đính kèm

  • a9442441209dcb76d61e40021b4c299f.png
    a9442441209dcb76d61e40021b4c299f.png
    95.8 KB · Lượt xem: 94
  • Like
Reactions: THB

kickchuot

Thượng Đế
Tham gia
14/07/2015
Bài viết
9
Được Like
6
bác hướng dẫn làm cái nền của info bằng hình ảnh bài viết giống tinh tế luôn đi bác
 

nhuttran913

Thượng Đế
Tham gia
18/03/2017
Bài viết
80
Được Like
21
mình đang cần, tìm hoài mà vẫn chưa có bài chia sẽ
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hosting Giá rẻ

hosting free
hosting free
Top Bottom