[TUT] Đóng khung bài viết đẹp 1.0

Hướng dẫn đóng khung bài viết đẹp - Tut viết bởi CTL

  1. Coder Thầm Lặng
    Cũng chỉ là lượm lặt trên mạng rồi edit chút ít thôi nên "Không yêu xin đừng nói lời cay đắng" :D

    Làm tí demo cho nó chuẩn bài :
    1
    2

    Ok bắt đầu nào :
    Mở tempalte post thêm vào trên cùng dòng
    Mã:
    <xen:set var="$ktra">true</xen:set>
    Mở template message tìm :
    HTML:
          <div class="messageContent">
                <article>
                    <blockquote class="messageText ugc baseHtml{xen:if $message.isIgnored, ' ignored'}">
                        <xen:include template="ad_message_body" />
                        {xen:raw $message.messageHtml}
                    </blockquote>
                </article>
     
                {xen:raw $messageContentAfterTemplate}
            </div>
    

    Thay thế bằng :
    HTML:
            <div class="contentduoi">
                <div class="contenttren">
                    <div class="messageContent">
                        <article>
                            <blockquote class="messageText ugc baseHtml{xen:if $message.isIgnored, ' ignored'}">
                                <xen:include template="ad_message_body" />
                                {xen:raw $message.messageHtml}
                            </blockquote>
                        </article>
    <xen:if is="{$ktra}">
                        <span class="comment-number">
                            <a href="{xen:link threads/post-permalink, $thread, 'post={$post}'}" title="{xen:phrase permalink}" class="item muted postNumber hashPermalink OverlayTrigger" data-href="{xen:link posts/permalink, $post}">{xen:calc '{$post.position} + 1'}</a>
                        </span>
    </xen:if>
                        {xen:raw $messageContentAfterTemplate}
                    </div>
                </div>
            </div>
    chọn sang tab message.css :
    thêm vào trên cùng :
    HTML:
    span.comment-number {
        position: absolute;
        top: 10px;
        left: 650px;
        display: block;
        width: 60px;
        height: 56px;
    }
    span.comment-number a {
        background: url(styles/images/comment-number.png) no-repeat;
        display: block;
        width: 60px;
        height: 43px;
        font-size: 16px;
        color: white;
        font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
        text-decoration: none;
        padding: 13px 0px 0px 0px;
        text-align: center;
    }
    tìm
    HTML:
        .message .messageContent
        {
            @property "messageContent";
            min-height: 100px;
            @property "/messageContent";
        }
    thay thế bằng :

    HTML:
        .message .messageContent
        {
            padding: 5px;
            background: url(styles/images/entry-content.png) repeat-y;
            padding-left: 34px;
            padding-right: 34px;
        }
            .message .contenttren
            {
                background: url(styles/images/entry-top.png) repeat-x top left;
                padding-top: 25px;
                width: 682px;
            }
            .message .contentduoi
            {
                background: url(styles/images/entry-bottom.png) no-repeat bottom right;
                padding-bottom: 55px;
                width: 682px;
                position: relative;
                margin-bottom: 11px;
            }
    
    Và cuối cùng, download đính kèm và giải nén vào thư mục style !
    Chúc thành công ! :)
    ducmu, kidnhockit, thb2014 and 8 others like this.
comments powered by Disqus