Firstpost postbit display in thread

[AdminAdmin is verified member.]

Bài viết sẽ hướng dẫn các bạn cách làm hiển thị bài viết đầu tiên dạng nằm ngang, các reply sẽ hiển thị theo kiểu mặc định.

1. Mở template EXTRA.css thêm đoạn code sau:

/*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. Tạo template mới với tên message_user_info_firstpost

<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>
      <div class="tweet shareControl">
            <a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal"
        data-lang="{xen:helper twitterLang, $visitorLanguage.language_code}"
        data-url="{$url}"
        {xen:if {$xenOptions.tweet.via}, 'data-via="{$xenOptions.tweet.via}"'}
        {xen:if {$xenOptions.tweet.related}, 'data-related="{$xenOptions.tweet.related}"'}>{xen:phrase tweet}</a>
      </div>
</span> 
    <span class="arrow"><span></span></span>
</div>
</div>

3. Mở template message tìm đoạn code sau:

<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 bằng:

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