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

  • Thread starter Thread starter PVS
  • Ngày gửi Ngày gửi

PVS

Super Moderator
Thành viên BQT
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: 137
  • Like
Reactions: THB
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
 
Back
Top