Hướng dẫn hiện thị bài đăng đầu tiên trên Xenforo nằm ngang

Cách đây vài ngày có bạn hỏi mình cách hiển thị bài đăng đầu tiên trên Xenforo mà avatar của người đăng chủ đề thu gọn lại và nằm ngang trên cùng, để giúp cho không gian của bài đăng được rộng ra giống như diễn đàn Việt Designer đang dùng.

Mặc định thì nó như thế này đây:



Sau khi chỉnh ngang giống Việt Designer thì nó trông như thế này:



Tạo được thêm không gian cho bài đăng được rộng hơn đúng không nào Và lại còn bổ sung thêm nút Like và +1 nữa!

Lưu ý là cái này chỉ áp dụng cho #1, còn các bình luận tiếp theo thì vẫn là mặc định như thế này nhé:



OKAY! Ta bắt đầu tiến hành bài hướng dẫn luôn nhé

1. Đầu tiên, các bạn add đoạn code sau đây vào template EXTRA.css nhé

Code:

/*Display Postbit in first post*/
.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;
}

2. Sau đó bạn tạo 1 template mới và đặt tên nó là message_user_info_firstpost

Sau khi tạo xong template mới, các bạn add đoạn code này vào template này nhé!

Code:

<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"/>
            <!-- slot: message_user_info_avatar -->
        </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>

3. Cuối cùng là các bạn vào template message và tìm đúng đoạn code sau:

Code:

<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>

và thay nó bằng đoạn code này:

Code:

<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>

Thế là xong rồi! Rất đơn giản đúng không nào