Styles Style XenPorta 2 - SEOMXH

20,200 30 5
chientc

chientc

Gefreiter
Tham gia
10/06/2016
Bài viết
96
Được Like
35
thuyet951 nói:
Mình thấy có nhiều người thích cái Style XenPorta 2 của SEOMXH, vì vậy sau khi rip xong mình đã trích riêng ra cho anh em nào thích thì lấy về sử dụng.

Link tải XenPorta 2 thì anh em xem ở bài viết này: http://vnxf.vn/8wayrun-com-xenporta-2-portal-pro-1-1-7a.t5752.html/page-2#post-37043
Live demo: http://vpet.vn/index.php
Nào!, bây giờ chúng ta bắt đầu thay đổi template nhé.
Trước tiên chúng ta cần sửa lại đôi chút kết cấu của XenForo đã, các bạn mở template "PAGE_CONTAINER"
Tìm đoạn code sau:
Mã: 
                        <xen:include template="ad_above_top_breadcrumb" />
                  
                        <xen:hook name="page_container_breadcrumb_top">
                        <div class="breadBoxTop {xen:if $topctrl, withTopCtrl}">
                            <xen:if is="{$topctrl}"><div class="topCtrl">{xen:raw $topctrl}</div></xen:if>
                            <xen:include template="breadcrumb"><xen:set var="$microdata">1</xen:set></xen:include>
                        </div>
                        </xen:hook>
                  
                        <xen:include template="ad_below_top_breadcrumb" />

Sau đó thay đoạn code phía trên bằng đoạn code dưới đây:
Mã: 
                <xen:if is="{$contentTemplate} == 'EWRporta2_ArticleView'">
                <xen:else />
                        <xen:include template="ad_above_top_breadcrumb" />
                  
                        <xen:hook name="page_container_breadcrumb_top">
                        <div class="breadBoxTop {xen:if $topctrl, withTopCtrl}">
                            <xen:if is="{$topctrl}"><div class="topCtrl">{xen:raw $topctrl}</div></xen:if>
                            <xen:include template="breadcrumb"><xen:set var="$microdata">1</xen:set></xen:include>
                        </div>
                        </xen:hook>
                  
                        <xen:include template="ad_below_top_breadcrumb" />
                </xen:if>

Phần kết cấu xong rồi, bây giờ chúng ta bắt tay vào áp dụng cho XenPorta 2 thôi nào.
Các bạn tìm và mở Template "EWRporta2_ArticleList" sau đó thay tất cả bằng code dưới đây.
Mã: 
<xen:include template="EWRporta2_Global_Above" />

<xen:if is="{$author}">
    <xen:title>{xen:phrase porta2_author}: {$author.author_name}</xen:title>
    <xen:h1>{xen:phrase porta2_author}: {$author.author_name}</xen:h1>
    <xen:description>{xen:phrase porta2_viewing_only_articles_authored_by_x, 'author={$author.author_name}'}</xen:description>

    <xen:container var="$head.rss">
        <link rel="alternate" type="application/rss+xml" title="{xen:phrase rss_feed_for_x,
            'title={xen:phrase porta2_articles} - {$xenOptions.boardTitle}'}" href="{xen:link 'full:articles/index.rss'}" />
        <link rel="alternate" type="application/rss+xml" title="{xen:phrase rss_feed_for_x,
            'title={$author.author_name} - {$xenOptions.boardTitle}'}" href="{xen:link 'full:articles/author.rss', $author}" />
    </xen:container>

    <xen:navigation>
        <xen:breadcrumb href="{xen:link 'full:articles'}">{xen:phrase porta2_articles}</xen:breadcrumb>
        <xen:breadcrumb href="{xen:link 'full:articles/authors'}">{xen:phrase porta2_authors}</xen:breadcrumb>
    </xen:navigation>
<xen:elseif is="{$category}"/>
    <xen:title>{$category.category_name}</xen:title>
    <xen:h1>{$category.category_name}</xen:h1>
    <xen:description>
        <xen:if is="{$category.category_desc}">
            {$category.category_desc}
        <xen:else/>
            {xen:phrase porta2_viewing_only_articles_categorized_with_x, 'cat={$category.category_name}'}
        </xen:if>
    </xen:description>

    <xen:container var="$head.rss">
        <link rel="alternate" type="application/rss+xml" title="{xen:phrase rss_feed_for_x,
            'title={xen:phrase porta2_articles} - {$xenOptions.boardTitle}'}" href="{xen:link 'full:articles/index.rss'}" />
        <link rel="alternate" type="application/rss+xml" title="{xen:phrase rss_feed_for_x,
            'title={$category.category_name} - {$xenOptions.boardTitle}'}" href="{xen:link 'full:articles/category.rss', $category}" />
    </xen:container>

    <xen:navigation>
        <xen:breadcrumb href="{xen:link 'full:articles'}">{xen:phrase porta2_articles}</xen:breadcrumb>
    </xen:navigation>
<xen:else/>
    <xen:h1>{$xenOptions.boardTitle}</xen:h1>
    <xen:description><xen:if is="{$xenOptions.EWRporta2_metadesc}">{$xenOptions.EWRporta2_metadesc}<xen:else/>{$xenOptions.boardDescription}</xen:if></xen:description>

    <xen:container var="$head.rss">
        <link rel="alternate" type="application/rss+xml" title="{xen:phrase rss_feed_for_x,
            'title={xen:phrase porta2_articles} - {$xenOptions.boardTitle}'}" href="{xen:link 'full:articles/index.rss'}" />
    </xen:container>

    <xen:if is="@porta2_articles_breakout">
        <xen:require css="EWRporta2_Breakout.css" />
    </xen:if>
</xen:if>

<xen:container var="$head.openGraph">
    <xen:include template="open_graph_meta">
        <xen:set var="$url">{xen:link 'canonical:articles'}</xen:set>
        <xen:set var="$title">{$xenOptions.boardTitle}</xen:set>
        <xen:set var="$description"><xen:if is="{$xenOptions.EWRporta2_metadesc}">{$xenOptions.EWRporta2_metadesc}<xen:else/>{$xenOptions.boardDescription}</xen:if></xen:set>
        <xen:set var="$ogType">website</xen:set>
    </xen:include>
</xen:container>

<xen:container var="$quickNavSelected">articles</xen:container>

<xen:require css="message_user_info.css" />
<xen:require css="EWRporta2.css" />
<xen:require css="EWRporta2_ArticleList.css" />
<xen:require js="js/8wayrun/EWRporta2_ajax.js?_v={$xenAddOns.EWRporta2}" />

<xen:if is="@porta2_articles_masonry">
    <xen:set var="$masonry">1</xen:set>
    <xen:require js="js/8wayrun/EWRporta2_images.js?_v={$xenAddOns.EWRporta2}" />
    <xen:require js="js/8wayrun/EWRporta2_masonry.js?_v={$xenAddOns.EWRporta2}" />
</xen:if>

<xen:if is="{$start} == 1 && @porta2_articles_infinite && !{$setting.setting_options.scroll}">
    <xen:set var="$infinite">1</xen:set>
    <xen:require js="js/8wayrun/EWRporta2_infinite.js?_v={$xenAddOns.EWRporta2}" />
</xen:if>

<xen:if is="{$features}">
    <div class="section featuresGrid" id="featuresGrid">
        <xen:include template="EWRporta2_Features">
            <xen:set var="$feature_id">featuresGrid</xen:set>
            <xen:set var="$relocate">{$xenOptions.EWRporta2_features_relocate}</xen:set>
        </xen:include>
    </div>
</xen:if>

<xen:if is="{$author}">
    <xen:include template="EWRporta2_AuthorList_Bit" />
</xen:if>

<div id="articlesGrid" class="articlesGrid {xen:if '{$masonry}', 'ArticlesMason'} {xen:if '{$infinite}', 'InfiniteScroll'}"
    data-masonry="{$masonry}" data-items=".articleItem" data-nav=".articlePager" data-next=".articlePager a:last" data-control=".articleControl">
    <div class="introduce_supplier">

        <center><font size="4" color="red">{$xenOptions.boardTitle}</font>
        </center>
        <div class="desc"><xen:if is="{$xenOptions.EWRporta2_metadesc}">{$xenOptions.EWRporta2_metadesc}<xen:else/>{$xenOptions.boardDescription}</xen:if></div>
    </div>
    <div id="T-Styles-Porta2">
        <div class="main">
            <div class="suppliers_list">
        <xen:foreach loop="$articles" value="$article"><xen:include template="EWRporta2_ArticleList_Bit" /></xen:foreach>
            </div>
        </div>
    </div>
</div>

<xen:if is="{$infinite}">
    <div class="sectionMain articleControl InfiniteControl" data-target=".articlesGrid" data-pager=".articlePager">
        <div class="pause button">{xen:phrase porta2_pause_infinite_scrolling}</div>
        <div class="resume">
            <div class="muted"><a href="{xen:link articles/settings}">{xen:phrase porta2_change_article_list_settings}</a></div>
            <div class="button">{xen:phrase porta2_resume_infinite_scrolling}</div>
        </div>
    </div>
</xen:if>

<xen:if hascontent="true">
    <div class="sectionMain articlePager">
        <xen:contentcheck>
        <xen:if is="{$author}">
            <xen:pagenav link="articles/author" linkdata="{$author}" page="{$start}" perpage="{$stop}" total="{$count}" />
        <xen:elseif is="{$category}"/>
            <xen:pagenav link="articles/category" linkdata="{$category}" page="{$start}" perpage="{$stop}" total="{$count}" />
        <xen:else/>
            <xen:pagenav link="articles" page="{$start}" perpage="{$stop}" total="{$count}" />
        </xen:if>
        </xen:contentcheck>
    </div>
</xen:if>

<xen:include template="EWRporta2_Global_Below" />
<xen:include template="EWRporta2_Global_Side" />

- Tiếp theo các bạn tìm tiếp template "EWRporta2_ArticleList_Bit" mở nó lên và thay bằng code dưới đây:
Mã: 
<div class="articleItem" id="article_{$article.thread_id}">
                <div class="suppliers" id="article_{$article.thread_id}">
                    <div class="dot dot_icon_{$article.thread_id}_t"></div>
                    <div class="arrow"></div>
                    <h2 class="suppliers_promotion"> <a href="{xen:link threads, $article}" title="{$article.article_title}">{$article.article_title}</a></h2>
                    <div class="suppliers_area">
                        <div class="content_threadinfo"> <div class="avatarNews"> <xen:avatar user="$article" size="s" class="Tooltip" title="{$article.username}" itemprop="photo" /> </div>
                            <div class="meta"> <span class="user author" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <a href="{xen:link members, $article}" class="username" dir="auto"><span class="style5">{$article.username}</span>
                                </a>
                                </span> <span class="DateTime" title="{xen:date $article.article_date, 'd'}/{xen:date $article.article_date, 'm'}/{xen:date $article.article_date, 'y'} - {xen:time $article.article_date}">{xen:date $article.article_date, 'd'}/{xen:date $article.article_date, 'm'}/{xen:date $article.article_date, 'y'}</span>
                            </div>
                            <div class="right"> <span class="like"><i class="fa fa-thumbs-up"></i> {xen:number $article.share_count}</span> <span class="reply"><i class="fa fa-comment"></i> {xen:number $article.reply_count}</span> <span class="view"><i class="fa fa-eye"></i> {xen:number $article.view_count}</span>
                            </div>
                        </div>
                        <div class="newsText">
                            <div align="center">
                            <xen:if hascontent="true">
                    <xen:contentcheck>
                    <xen:if is="{$article.article_icon.type} == 'avatar'">
                        <xen:avatar user="$article" size="s" class="Tooltip" title="{$article.username}" itemprop="photo" />
                    <xen:elseif is="!@porta2_articles_header" />
                        <xen:if is="{$article.article_icon.type} == 'attach'">
                            <a class="attachHolder" href="{xen:link threads, $article}">
                                <xen:if is="@porta2_articles_fullsize">
                                    <img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}" class="bbCodeImage" />
                                <xen:else/>
                                    <img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}" class="bbCodeImage" />
                                </xen:if>
                            </a>
                        <xen:elseif is="{$article.article_icon.type} == 'image'" />
                            <a class="attachHolder" href="{xen:link threads, $article}"><img src="{$article.article_icon.data.url}" alt="{$article.article_icon.data.file}" /></a>
                        <xen:elseif is="{$article.article_icon.type} == 'medio'" />
                            <a class="medioHolder OverlayTrigger"style="background-image: url('{xen:helper medio2, $article.article_icon.data}');"
                                href="{xen:link 'full:media/media', $article.article_icon.data}" data-href="{xen:link 'full:media/media/popout', $article.article_icon.data}"
                                data-cacheOverlay="false" data-overlayoptions="{&quot;fixed&quot;:false}">
                                    <img src="styles/8wayrun/EWRmedio_play.png" />
                            </a>
                        </xen:if>
                    </xen:if>
                    </xen:contentcheck>

                            </xen:if>
                            </div>
                            <br>
                {xen:raw $article.messageHtml}
          
                <xen:if is="{$article.article_break}">
                    <a href="{xen:link threads, $article}">{$article.article_break}...</a>
                </xen:if>
                            </div>
                    </div>
                </div>
</div>

Vậy là phần trang chủ XenPorta 2 đã được chúng ta định dạng, cuối cùng các bạn mở template "EWRporta2.css" và thêm vào dưới cùng đoạn css dưới đây.
Mã: 
.EWRporta2_ArticleList .breadBoxTop, .EWRporta2_ArticleList .breadBoxBottom {
    display: none;
}
.EWRporta2_ArticleList .titleBar {
    display: none;
}
#T-Styles-Porta2 .titleBar {
    display: none
}
.introduce_supplier {
    background: url('@imagePath/img/introduceS.png');
    padding: 12px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 2px 0px 0px rgb(226, 226, 226);
    -moz-box-shadow: 0 2px 0px 0px rgb(226, 226, 226);
    -khtml-box-shadow: 0 2px 0px 0px rgb(226, 226, 226);
    box-shadow: 0 2px 0px 0px rgb(226, 226, 226);
    border: 1px solid rgb(226, 226, 226)
}
.introduce_supplier h2 {
    color: #3a5795;
    font-size: 20px;
    padding-bottom: 10px;
    text-align: center;
    font-weight: 700
}
@media (max-width: 480px) {
    .introduce_supplier h2 {
        font-size: 14px
    }
}
.introduce_supplier .desc {
    color: #666;
    font-style: italic;
    line-height: 20px;
    text-align: justify;
    text-align: justify
}
#T-Styles-Porta2 {
    padding-left: 35px;
    padding-bottom: 20px;
    background: url('@imagePath/img/line.gif') repeat-y 10px;
    zoom: 1;
}
#T-Styles-Porta2 .main {
    width: 100%;
    padding-top: 25px
}
#T-Styles-Porta2 .suppliers {
    -webkit-box-shadow: 0 2px 0px 0px rgb(226, 226, 226);
    -moz-box-shadow: 0 2px 0px 0px rgb(226, 226, 226);
    -khtml-box-shadow: 0 2px 0px 0px rgb(226, 226, 226);
    box-shadow: 0 2px 0px 0px rgb(226, 226, 226);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid rgb(226, 226, 226);
    background: #FFF;
    margin-bottom: 15px;
    position: relative
}
#T-Styles-Porta2 .suppliers .dot {
    background-image: url('@imagePath/img/dot.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    position: absolute;
    width: 20px;
    height: 20px;
    left: -34px;
    top: 82px;
}
#T-Styles-Porta2 .suppliers .dot_icon_2_t {
    background-position: 0 -20px
}
#T-Styles-Porta2 .suppliers .dot_icon_5_t {
    background-position: 0 -40px
}
#T-Styles-Porta2 .suppliers .dot_icon_4_t {
    background-position: 0 -60px
}
#T-Styles-Porta2 .suppliers .dot_icon_213_t {
    background-position: 0 -80px
}
#T-Styles-Porta2 .suppliers .dot_icon_87_t {
    background-position: 0 -100px
}
#T-Styles-Porta2 .suppliers .dot_icon_69_t {
    background-position: 0 -120px
}
#T-Styles-Porta2 .suppliers .dot_icon_67_t {
    background-position: 0 -140px
}
#T-Styles-Porta2 .suppliers .dot_icon_63_t {
    background-position: 0 -160px
}
#T-Styles-Porta2 .suppliers .dot_icon_70_t {
    background-position: 0 -180px
}
#T-Styles-Porta2 .suppliers .dot_icon_71_t {
    background-position: 0 -200px
}
#T-Styles-Porta2 .suppliers .dot_icon_74_t {
    background-position: 0 -220px
}
#T-Styles-Porta2 .suppliers .dot_icon_72_t {
    background-position: 0 -240px
}
#T-Styles-Porta2 .suppliers .dot_icon_84_t {
    background-position: 0 -260px
}
#T-Styles-Porta2 .suppliers .dot_icon_83_t {
    background-position: 0 -280px
}
#T-Styles-Porta2 .suppliers .dot_icon_77_t {
    background-position: 0 -300px
}
#T-Styles-Porta2 .suppliers .dot_icon_220_t {
    background-position: 0 -320px
}
#T-Styles-Porta2 .suppliers .dot_icon_112_t {
    background-position: 0 -340px
}
#T-Styles-Porta2 .suppliers .dot_icon_221_t {
    background-position: 0 -360px
}
#T-Styles-Porta2 .suppliers .dot_icon_115_t {
    background-position: 0 -380px
}
#T-Styles-Porta2 .suppliers .dot_icon_122_t {
    background-position: 0 -400px
}
#T-Styles-Porta2 .suppliers .dot_icon_73_t {
    background-position: 0 -420px
}
#T-Styles-Porta2 .suppliers .dot_icon_110_t {
    background-position: 0 -440px
}
#T-Styles-Porta2 .suppliers .dot_icon_111_t {
    background-position: 0 -460px
}
#T-Styles-Porta2 .suppliers .dot_icon_46_t {
    background-position: 0 -480px
}
#T-Styles-Porta2 .suppliers .dot_icon_96_t {
    background-position: 0 -500px
}
#T-Styles-Porta2 .suppliers .dot_icon_97_t {
    background-position: 0 -520px
}
#T-Styles-Porta2 .suppliers .dot_icon_98_t {
    background-position: 0 -540px
}
#T-Styles-Porta2 .suppliers .dot_icon_99_t {
    background-position: 0 -560px
}
#T-Styles-Porta2 .suppliers .dot_icon_57_t {
    background-position: 0 -580px
}
#T-Styles-Porta2 .suppliers .arrow {
    width: 11px;
    height: 22px;
    background: url('@imagePath/img/arrow.png') no-repeat 0 0;
    position: absolute;
    left: -11px;
    top: 80px
}
#T-Styles-Porta2 .suppliers_area {
    display: table;
    table-layout: fixed;
    width: 100%;
    word-wrap: normal;
    padding: 15px;
    border-top: 1px solid rgb(240, 240, 240);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    text-align: justify;
    text-justify: newspaper
}
#T-Styles-Porta2 .suppliers_area .suppliers_left {
    float: left;
    width: 300px;
    height: 225px;
    margin-right: 15px
}
#T-Styles-Porta2 .suppliers_area .suppliers_author {
    font-size: 11px;
    color: #666;
    line-height: 20px;
    text-decoration: none
}
#T-Styles-Porta2 .suppliers_area .suppliers_author a:hover {
    color: #FF4163;
    text-decoration: none
}
#T-Styles-Porta2 h2.suppliers_promotion a:hover {
    color: #FF4163;
    text-decoration: none
}
#T-Styles-Porta2 .suppliers_area .suppliers_more .suppliers_img {
    width: 300px;
    height: 225px;
    overflow: hidden;
    position: absolute;
    left: 15px;
    top: 15px
}
#T-Styles-Porta2 .suppliers_area .suppliers_more .suppliers_img img {
    width: 300px;
    height: auto
}
#T-Styles-Porta2 .suppliers_area .suppliers_more .suppliers_desc {
    position: absolute;
    left: 330px;
    font-size: 13px;
    padding-right: 15px;
    color: #666;
    font-style: italic;
    line-height: 22px
}
#T-Styles-Porta2 .suppliers_promotion {
    font-size: 20px;
    background: rgb(250, 250, 250);
    padding: 15px;
    font-weight: 700
}
#T-Styles-Porta2 .suppliers_promotion b {
    color: #FF4163
}
#T-Styles-Porta2 .suppliers_promotion a:hover {
    color: #FF4163;
    text-decoration: none
}
.suppliers_ribbon {
    position: absolute;
    right: -6px;
    top: -6px;
    z-index: 1;
    overflow: hidden;
    width: 75px;
    height: 75px;
    text-align: right
}
.suppliers_ribbon span {
    font-size: 10px;
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 100px;
    display: block;
    background: #79A70A;
    background: linear-gradient(#FF728B 0%, #FF4163 100%);
    -webkit-box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    -khtml-box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 19px;
    right: -21px
}
.suppliers_ribbon span::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 100%;
    z-index: -1;
    border-left: 3px solid #FF4163;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #FF4163
}
.suppliers_ribbon span::after {
    content: "";
    position: absolute;
    right: 0px;
    top: 100%;
    z-index: -1;
    border-left: 3px solid transparent;
    border-right: 3px solid #FF4163;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #FF4163
}
.PageNavsuppliers {
    background: url('@imagePath/img/introduceS.png');
    padding: 12px;
    -webkit-box-shadow: 0 -2px 0px 0px rgb(226, 226, 226);
    -moz-box-shadow: 0 -2px 0px 0px rgb(226, 226, 226);
    -khtml-box-shadow: 0 -2px 0px 0px rgb(226, 226, 226);
    box-shadow: 0 -2px 0px 0px rgb(226, 226, 226);
    border: 1px solid rgb(226, 226, 226)
}
.PageNavsuppliers .PageNav .itemL {
    float: right
}
.natMenuLevel0 {
    padding-left: 0px
}
.natMenuLevel1 {
    padding-left: 10px
}
.natMenuLevel2 {
    padding-left: 20px
}
.natMenuLevel3 {
    padding-left: 30px
}
.natMenuLevel4 {
    padding-left: 40px
}
.natMenuLevel5 {
    padding-left: 50px
}
.natMenuLevel6 {
    padding-left: 60px
}
.natMenuLevel7 {
    padding-left: 70px
}
.natMenuLevel8 {
    padding-left: 80px
}
.natMenuLevel9 {
    padding-left: 90px
}
.natMenuLevel10 {
    padding-left: 100px
}
.bbCodeImage {
    max-width: 100%
}
.content_threadinfo {
    float: left;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
    border-bottom: 1px dashed #d7edfc;
    width: 100%
}
.avatarNews {
    display: block;
    float: left;
    margin: 0 5px 0 0px
}

.content_threadinfo .meta {
    display: block;
    min-height: 50px;
    float: left
}
.content_threadinfo .user {
    margin: 0px 0px 5px 0px;
    font-size: 12px;
    font-weight: 700;
    line-height: 19px
}
.content_threadinfo .DateTime {
    display: block;
    font-size: 11px
}
.content_threadinfo .like {
    color: #196eee;
    display: block;
    float: right;
    font-size: 15px;
    font-weight: bold;
    margin: 0 10px 0 0;
    padding: 2px 0 0 22px
}
.content_threadinfo .reply {
    color: #da4531;
    display: block;
    float: right;
    font-size: 15px;
    font-weight: bold;
    margin: 0 10px 0 0;
    padding: 2px 0 0 22px
}
.content_threadinfo .view {
    color: #009957;
    display: block;
    float: right;
    font-size: 15px;
    font-weight: bold;
    margin: 0 10px 0 0;
    padding: 2px 0 0 22px
}
#T-Styles-Porta2 .suppliers_area .newsText {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 350;
    text-align: justify;
    text-justify: newspaper
}
@media (max-width: 961px) {}@media (max-width: 641px) {
    .content_threadinfo .like,
    .content_threadinfo .reply,
    .content_threadinfo .view {
        font-size: 11px;
        padding: 2px 0 0 5px
    }
    #T-Styles-Porta2 .suppliers_area .newsText,
    .content_threadinfo .user {
        font-size: 12px
    }
    .content_threadinfo .DateTime {
        font-size: 11px
    }
    #T-Styles-Porta2 .suppliers_area {
        display: none
    }
    #T-Styles-Porta2 .suppliers_promotion {
        font-size: 14px
    }
    #T-Styles-Porta2 .suppliers .dot {
        top: 20px
    }
    #T-Styles-Porta2 .suppliers .arrow {
        top: 18px
    }
}
@media (max-width: 481px) {
    .content_threadinfo .like,
    .content_threadinfo .reply,
    .content_threadinfo .view {
        font-size: 10px;
        padding: 2px 0 0 5px
    }
    #T-Styles-Porta2 .suppliers_area .newsText,
    .content_threadinfo .user {
        font-size: 11px
    }
    .content_threadinfo .DateTime {
        font-size: 10px
    }
    #T-Styles-Porta2 .suppliers_area {
        display: none
    }
    #T-Styles-Porta2 .suppliers_promotion {
        font-size: 13px
    }
    #T-Styles-Porta2 .suppliers .dot {
        top: 20px
    }
    #T-Styles-Porta2 .suppliers .arrow {
        top: 18px
    }
}
.grid {
    position: relative;
    margin: -3.3% -3% 0 -3%;
    _padding: 1em 0 4em;
    _max-width: 1000px;
    list-style: none;
    text-align: center;
}

/* Common style */
.grid .T-Thread-UserInfo {
    position: absolute;
    bottom: 10px;
    left: 10px;
}
.grid .T-Thread-UserInfo a {
    color: #fff;
    }
.grid .T-Thread-UserInfo span {
    font-size: 18px;
    margin-top: -30px;
}
.grid .T-Thread-Avarta {
    float: left;
    margin-right: 15px;
}
.grid figure {
    position: relative;
    _float: left;
    overflow: hidden;
    margin: 10px 1%;
    _min-width: 320px;
    _max-width: 480px;
    _max-height: 360px;
    _width: 48%;
    background: #3085a3;
    text-align: center;
    cursor: pointer;
}

.grid figure img {
    position: relative;
    display: block;
    min-height: 100%;
    max-width: 100%;
    opacity: 0.8;
}

.grid figure figcaption {
    _padding: 10px 20px;
    color: #fff;
    _text-transform: uppercase;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
    pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.grid figure figcaption > a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
}

.grid figure h2 {
    _word-spacing: -0.15em;
    font-weight: 300;
    font-size: 21px;
}

.grid figure h2 span {
    font-weight: 800;
}

.grid figure h2,
.grid figure p {
    margin: 0;
}

.grid figure p {
    letter-spacing: 1px;
    font-size: 68.5%;
}
figure.effect-sarah {
    background: #42b078;
}

figure.effect-sarah img {
    max-width: none;
    width: -webkit-calc(100% + 20px);
    width: calc(100% + 20px);
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

figure.effect-sarah:hover img {
    opacity: 0.4;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-sarah figcaption {
    text-align: left;
}

figure.effect-sarah h2 {
    position: relative;
    overflow: hidden;
    padding: 10px 15px;
    background-color: rgba(0, 0, 0, 0.25);
    text-transform: uppercase;
}

figure.effect-sarah h2::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #F44336;
    content: '';
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}

figure.effect-sarah:hover h2::after {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-sarah p {
    padding: 5px 15px;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(100%,0,0);
    -webkit-transform: translate3d(100%,0,0);
    -moz-transform: translate3d(100%,0,0);
    -o-transform: translate3d(100%,0,0);
    -ms-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
    background-color: rgba(0, 0, 0, 0.25);
}
figure.effect-sarah p a {
    color: #fff;
}
figure.effect-sarah:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
@media screen and (max-width: 50em) {
    .content {
        padding: 0 10px;
        text-align: center;
    }
    .grid figure {
        display: inline-block;
        float: none;
        margin: 10px auto;
        width: 100%;
    }
}

Ok, bây giờ chúng ta tiếp tục thêm chút "màu mè" cho phần bài viết được Promotion bởi XenPorta 2 nhé.
- Các bạn tìm và mở template "EWRporta2_ArticleView" sau đó thay tất cả bằng code dưới đây.
Mã: 
<xen:include template="EWRporta2_Global_Above" />

<xen:title>{xen:helper threadPrefix, $thread, escaped}{$thread.title}{xen:helper pagenumber, $page}</xen:title>
<xen:h1>{xen:helper threadPrefix, $thread}{$thread.title}</xen:h1>

<xen:description>
    {xen:phrase discussion_in_x_started_by_y_date_z,
        'forum=<a href="{xen:link forums, $forum}">{$forum.title}</a>',
        'name={xen:helper username, $thread}',
        'date=<a href="{xen:link threads, $thread}">{xen:datetime $thread.post_date, html}</a>'}
</xen:description>

<xen:navigation>
    <xen:breadcrumb source="$nodeBreadCrumbs" />
</xen:navigation>

<xen:container var="$head.article">
    <link rel="canonical" href="{xen:link 'canonical:threads', $thread, 'page={$page}'}" />
    <meta name="title" content="{xen:helper threadPrefix, $thread, escaped}{$thread.title}" />
    <meta name="description" content="{xen:helper snippet, $firstPost.message, 155}" />

    <xen:if is="{$article.article_icon.type} == 'attach'">
        <meta property="og:image" content="{$article.article_icon.data.thumbnailUrl}" />
    <xen:elseif is="{$article.article_icon.type} == 'image'" />
        <meta property="og:image" content="{$article.article_icon.data.url}" />
    <xen:elseif is="{$article.article_icon.type} == 'medio'" />
        <meta property="og:image" content="{xen:helper medio, $article.article_icon.data}" />
    </xen:if>

    <xen:include template="open_graph_meta">
        <xen:set var="$url">{xen:link 'canonical:threads', $thread}</xen:set>
        <xen:set var="$title">{xen:helper threadPrefix, $thread, escaped}{$thread.title}</xen:set>
        <xen:set var="$description">{xen:helper snippet, $firstPost.message, 155}</xen:set>
        <xen:set var="$avatar">{xen:helper avatar, $thread, m, 0, 1}</xen:set>
    </xen:include>
</xen:container>

<xen:container var="$bodyClasses">{xen:helper nodeClasses, $nodeBreadCrumbs, $forum}{xen:if {$xenOptions.selectQuotable}, ' SelectQuotable'}</xen:container>
<xen:container var="$searchBar.thread"><xen:include template="search_bar_thread_only" /></xen:container>
<xen:container var="$searchBar.forum"><xen:include template="search_bar_forum_only" /></xen:container>

<xen:if is="{$canReply}">
    <xen:comment><xen:topctrl>
        <a href="{xen:link 'threads/reply', $thread}" class="callToAction"><span>{xen:phrase reply_to_thread}</span></a>
    </xen:topctrl></xen:comment>
</xen:if>

<xen:require css="thread_view.css" />
<xen:require css="EWRporta2.css" />
<xen:require css="EWRporta2_ArticleView.css" />
<xen:require js="js/8wayrun/EWRporta2_ajax.js?_v={$xenAddOns.EWRporta2}" />
                <div class="grid">
                    <figure class="effect-sarah">
                            <xen:if hascontent="true">
                    <xen:contentcheck>
                    <xen:if is="{$article.article_icon.type} == 'avatar'">
                        <xen:avatar user="$article" size="s" class="Tooltip" title="{$article.username}" itemprop="photo" />
                    <xen:elseif is="!@porta2_articles_header" />
                        <xen:if is="{$article.article_icon.type} == 'attach'">
                            <a class="attachHolder" href="{xen:link threads, $article}">
                                <xen:if is="@porta2_articles_fullsize">
                                    <img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}" class="bbCodeImage" />
                                <xen:else/>
                                    <img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}" class="bbCodeImage" />
                                </xen:if>
                            </a>
                        <xen:elseif is="{$article.article_icon.type} == 'image'" />
                            <a class="attachHolder" href="{xen:link threads, $article}"><img src="{$article.article_icon.data.url}" alt="{$article.article_icon.data.file}" /></a>
                        <xen:elseif is="{$article.article_icon.type} == 'medio'" />
                            <a class="medioHolder OverlayTrigger"style="background-image: url('{xen:helper medio2, $article.article_icon.data}');"
                                href="{xen:link 'full:media/media', $article.article_icon.data}" data-href="{xen:link 'full:media/media/popout', $article.article_icon.data}"
                                data-cacheOverlay="false" data-overlayoptions="{&quot;fixed&quot;:false}">
                                    <img src="styles/8wayrun/EWRmedio_play.png" />
                            </a>
                        </xen:if>
                    </xen:if>
                    </xen:contentcheck>

                            </xen:if>
                        <figcaption>
                            <h2>{$thread.title}</h2>
                            <p><a href="{xen:link forums, $forum}">{$forum.title}</a>, <a href="{xen:link threads, $thread}">{xen:datetime $thread.post_date, html}</a>. Trả lời: {xen:number $article.reply_count}, lượt xem: {xen:number $article.view_count}.</p>
                        </figcaption>
                        <div class="T-Thread-UserInfo">
                        <div class="T-Thread-Avarta">
                        <xen:avatar user="$posts.{$thread.first_post_id}" size="s" />
                        </div>
                        <span>
                        <a href="{xen:link members, $article}" class="username" dir="auto">{$article.username}</a>
                        </span>
                        </div>
      
                    </figure>
                </div>
<div class="section messageAuthor">
    <xen:if is="{$xenOptions.addThis.enabled}">
        <xen:include template="addthis_ajax">
            <xen:set var="$url">{xen:link full:threads, $thread}</xen:set>
        </xen:include>
    <xen:else/>
        <xen:hook name="EWRporta2_article_share_page_options">
            <xen:if is="{$xenOptions.facebookLike}">
                <div class="facebookLike shareControl">
                    <xen:container var="$facebookSdk">1</xen:container>
                    <fb:like href="{xen:link 'canonical:threads', $thread}" layout="button_count" action="{$xenOptions.facebookLikeAction}" font="trebuchet ms" colorscheme="@fbColorScheme"></fb:like>
                </div>
            </xen:if>
            <xen:if is="{$xenOptions.plusone}">
                <div class="plusone shareControl">
                    <div class="g-plusone" data-size="medium" data-count="true" data-url="{xen:link 'canonical:threads', $thread}" data-lang="{$visitorLanguage.language_code}"></div>
                </div>
            </xen:if>
            <xen:if is="{$xenOptions.tweet.enabled}">
                <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="{xen:link 'canonical:threads', $thread}"
                        {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>
            </xen:if>
        </xen:hook>
    </xen:if>



</div>

<div class="pageNavLinkGroup">
    <div class="linkGroup">
        <xen:if hascontent="true">
            <div class="Popup">
                <a rel="Menu">{xen:phrase porta2_article_tools}</a>
                <div class="Menu">
                    <div class="primaryContent menuHeader"><h3>{xen:phrase porta2_article_tools}</h3></div>
                    <ul class="secondaryContent blockLinksList">
                        <xen:contentcheck>
                            <xen:if is="{$canEditThread}">
                                <li><a href="{xen:link 'threads/edit', $thread}" class="OverlayTrigger">{xen:phrase edit_thread}</a></li>
                            <xen:elseif is="{$canEditTitle}" />
                                <li><a href="{xen:link threads/edit-title, $thread}" class="OverlayTrigger">{xen:phrase edit_title}</a></li>
                            </xen:if>
                            <xen:if is="{$canAddPoll}">
                                <li><a href="{xen:link 'threads/poll/add', $thread}">{xen:phrase add_poll}</a></li>
                            </xen:if>
                            <xen:if is="{$canDeleteThread}">
                                <li><a href="{xen:link 'threads/delete', $thread}" class="OverlayTrigger">{xen:phrase delete_thread}</a></li>
                            </xen:if>
                            <xen:if is="{$canMoveThread}">
                                <li><a href="{xen:link 'threads/move', $thread}" class="OverlayTrigger">{xen:phrase move_thread}</a></li>
                            </xen:if>
                            <xen:if is="{$canReplyBan}">
                                <li><a href="{xen:link 'threads/reply-bans', $thread}" class="OverlayTrigger">{xen:phrase manage_reply_bans}</a></li>
                            </xen:if>
                            <xen:if is="{$canViewModeratorLog}">
                                <li><a href="{xen:link 'threads/moderator-actions', $thread}" class="OverlayTrigger">{xen:phrase moderator_actions}</a></li>
                            </xen:if>
                            <xen:if is="{$deletedPosts}">
                                <li><a href="{xen:link threads/show-posts, $thread, 'page={$page}'}" class="MessageLoader" data-messageSelector="#messageList .message.deleted.placeholder">{xen:phrase show_deleted_posts}</a></li>
                            </xen:if>
                            <xen:hook name="thread_view_tools_links" params="{xen:array 'thread={$thread}'}" />
                        </xen:contentcheck>
                    </ul>
                </div>
            </div>
        </xen:if>
    </div>

    <xen:include template="EWRporta2_Article_Categories">
        <xen:map from="$categories.cats" to="$categories" />
    </xen:include>
</div>

<ol class="messageList messageArticle">
    <xen:include template="post">
        <xen:map from="$posts.{$thread.first_post_id}" to="$post" />
    </xen:include>
</ol>

<xen:if is="{$author}">
    <xen:include template="EWRporta2_AuthorList_Bit" />
</xen:if>

<xen:if is="{$xenOptions.EWRporta2_subcategories} && ({$categories.tags} || {$perms.tag})">
    <div class="sectionMain catList">
        <div class="secondaryContent">
            <xen:if is="{$perms.moderate}">
                <a href="{xen:link 'threads/subcats', $article}" class="edit OverlayTrigger" data-cacheOverlay="false"></a>
            </xen:if>
      
            <span class="muted">{xen:phrase porta2_subcats}:</span>
      
            <xen:include template="EWRporta2_Article_Subcats">
                <xen:map from="$categories.tags" to="$tags" />
            </xen:include>
  
            <xen:if is="{$perms.tag}">
            <form action="{xen:link threads/add-subcats, $thread}" method="post" class="xenForm AutoValidator SubcatEditor" data-redirect="true">
                <dl class="ctrlUnit fullWidth">
                    <dt></dt>
                    <dd>
                        <input type="search" name="new_tags" value="" placeholder="{xen:phrase porta2_subcat_this_article}..." results="0" class="textCtrl AutoComplete"
                            data-acurl="{xen:link articles/find-subcats}" />
                        <xen:if is="!{$perms.tags}"><p class="explain">{xen:phrase porta2_subcat_this_article_hint}</p></xen:if>
                    </dd>
                </dl>
                <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
            </form>
            </xen:if>
        </div>
    </div>
</xen:if>

<xen:if is="{$poll}">
    <xen:include template="poll_block">
        <xen:set var="$options">
            <xen:if is="{$poll.canVote} AND !{$poll.hasVoted}">
                <xen:include template="poll_block_vote" />
            <xen:else />
                <xen:include template="poll_block_result" />
            </xen:if>
        </xen:set>
    </xen:include>
</xen:if>

<xen:include template="EWRporta2_Global_Below_1" />

<xen:hook name="thread_view_pagenav_before" params="{xen:array 'thread={$thread}'}" />

<xen:if hascontent="true">
    <div class="titleBar" id="comments">
        <h1>{xen:phrase comments}</h1>
        <p id="commentsDescription" class="muted">{xen:phrase discussion_in_x_started_by_y_date_z,
            'forum=<a href="{xen:link forums, $forum}">{$forum.title}</a>',
            'name={xen:helper username, $thread}',
            'date=<a href="{xen:link threads, $thread}">{xen:datetime $thread.post_date, html}</a>'}</p>
    </div>

    <ul class="tabs mainTabs Tabs {xen:if '{xen:count $article.comment_count} == 1', 'onlyOne'}" data-panes="#CommentPanes > li" data-history="on">
        <xen:contentcheck>
        <xen:if is="{$article.article_options.local}">
            <li id="tabLocal"><a href="{$requestPaths.requestUri}#commentsLocal">{xen:phrase porta2_local_comments}</a></li>
        </xen:if>
        <xen:if is="{$xenOptions.EWRporta2_promote_disqus} && {$article.article_options.disqus}">
            <li id="tabDisqus"><a href="{$requestPaths.requestUri}#commentsDisqus">{xen:phrase porta2_disqus_comments}</a></li>
        </xen:if>
        <xen:if is="{$xenOptions.EWRporta2_promote_facebook} && {$article.article_options.facebook}">
            <li id="tabFacebook"><a href="{$requestPaths.requestUri}#commentsFacebook">{xen:phrase porta2_facebook_comments}</a></li>
        </xen:if>
        </xen:contentcheck>
    </ul>

    <ul id="CommentPanes">
        <xen:if is="{$article.article_options.local}">
            <li id="commentsLocal" class="commentPane"><xen:include template="EWRporta2_ArticleView_Comments" /></li>
        </xen:if>
        <xen:if is="{$xenOptions.EWRporta2_promote_disqus} && {$article.article_options.disqus}">
            <li id="commentsDisqus" class="commentPane"><xen:include template="EWRporta2_ArticleView_Disqus" /></li>
        </xen:if>
        <xen:if is="{$xenOptions.EWRporta2_promote_facebook} && {$article.article_options.facebook}">
            <li id="commentsFacebook" class="commentPane"><xen:include template="EWRporta2_ArticleView_Facebook" /></li>
        </xen:if>
    </ul>
</xen:if>

<xen:include template="share_page">
    <xen:set var="$url">{xen:link 'canonical:threads', $thread}</xen:set>
</xen:include>

<xen:include template="EWRporta2_Global_Below_2" />
<xen:include template="EWRporta2_Global_Side" />

Bây giờ quay lại trang chủ và F5 để xem thay đổi thôi nào.
Chú ý: có thể nhiều style sẽ hiển thị đôi chút sai lệnh, nếu gặp lổi các bạn thảo luận tại chủ đề này luôn nhé.
Quên mất, các bạn tải thư mục "img" dưới đính kèm và upload lên thư mục style các bạn đang sử dụng nhẹ.
Nhấn để mở rộng...
Chay đk 1.5.7 k bác
 
chientc

chientc

Gefreiter
Tham gia
10/06/2016
Bài viết
96
Được Like
35
thuyet951 nói:
Mình thấy có nhiều người thích cái Style XenPorta 2 của SEOMXH, vì vậy sau khi rip xong mình đã trích riêng ra cho anh em nào thích thì lấy về sử dụng.

Link tải XenPorta 2 thì anh em xem ở bài viết này: http://vnxf.vn/8wayrun-com-xenporta-2-portal-pro-1-1-7a.t5752.html/page-2#post-37043
Live demo: http://vpet.vn/index.php
Nào!, bây giờ chúng ta bắt đầu thay đổi template nhé.
Trước tiên chúng ta cần sửa lại đôi chút kết cấu của XenForo đã, các bạn mở template "PAGE_CONTAINER"
Tìm đoạn code sau:
Mã: 
                        <xen:include template="ad_above_top_breadcrumb" />
                  
                        <xen:hook name="page_container_breadcrumb_top">
                        <div class="breadBoxTop {xen:if $topctrl, withTopCtrl}">
                            <xen:if is="{$topctrl}"><div class="topCtrl">{xen:raw $topctrl}</div></xen:if>
                            <xen:include template="breadcrumb"><xen:set var="$microdata">1</xen:set></xen:include>
                        </div>
                        </xen:hook>
                  
                        <xen:include template="ad_below_top_breadcrumb" />

Sau đó thay đoạn code phía trên bằng đoạn code dưới đây:
Mã: 
                <xen:if is="{$contentTemplate} == 'EWRporta2_ArticleView'">
                <xen:else />
                        <xen:include template="ad_above_top_breadcrumb" />
                  
                        <xen:hook name="page_container_breadcrumb_top">
                        <div class="breadBoxTop {xen:if $topctrl, withTopCtrl}">
                            <xen:if is="{$topctrl}"><div class="topCtrl">{xen:raw $topctrl}</div></xen:if>
                            <xen:include template="breadcrumb"><xen:set var="$microdata">1</xen:set></xen:include>
                        </div>
                        </xen:hook>
                  
                        <xen:include template="ad_below_top_breadcrumb" />
                </xen:if>

Phần kết cấu xong rồi, bây giờ chúng ta bắt tay vào áp dụng cho XenPorta 2 thôi nào.
Các bạn tìm và mở Template "EWRporta2_ArticleList" sau đó thay tất cả bằng code dưới đây.
Mã: 
<xen:include template="EWRporta2_Global_Above" />

<xen:if is="{$author}">
    <xen:title>{xen:phrase porta2_author}: {$author.author_name}</xen:title>
    <xen:h1>{xen:phrase porta2_author}: {$author.author_name}</xen:h1>
    <xen:description>{xen:phrase porta2_viewing_only_articles_authored_by_x, 'author={$author.author_name}'}</xen:description>

    <xen:container var="$head.rss">
        <link rel="alternate" type="application/rss+xml" title="{xen:phrase rss_feed_for_x,
            'title={xen:phrase porta2_articles} - {$xenOptions.boardTitle}'}" href="{xen:link 'full:articles/index.rss'}" />
        <link rel="alternate" type="application/rss+xml" title="{xen:phrase rss_feed_for_x,
            'title={$author.author_name} - {$xenOptions.boardTitle}'}" href="{xen:link 'full:articles/author.rss', $author}" />
    </xen:container>

    <xen:navigation>
        <xen:breadcrumb href="{xen:link 'full:articles'}">{xen:phrase porta2_articles}</xen:breadcrumb>
        <xen:breadcrumb href="{xen:link 'full:articles/authors'}">{xen:phrase porta2_authors}</xen:breadcrumb>
    </xen:navigation>
<xen:elseif is="{$category}"/>
    <xen:title>{$category.category_name}</xen:title>
    <xen:h1>{$category.category_name}</xen:h1>
    <xen:description>
        <xen:if is="{$category.category_desc}">
            {$category.category_desc}
        <xen:else/>
            {xen:phrase porta2_viewing_only_articles_categorized_with_x, 'cat={$category.category_name}'}
        </xen:if>
    </xen:description>

    <xen:container var="$head.rss">
        <link rel="alternate" type="application/rss+xml" title="{xen:phrase rss_feed_for_x,
            'title={xen:phrase porta2_articles} - {$xenOptions.boardTitle}'}" href="{xen:link 'full:articles/index.rss'}" />
        <link rel="alternate" type="application/rss+xml" title="{xen:phrase rss_feed_for_x,
            'title={$category.category_name} - {$xenOptions.boardTitle}'}" href="{xen:link 'full:articles/category.rss', $category}" />
    </xen:container>

    <xen:navigation>
        <xen:breadcrumb href="{xen:link 'full:articles'}">{xen:phrase porta2_articles}</xen:breadcrumb>
    </xen:navigation>
<xen:else/>
    <xen:h1>{$xenOptions.boardTitle}</xen:h1>
    <xen:description><xen:if is="{$xenOptions.EWRporta2_metadesc}">{$xenOptions.EWRporta2_metadesc}<xen:else/>{$xenOptions.boardDescription}</xen:if></xen:description>

    <xen:container var="$head.rss">
        <link rel="alternate" type="application/rss+xml" title="{xen:phrase rss_feed_for_x,
            'title={xen:phrase porta2_articles} - {$xenOptions.boardTitle}'}" href="{xen:link 'full:articles/index.rss'}" />
    </xen:container>

    <xen:if is="@porta2_articles_breakout">
        <xen:require css="EWRporta2_Breakout.css" />
    </xen:if>
</xen:if>

<xen:container var="$head.openGraph">
    <xen:include template="open_graph_meta">
        <xen:set var="$url">{xen:link 'canonical:articles'}</xen:set>
        <xen:set var="$title">{$xenOptions.boardTitle}</xen:set>
        <xen:set var="$description"><xen:if is="{$xenOptions.EWRporta2_metadesc}">{$xenOptions.EWRporta2_metadesc}<xen:else/>{$xenOptions.boardDescription}</xen:if></xen:set>
        <xen:set var="$ogType">website</xen:set>
    </xen:include>
</xen:container>

<xen:container var="$quickNavSelected">articles</xen:container>

<xen:require css="message_user_info.css" />
<xen:require css="EWRporta2.css" />
<xen:require css="EWRporta2_ArticleList.css" />
<xen:require js="js/8wayrun/EWRporta2_ajax.js?_v={$xenAddOns.EWRporta2}" />

<xen:if is="@porta2_articles_masonry">
    <xen:set var="$masonry">1</xen:set>
    <xen:require js="js/8wayrun/EWRporta2_images.js?_v={$xenAddOns.EWRporta2}" />
    <xen:require js="js/8wayrun/EWRporta2_masonry.js?_v={$xenAddOns.EWRporta2}" />
</xen:if>

<xen:if is="{$start} == 1 && @porta2_articles_infinite && !{$setting.setting_options.scroll}">
    <xen:set var="$infinite">1</xen:set>
    <xen:require js="js/8wayrun/EWRporta2_infinite.js?_v={$xenAddOns.EWRporta2}" />
</xen:if>

<xen:if is="{$features}">
    <div class="section featuresGrid" id="featuresGrid">
        <xen:include template="EWRporta2_Features">
            <xen:set var="$feature_id">featuresGrid</xen:set>
            <xen:set var="$relocate">{$xenOptions.EWRporta2_features_relocate}</xen:set>
        </xen:include>
    </div>
</xen:if>

<xen:if is="{$author}">
    <xen:include template="EWRporta2_AuthorList_Bit" />
</xen:if>

<div id="articlesGrid" class="articlesGrid {xen:if '{$masonry}', 'ArticlesMason'} {xen:if '{$infinite}', 'InfiniteScroll'}"
    data-masonry="{$masonry}" data-items=".articleItem" data-nav=".articlePager" data-next=".articlePager a:last" data-control=".articleControl">
    <div class="introduce_supplier">

        <center><font size="4" color="red">{$xenOptions.boardTitle}</font>
        </center>
        <div class="desc"><xen:if is="{$xenOptions.EWRporta2_metadesc}">{$xenOptions.EWRporta2_metadesc}<xen:else/>{$xenOptions.boardDescription}</xen:if></div>
    </div>
    <div id="T-Styles-Porta2">
        <div class="main">
            <div class="suppliers_list">
        <xen:foreach loop="$articles" value="$article"><xen:include template="EWRporta2_ArticleList_Bit" /></xen:foreach>
            </div>
        </div>
    </div>
</div>

<xen:if is="{$infinite}">
    <div class="sectionMain articleControl InfiniteControl" data-target=".articlesGrid" data-pager=".articlePager">
        <div class="pause button">{xen:phrase porta2_pause_infinite_scrolling}</div>
        <div class="resume">
            <div class="muted"><a href="{xen:link articles/settings}">{xen:phrase porta2_change_article_list_settings}</a></div>
            <div class="button">{xen:phrase porta2_resume_infinite_scrolling}</div>
        </div>
    </div>
</xen:if>

<xen:if hascontent="true">
    <div class="sectionMain articlePager">
        <xen:contentcheck>
        <xen:if is="{$author}">
            <xen:pagenav link="articles/author" linkdata="{$author}" page="{$start}" perpage="{$stop}" total="{$count}" />
        <xen:elseif is="{$category}"/>
            <xen:pagenav link="articles/category" linkdata="{$category}" page="{$start}" perpage="{$stop}" total="{$count}" />
        <xen:else/>
            <xen:pagenav link="articles" page="{$start}" perpage="{$stop}" total="{$count}" />
        </xen:if>
        </xen:contentcheck>
    </div>
</xen:if>

<xen:include template="EWRporta2_Global_Below" />
<xen:include template="EWRporta2_Global_Side" />

- Tiếp theo các bạn tìm tiếp template "EWRporta2_ArticleList_Bit" mở nó lên và thay bằng code dưới đây:
Mã: 
<div class="articleItem" id="article_{$article.thread_id}">
                <div class="suppliers" id="article_{$article.thread_id}">
                    <div class="dot dot_icon_{$article.thread_id}_t"></div>
                    <div class="arrow"></div>
                    <h2 class="suppliers_promotion"> <a href="{xen:link threads, $article}" title="{$article.article_title}">{$article.article_title}</a></h2>
                    <div class="suppliers_area">
                        <div class="content_threadinfo"> <div class="avatarNews"> <xen:avatar user="$article" size="s" class="Tooltip" title="{$article.username}" itemprop="photo" /> </div>
                            <div class="meta"> <span class="user author" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <a href="{xen:link members, $article}" class="username" dir="auto"><span class="style5">{$article.username}</span>
                                </a>
                                </span> <span class="DateTime" title="{xen:date $article.article_date, 'd'}/{xen:date $article.article_date, 'm'}/{xen:date $article.article_date, 'y'} - {xen:time $article.article_date}">{xen:date $article.article_date, 'd'}/{xen:date $article.article_date, 'm'}/{xen:date $article.article_date, 'y'}</span>
                            </div>
                            <div class="right"> <span class="like"><i class="fa fa-thumbs-up"></i> {xen:number $article.share_count}</span> <span class="reply"><i class="fa fa-comment"></i> {xen:number $article.reply_count}</span> <span class="view"><i class="fa fa-eye"></i> {xen:number $article.view_count}</span>
                            </div>
                        </div>
                        <div class="newsText">
                            <div align="center">
                            <xen:if hascontent="true">
                    <xen:contentcheck>
                    <xen:if is="{$article.article_icon.type} == 'avatar'">
                        <xen:avatar user="$article" size="s" class="Tooltip" title="{$article.username}" itemprop="photo" />
                    <xen:elseif is="!@porta2_articles_header" />
                        <xen:if is="{$article.article_icon.type} == 'attach'">
                            <a class="attachHolder" href="{xen:link threads, $article}">
                                <xen:if is="@porta2_articles_fullsize">
                                    <img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}" class="bbCodeImage" />
                                <xen:else/>
                                    <img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}" class="bbCodeImage" />
                                </xen:if>
                            </a>
                        <xen:elseif is="{$article.article_icon.type} == 'image'" />
                            <a class="attachHolder" href="{xen:link threads, $article}"><img src="{$article.article_icon.data.url}" alt="{$article.article_icon.data.file}" /></a>
                        <xen:elseif is="{$article.article_icon.type} == 'medio'" />
                            <a class="medioHolder OverlayTrigger"style="background-image: url('{xen:helper medio2, $article.article_icon.data}');"
                                href="{xen:link 'full:media/media', $article.article_icon.data}" data-href="{xen:link 'full:media/media/popout', $article.article_icon.data}"
                                data-cacheOverlay="false" data-overlayoptions="{&quot;fixed&quot;:false}">
                                    <img src="styles/8wayrun/EWRmedio_play.png" />
                            </a>
                        </xen:if>
                    </xen:if>
                    </xen:contentcheck>

                            </xen:if>
                            </div>
                            <br>
                {xen:raw $article.messageHtml}
          
                <xen:if is="{$article.article_break}">
                    <a href="{xen:link threads, $article}">{$article.article_break}...</a>
                </xen:if>
                            </div>
                    </div>
                </div>
</div>

Vậy là phần trang chủ XenPorta 2 đã được chúng ta định dạng, cuối cùng các bạn mở template "EWRporta2.css" và thêm vào dưới cùng đoạn css dưới đây.
Mã: 
.EWRporta2_ArticleList .breadBoxTop, .EWRporta2_ArticleList .breadBoxBottom {
    display: none;
}
.EWRporta2_ArticleList .titleBar {
    display: none;
}
#T-Styles-Porta2 .titleBar {
    display: none
}
.introduce_supplier {
    background: url('@imagePath/img/introduceS.png');
    padding: 12px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 2px 0px 0px rgb(226, 226, 226);
    -moz-box-shadow: 0 2px 0px 0px rgb(226, 226, 226);
    -khtml-box-shadow: 0 2px 0px 0px rgb(226, 226, 226);
    box-shadow: 0 2px 0px 0px rgb(226, 226, 226);
    border: 1px solid rgb(226, 226, 226)
}
.introduce_supplier h2 {
    color: #3a5795;
    font-size: 20px;
    padding-bottom: 10px;
    text-align: center;
    font-weight: 700
}
@media (max-width: 480px) {
    .introduce_supplier h2 {
        font-size: 14px
    }
}
.introduce_supplier .desc {
    color: #666;
    font-style: italic;
    line-height: 20px;
    text-align: justify;
    text-align: justify
}
#T-Styles-Porta2 {
    padding-left: 35px;
    padding-bottom: 20px;
    background: url('@imagePath/img/line.gif') repeat-y 10px;
    zoom: 1;
}
#T-Styles-Porta2 .main {
    width: 100%;
    padding-top: 25px
}
#T-Styles-Porta2 .suppliers {
    -webkit-box-shadow: 0 2px 0px 0px rgb(226, 226, 226);
    -moz-box-shadow: 0 2px 0px 0px rgb(226, 226, 226);
    -khtml-box-shadow: 0 2px 0px 0px rgb(226, 226, 226);
    box-shadow: 0 2px 0px 0px rgb(226, 226, 226);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid rgb(226, 226, 226);
    background: #FFF;
    margin-bottom: 15px;
    position: relative
}
#T-Styles-Porta2 .suppliers .dot {
    background-image: url('@imagePath/img/dot.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    position: absolute;
    width: 20px;
    height: 20px;
    left: -34px;
    top: 82px;
}
#T-Styles-Porta2 .suppliers .dot_icon_2_t {
    background-position: 0 -20px
}
#T-Styles-Porta2 .suppliers .dot_icon_5_t {
    background-position: 0 -40px
}
#T-Styles-Porta2 .suppliers .dot_icon_4_t {
    background-position: 0 -60px
}
#T-Styles-Porta2 .suppliers .dot_icon_213_t {
    background-position: 0 -80px
}
#T-Styles-Porta2 .suppliers .dot_icon_87_t {
    background-position: 0 -100px
}
#T-Styles-Porta2 .suppliers .dot_icon_69_t {
    background-position: 0 -120px
}
#T-Styles-Porta2 .suppliers .dot_icon_67_t {
    background-position: 0 -140px
}
#T-Styles-Porta2 .suppliers .dot_icon_63_t {
    background-position: 0 -160px
}
#T-Styles-Porta2 .suppliers .dot_icon_70_t {
    background-position: 0 -180px
}
#T-Styles-Porta2 .suppliers .dot_icon_71_t {
    background-position: 0 -200px
}
#T-Styles-Porta2 .suppliers .dot_icon_74_t {
    background-position: 0 -220px
}
#T-Styles-Porta2 .suppliers .dot_icon_72_t {
    background-position: 0 -240px
}
#T-Styles-Porta2 .suppliers .dot_icon_84_t {
    background-position: 0 -260px
}
#T-Styles-Porta2 .suppliers .dot_icon_83_t {
    background-position: 0 -280px
}
#T-Styles-Porta2 .suppliers .dot_icon_77_t {
    background-position: 0 -300px
}
#T-Styles-Porta2 .suppliers .dot_icon_220_t {
    background-position: 0 -320px
}
#T-Styles-Porta2 .suppliers .dot_icon_112_t {
    background-position: 0 -340px
}
#T-Styles-Porta2 .suppliers .dot_icon_221_t {
    background-position: 0 -360px
}
#T-Styles-Porta2 .suppliers .dot_icon_115_t {
    background-position: 0 -380px
}
#T-Styles-Porta2 .suppliers .dot_icon_122_t {
    background-position: 0 -400px
}
#T-Styles-Porta2 .suppliers .dot_icon_73_t {
    background-position: 0 -420px
}
#T-Styles-Porta2 .suppliers .dot_icon_110_t {
    background-position: 0 -440px
}
#T-Styles-Porta2 .suppliers .dot_icon_111_t {
    background-position: 0 -460px
}
#T-Styles-Porta2 .suppliers .dot_icon_46_t {
    background-position: 0 -480px
}
#T-Styles-Porta2 .suppliers .dot_icon_96_t {
    background-position: 0 -500px
}
#T-Styles-Porta2 .suppliers .dot_icon_97_t {
    background-position: 0 -520px
}
#T-Styles-Porta2 .suppliers .dot_icon_98_t {
    background-position: 0 -540px
}
#T-Styles-Porta2 .suppliers .dot_icon_99_t {
    background-position: 0 -560px
}
#T-Styles-Porta2 .suppliers .dot_icon_57_t {
    background-position: 0 -580px
}
#T-Styles-Porta2 .suppliers .arrow {
    width: 11px;
    height: 22px;
    background: url('@imagePath/img/arrow.png') no-repeat 0 0;
    position: absolute;
    left: -11px;
    top: 80px
}
#T-Styles-Porta2 .suppliers_area {
    display: table;
    table-layout: fixed;
    width: 100%;
    word-wrap: normal;
    padding: 15px;
    border-top: 1px solid rgb(240, 240, 240);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    text-align: justify;
    text-justify: newspaper
}
#T-Styles-Porta2 .suppliers_area .suppliers_left {
    float: left;
    width: 300px;
    height: 225px;
    margin-right: 15px
}
#T-Styles-Porta2 .suppliers_area .suppliers_author {
    font-size: 11px;
    color: #666;
    line-height: 20px;
    text-decoration: none
}
#T-Styles-Porta2 .suppliers_area .suppliers_author a:hover {
    color: #FF4163;
    text-decoration: none
}
#T-Styles-Porta2 h2.suppliers_promotion a:hover {
    color: #FF4163;
    text-decoration: none
}
#T-Styles-Porta2 .suppliers_area .suppliers_more .suppliers_img {
    width: 300px;
    height: 225px;
    overflow: hidden;
    position: absolute;
    left: 15px;
    top: 15px
}
#T-Styles-Porta2 .suppliers_area .suppliers_more .suppliers_img img {
    width: 300px;
    height: auto
}
#T-Styles-Porta2 .suppliers_area .suppliers_more .suppliers_desc {
    position: absolute;
    left: 330px;
    font-size: 13px;
    padding-right: 15px;
    color: #666;
    font-style: italic;
    line-height: 22px
}
#T-Styles-Porta2 .suppliers_promotion {
    font-size: 20px;
    background: rgb(250, 250, 250);
    padding: 15px;
    font-weight: 700
}
#T-Styles-Porta2 .suppliers_promotion b {
    color: #FF4163
}
#T-Styles-Porta2 .suppliers_promotion a:hover {
    color: #FF4163;
    text-decoration: none
}
.suppliers_ribbon {
    position: absolute;
    right: -6px;
    top: -6px;
    z-index: 1;
    overflow: hidden;
    width: 75px;
    height: 75px;
    text-align: right
}
.suppliers_ribbon span {
    font-size: 10px;
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 100px;
    display: block;
    background: #79A70A;
    background: linear-gradient(#FF728B 0%, #FF4163 100%);
    -webkit-box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    -khtml-box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 19px;
    right: -21px
}
.suppliers_ribbon span::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 100%;
    z-index: -1;
    border-left: 3px solid #FF4163;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #FF4163
}
.suppliers_ribbon span::after {
    content: "";
    position: absolute;
    right: 0px;
    top: 100%;
    z-index: -1;
    border-left: 3px solid transparent;
    border-right: 3px solid #FF4163;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #FF4163
}
.PageNavsuppliers {
    background: url('@imagePath/img/introduceS.png');
    padding: 12px;
    -webkit-box-shadow: 0 -2px 0px 0px rgb(226, 226, 226);
    -moz-box-shadow: 0 -2px 0px 0px rgb(226, 226, 226);
    -khtml-box-shadow: 0 -2px 0px 0px rgb(226, 226, 226);
    box-shadow: 0 -2px 0px 0px rgb(226, 226, 226);
    border: 1px solid rgb(226, 226, 226)
}
.PageNavsuppliers .PageNav .itemL {
    float: right
}
.natMenuLevel0 {
    padding-left: 0px
}
.natMenuLevel1 {
    padding-left: 10px
}
.natMenuLevel2 {
    padding-left: 20px
}
.natMenuLevel3 {
    padding-left: 30px
}
.natMenuLevel4 {
    padding-left: 40px
}
.natMenuLevel5 {
    padding-left: 50px
}
.natMenuLevel6 {
    padding-left: 60px
}
.natMenuLevel7 {
    padding-left: 70px
}
.natMenuLevel8 {
    padding-left: 80px
}
.natMenuLevel9 {
    padding-left: 90px
}
.natMenuLevel10 {
    padding-left: 100px
}
.bbCodeImage {
    max-width: 100%
}
.content_threadinfo {
    float: left;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
    border-bottom: 1px dashed #d7edfc;
    width: 100%
}
.avatarNews {
    display: block;
    float: left;
    margin: 0 5px 0 0px
}

.content_threadinfo .meta {
    display: block;
    min-height: 50px;
    float: left
}
.content_threadinfo .user {
    margin: 0px 0px 5px 0px;
    font-size: 12px;
    font-weight: 700;
    line-height: 19px
}
.content_threadinfo .DateTime {
    display: block;
    font-size: 11px
}
.content_threadinfo .like {
    color: #196eee;
    display: block;
    float: right;
    font-size: 15px;
    font-weight: bold;
    margin: 0 10px 0 0;
    padding: 2px 0 0 22px
}
.content_threadinfo .reply {
    color: #da4531;
    display: block;
    float: right;
    font-size: 15px;
    font-weight: bold;
    margin: 0 10px 0 0;
    padding: 2px 0 0 22px
}
.content_threadinfo .view {
    color: #009957;
    display: block;
    float: right;
    font-size: 15px;
    font-weight: bold;
    margin: 0 10px 0 0;
    padding: 2px 0 0 22px
}
#T-Styles-Porta2 .suppliers_area .newsText {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 350;
    text-align: justify;
    text-justify: newspaper
}
@media (max-width: 961px) {}@media (max-width: 641px) {
    .content_threadinfo .like,
    .content_threadinfo .reply,
    .content_threadinfo .view {
        font-size: 11px;
        padding: 2px 0 0 5px
    }
    #T-Styles-Porta2 .suppliers_area .newsText,
    .content_threadinfo .user {
        font-size: 12px
    }
    .content_threadinfo .DateTime {
        font-size: 11px
    }
    #T-Styles-Porta2 .suppliers_area {
        display: none
    }
    #T-Styles-Porta2 .suppliers_promotion {
        font-size: 14px
    }
    #T-Styles-Porta2 .suppliers .dot {
        top: 20px
    }
    #T-Styles-Porta2 .suppliers .arrow {
        top: 18px
    }
}
@media (max-width: 481px) {
    .content_threadinfo .like,
    .content_threadinfo .reply,
    .content_threadinfo .view {
        font-size: 10px;
        padding: 2px 0 0 5px
    }
    #T-Styles-Porta2 .suppliers_area .newsText,
    .content_threadinfo .user {
        font-size: 11px
    }
    .content_threadinfo .DateTime {
        font-size: 10px
    }
    #T-Styles-Porta2 .suppliers_area {
        display: none
    }
    #T-Styles-Porta2 .suppliers_promotion {
        font-size: 13px
    }
    #T-Styles-Porta2 .suppliers .dot {
        top: 20px
    }
    #T-Styles-Porta2 .suppliers .arrow {
        top: 18px
    }
}
.grid {
    position: relative;
    margin: -3.3% -3% 0 -3%;
    _padding: 1em 0 4em;
    _max-width: 1000px;
    list-style: none;
    text-align: center;
}

/* Common style */
.grid .T-Thread-UserInfo {
    position: absolute;
    bottom: 10px;
    left: 10px;
}
.grid .T-Thread-UserInfo a {
    color: #fff;
    }
.grid .T-Thread-UserInfo span {
    font-size: 18px;
    margin-top: -30px;
}
.grid .T-Thread-Avarta {
    float: left;
    margin-right: 15px;
}
.grid figure {
    position: relative;
    _float: left;
    overflow: hidden;
    margin: 10px 1%;
    _min-width: 320px;
    _max-width: 480px;
    _max-height: 360px;
    _width: 48%;
    background: #3085a3;
    text-align: center;
    cursor: pointer;
}

.grid figure img {
    position: relative;
    display: block;
    min-height: 100%;
    max-width: 100%;
    opacity: 0.8;
}

.grid figure figcaption {
    _padding: 10px 20px;
    color: #fff;
    _text-transform: uppercase;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
    pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.grid figure figcaption > a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
}

.grid figure h2 {
    _word-spacing: -0.15em;
    font-weight: 300;
    font-size: 21px;
}

.grid figure h2 span {
    font-weight: 800;
}

.grid figure h2,
.grid figure p {
    margin: 0;
}

.grid figure p {
    letter-spacing: 1px;
    font-size: 68.5%;
}
figure.effect-sarah {
    background: #42b078;
}

figure.effect-sarah img {
    max-width: none;
    width: -webkit-calc(100% + 20px);
    width: calc(100% + 20px);
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

figure.effect-sarah:hover img {
    opacity: 0.4;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-sarah figcaption {
    text-align: left;
}

figure.effect-sarah h2 {
    position: relative;
    overflow: hidden;
    padding: 10px 15px;
    background-color: rgba(0, 0, 0, 0.25);
    text-transform: uppercase;
}

figure.effect-sarah h2::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #F44336;
    content: '';
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}

figure.effect-sarah:hover h2::after {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-sarah p {
    padding: 5px 15px;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(100%,0,0);
    -webkit-transform: translate3d(100%,0,0);
    -moz-transform: translate3d(100%,0,0);
    -o-transform: translate3d(100%,0,0);
    -ms-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
    background-color: rgba(0, 0, 0, 0.25);
}
figure.effect-sarah p a {
    color: #fff;
}
figure.effect-sarah:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
@media screen and (max-width: 50em) {
    .content {
        padding: 0 10px;
        text-align: center;
    }
    .grid figure {
        display: inline-block;
        float: none;
        margin: 10px auto;
        width: 100%;
    }
}

Ok, bây giờ chúng ta tiếp tục thêm chút "màu mè" cho phần bài viết được Promotion bởi XenPorta 2 nhé.
- Các bạn tìm và mở template "EWRporta2_ArticleView" sau đó thay tất cả bằng code dưới đây.
Mã: 
<xen:include template="EWRporta2_Global_Above" />

<xen:title>{xen:helper threadPrefix, $thread, escaped}{$thread.title}{xen:helper pagenumber, $page}</xen:title>
<xen:h1>{xen:helper threadPrefix, $thread}{$thread.title}</xen:h1>

<xen:description>
    {xen:phrase discussion_in_x_started_by_y_date_z,
        'forum=<a href="{xen:link forums, $forum}">{$forum.title}</a>',
        'name={xen:helper username, $thread}',
        'date=<a href="{xen:link threads, $thread}">{xen:datetime $thread.post_date, html}</a>'}
</xen:description>

<xen:navigation>
    <xen:breadcrumb source="$nodeBreadCrumbs" />
</xen:navigation>

<xen:container var="$head.article">
    <link rel="canonical" href="{xen:link 'canonical:threads', $thread, 'page={$page}'}" />
    <meta name="title" content="{xen:helper threadPrefix, $thread, escaped}{$thread.title}" />
    <meta name="description" content="{xen:helper snippet, $firstPost.message, 155}" />

    <xen:if is="{$article.article_icon.type} == 'attach'">
        <meta property="og:image" content="{$article.article_icon.data.thumbnailUrl}" />
    <xen:elseif is="{$article.article_icon.type} == 'image'" />
        <meta property="og:image" content="{$article.article_icon.data.url}" />
    <xen:elseif is="{$article.article_icon.type} == 'medio'" />
        <meta property="og:image" content="{xen:helper medio, $article.article_icon.data}" />
    </xen:if>

    <xen:include template="open_graph_meta">
        <xen:set var="$url">{xen:link 'canonical:threads', $thread}</xen:set>
        <xen:set var="$title">{xen:helper threadPrefix, $thread, escaped}{$thread.title}</xen:set>
        <xen:set var="$description">{xen:helper snippet, $firstPost.message, 155}</xen:set>
        <xen:set var="$avatar">{xen:helper avatar, $thread, m, 0, 1}</xen:set>
    </xen:include>
</xen:container>

<xen:container var="$bodyClasses">{xen:helper nodeClasses, $nodeBreadCrumbs, $forum}{xen:if {$xenOptions.selectQuotable}, ' SelectQuotable'}</xen:container>
<xen:container var="$searchBar.thread"><xen:include template="search_bar_thread_only" /></xen:container>
<xen:container var="$searchBar.forum"><xen:include template="search_bar_forum_only" /></xen:container>

<xen:if is="{$canReply}">
    <xen:comment><xen:topctrl>
        <a href="{xen:link 'threads/reply', $thread}" class="callToAction"><span>{xen:phrase reply_to_thread}</span></a>
    </xen:topctrl></xen:comment>
</xen:if>

<xen:require css="thread_view.css" />
<xen:require css="EWRporta2.css" />
<xen:require css="EWRporta2_ArticleView.css" />
<xen:require js="js/8wayrun/EWRporta2_ajax.js?_v={$xenAddOns.EWRporta2}" />
                <div class="grid">
                    <figure class="effect-sarah">
                            <xen:if hascontent="true">
                    <xen:contentcheck>
                    <xen:if is="{$article.article_icon.type} == 'avatar'">
                        <xen:avatar user="$article" size="s" class="Tooltip" title="{$article.username}" itemprop="photo" />
                    <xen:elseif is="!@porta2_articles_header" />
                        <xen:if is="{$article.article_icon.type} == 'attach'">
                            <a class="attachHolder" href="{xen:link threads, $article}">
                                <xen:if is="@porta2_articles_fullsize">
                                    <img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}" class="bbCodeImage" />
                                <xen:else/>
                                    <img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}" class="bbCodeImage" />
                                </xen:if>
                            </a>
                        <xen:elseif is="{$article.article_icon.type} == 'image'" />
                            <a class="attachHolder" href="{xen:link threads, $article}"><img src="{$article.article_icon.data.url}" alt="{$article.article_icon.data.file}" /></a>
                        <xen:elseif is="{$article.article_icon.type} == 'medio'" />
                            <a class="medioHolder OverlayTrigger"style="background-image: url('{xen:helper medio2, $article.article_icon.data}');"
                                href="{xen:link 'full:media/media', $article.article_icon.data}" data-href="{xen:link 'full:media/media/popout', $article.article_icon.data}"
                                data-cacheOverlay="false" data-overlayoptions="{&quot;fixed&quot;:false}">
                                    <img src="styles/8wayrun/EWRmedio_play.png" />
                            </a>
                        </xen:if>
                    </xen:if>
                    </xen:contentcheck>

                            </xen:if>
                        <figcaption>
                            <h2>{$thread.title}</h2>
                            <p><a href="{xen:link forums, $forum}">{$forum.title}</a>, <a href="{xen:link threads, $thread}">{xen:datetime $thread.post_date, html}</a>. Trả lời: {xen:number $article.reply_count}, lượt xem: {xen:number $article.view_count}.</p>
                        </figcaption>
                        <div class="T-Thread-UserInfo">
                        <div class="T-Thread-Avarta">
                        <xen:avatar user="$posts.{$thread.first_post_id}" size="s" />
                        </div>
                        <span>
                        <a href="{xen:link members, $article}" class="username" dir="auto">{$article.username}</a>
                        </span>
                        </div>
      
                    </figure>
                </div>
<div class="section messageAuthor">
    <xen:if is="{$xenOptions.addThis.enabled}">
        <xen:include template="addthis_ajax">
            <xen:set var="$url">{xen:link full:threads, $thread}</xen:set>
        </xen:include>
    <xen:else/>
        <xen:hook name="EWRporta2_article_share_page_options">
            <xen:if is="{$xenOptions.facebookLike}">
                <div class="facebookLike shareControl">
                    <xen:container var="$facebookSdk">1</xen:container>
                    <fb:like href="{xen:link 'canonical:threads', $thread}" layout="button_count" action="{$xenOptions.facebookLikeAction}" font="trebuchet ms" colorscheme="@fbColorScheme"></fb:like>
                </div>
            </xen:if>
            <xen:if is="{$xenOptions.plusone}">
                <div class="plusone shareControl">
                    <div class="g-plusone" data-size="medium" data-count="true" data-url="{xen:link 'canonical:threads', $thread}" data-lang="{$visitorLanguage.language_code}"></div>
                </div>
            </xen:if>
            <xen:if is="{$xenOptions.tweet.enabled}">
                <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="{xen:link 'canonical:threads', $thread}"
                        {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>
            </xen:if>
        </xen:hook>
    </xen:if>



</div>

<div class="pageNavLinkGroup">
    <div class="linkGroup">
        <xen:if hascontent="true">
            <div class="Popup">
                <a rel="Menu">{xen:phrase porta2_article_tools}</a>
                <div class="Menu">
                    <div class="primaryContent menuHeader"><h3>{xen:phrase porta2_article_tools}</h3></div>
                    <ul class="secondaryContent blockLinksList">
                        <xen:contentcheck>
                            <xen:if is="{$canEditThread}">
                                <li><a href="{xen:link 'threads/edit', $thread}" class="OverlayTrigger">{xen:phrase edit_thread}</a></li>
                            <xen:elseif is="{$canEditTitle}" />
                                <li><a href="{xen:link threads/edit-title, $thread}" class="OverlayTrigger">{xen:phrase edit_title}</a></li>
                            </xen:if>
                            <xen:if is="{$canAddPoll}">
                                <li><a href="{xen:link 'threads/poll/add', $thread}">{xen:phrase add_poll}</a></li>
                            </xen:if>
                            <xen:if is="{$canDeleteThread}">
                                <li><a href="{xen:link 'threads/delete', $thread}" class="OverlayTrigger">{xen:phrase delete_thread}</a></li>
                            </xen:if>
                            <xen:if is="{$canMoveThread}">
                                <li><a href="{xen:link 'threads/move', $thread}" class="OverlayTrigger">{xen:phrase move_thread}</a></li>
                            </xen:if>
                            <xen:if is="{$canReplyBan}">
                                <li><a href="{xen:link 'threads/reply-bans', $thread}" class="OverlayTrigger">{xen:phrase manage_reply_bans}</a></li>
                            </xen:if>
                            <xen:if is="{$canViewModeratorLog}">
                                <li><a href="{xen:link 'threads/moderator-actions', $thread}" class="OverlayTrigger">{xen:phrase moderator_actions}</a></li>
                            </xen:if>
                            <xen:if is="{$deletedPosts}">
                                <li><a href="{xen:link threads/show-posts, $thread, 'page={$page}'}" class="MessageLoader" data-messageSelector="#messageList .message.deleted.placeholder">{xen:phrase show_deleted_posts}</a></li>
                            </xen:if>
                            <xen:hook name="thread_view_tools_links" params="{xen:array 'thread={$thread}'}" />
                        </xen:contentcheck>
                    </ul>
                </div>
            </div>
        </xen:if>
    </div>

    <xen:include template="EWRporta2_Article_Categories">
        <xen:map from="$categories.cats" to="$categories" />
    </xen:include>
</div>

<ol class="messageList messageArticle">
    <xen:include template="post">
        <xen:map from="$posts.{$thread.first_post_id}" to="$post" />
    </xen:include>
</ol>

<xen:if is="{$author}">
    <xen:include template="EWRporta2_AuthorList_Bit" />
</xen:if>

<xen:if is="{$xenOptions.EWRporta2_subcategories} && ({$categories.tags} || {$perms.tag})">
    <div class="sectionMain catList">
        <div class="secondaryContent">
            <xen:if is="{$perms.moderate}">
                <a href="{xen:link 'threads/subcats', $article}" class="edit OverlayTrigger" data-cacheOverlay="false"></a>
            </xen:if>
      
            <span class="muted">{xen:phrase porta2_subcats}:</span>
      
            <xen:include template="EWRporta2_Article_Subcats">
                <xen:map from="$categories.tags" to="$tags" />
            </xen:include>
  
            <xen:if is="{$perms.tag}">
            <form action="{xen:link threads/add-subcats, $thread}" method="post" class="xenForm AutoValidator SubcatEditor" data-redirect="true">
                <dl class="ctrlUnit fullWidth">
                    <dt></dt>
                    <dd>
                        <input type="search" name="new_tags" value="" placeholder="{xen:phrase porta2_subcat_this_article}..." results="0" class="textCtrl AutoComplete"
                            data-acurl="{xen:link articles/find-subcats}" />
                        <xen:if is="!{$perms.tags}"><p class="explain">{xen:phrase porta2_subcat_this_article_hint}</p></xen:if>
                    </dd>
                </dl>
                <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
            </form>
            </xen:if>
        </div>
    </div>
</xen:if>

<xen:if is="{$poll}">
    <xen:include template="poll_block">
        <xen:set var="$options">
            <xen:if is="{$poll.canVote} AND !{$poll.hasVoted}">
                <xen:include template="poll_block_vote" />
            <xen:else />
                <xen:include template="poll_block_result" />
            </xen:if>
        </xen:set>
    </xen:include>
</xen:if>

<xen:include template="EWRporta2_Global_Below_1" />

<xen:hook name="thread_view_pagenav_before" params="{xen:array 'thread={$thread}'}" />

<xen:if hascontent="true">
    <div class="titleBar" id="comments">
        <h1>{xen:phrase comments}</h1>
        <p id="commentsDescription" class="muted">{xen:phrase discussion_in_x_started_by_y_date_z,
            'forum=<a href="{xen:link forums, $forum}">{$forum.title}</a>',
            'name={xen:helper username, $thread}',
            'date=<a href="{xen:link threads, $thread}">{xen:datetime $thread.post_date, html}</a>'}</p>
    </div>

    <ul class="tabs mainTabs Tabs {xen:if '{xen:count $article.comment_count} == 1', 'onlyOne'}" data-panes="#CommentPanes > li" data-history="on">
        <xen:contentcheck>
        <xen:if is="{$article.article_options.local}">
            <li id="tabLocal"><a href="{$requestPaths.requestUri}#commentsLocal">{xen:phrase porta2_local_comments}</a></li>
        </xen:if>
        <xen:if is="{$xenOptions.EWRporta2_promote_disqus} && {$article.article_options.disqus}">
            <li id="tabDisqus"><a href="{$requestPaths.requestUri}#commentsDisqus">{xen:phrase porta2_disqus_comments}</a></li>
        </xen:if>
        <xen:if is="{$xenOptions.EWRporta2_promote_facebook} && {$article.article_options.facebook}">
            <li id="tabFacebook"><a href="{$requestPaths.requestUri}#commentsFacebook">{xen:phrase porta2_facebook_comments}</a></li>
        </xen:if>
        </xen:contentcheck>
    </ul>

    <ul id="CommentPanes">
        <xen:if is="{$article.article_options.local}">
            <li id="commentsLocal" class="commentPane"><xen:include template="EWRporta2_ArticleView_Comments" /></li>
        </xen:if>
        <xen:if is="{$xenOptions.EWRporta2_promote_disqus} && {$article.article_options.disqus}">
            <li id="commentsDisqus" class="commentPane"><xen:include template="EWRporta2_ArticleView_Disqus" /></li>
        </xen:if>
        <xen:if is="{$xenOptions.EWRporta2_promote_facebook} && {$article.article_options.facebook}">
            <li id="commentsFacebook" class="commentPane"><xen:include template="EWRporta2_ArticleView_Facebook" /></li>
        </xen:if>
    </ul>
</xen:if>

<xen:include template="share_page">
    <xen:set var="$url">{xen:link 'canonical:threads', $thread}</xen:set>
</xen:include>

<xen:include template="EWRporta2_Global_Below_2" />
<xen:include template="EWRporta2_Global_Side" />

Bây giờ quay lại trang chủ và F5 để xem thay đổi thôi nào.
Chú ý: có thể nhiều style sẽ hiển thị đôi chút sai lệnh, nếu gặp lổi các bạn thảo luận tại chủ đề này luôn nhé.
Quên mất, các bạn tải thư mục "img" dưới đính kèm và upload lên thư mục style các bạn đang sử dụng nhé.
Nhấn để mở rộng...



mình up vào xen 1511 bị lỗi ạ

EWRporta2_ArticleView
nó báo bị lỗi dòng 9 ạ
 
logliu21

logliu21

Gefreiter
Tham gia
25/09/2016
Bài viết
54
Được Like
24
a/e cho em xin code hiện categories diễn đàn ra ngoài trang chủ xenporta đi
 
conkhidannb

conkhidannb

Corporal
Tham gia
07/09/2015
Bài viết
189
Được Like
133
bác nào test giúp được không, mình cũng làm 1 như bài viết mà không thấy thay đổi gì cả
Mình đang dùng xenporta 2 pro 1.2.2b bản mới nhất, xf 1.5.14
 
Q

quick87

Corporal
Tham gia
10/12/2016
Bài viết
113
Được Like
62
thuyet951 nói:
Mình thấy có nhiều người thích cái Style XenPorta 2 của SEOMXH, vì vậy sau khi rip xong mình đã trích riêng ra cho anh em nào thích thì lấy về sử dụng.

Link tải XenPorta 2 thì anh em xem ở bài viết này: http://vnxf.vn/8wayrun-com-xenporta-2-portal-pro-1-1-7a.t5752.html/page-2#post-37043
Live demo: http://vpet.vn/index.php
Nào!, bây giờ chúng ta bắt đầu thay đổi template nhé.
Trước tiên chúng ta cần sửa lại đôi chút kết cấu của XenForo đã, các bạn mở template "PAGE_CONTAINER"
Tìm đoạn code sau:
Mã: 
                        <xen:include template="ad_above_top_breadcrumb" />
                  
                        <xen:hook name="page_container_breadcrumb_top">
                        <div class="breadBoxTop {xen:if $topctrl, withTopCtrl}">
                            <xen:if is="{$topctrl}"><div class="topCtrl">{xen:raw $topctrl}</div></xen:if>
                            <xen:include template="breadcrumb"><xen:set var="$microdata">1</xen:set></xen:include>
                        </div>
                        </xen:hook>
                  
                        <xen:include template="ad_below_top_breadcrumb" />

Sau đó thay đoạn code phía trên bằng đoạn code dưới đây:
Mã: 
                <xen:if is="{$contentTemplate} == 'EWRporta2_ArticleView'">
                <xen:else />
                        <xen:include template="ad_above_top_breadcrumb" />
                  
                        <xen:hook name="page_container_breadcrumb_top">
                        <div class="breadBoxTop {xen:if $topctrl, withTopCtrl}">
                            <xen:if is="{$topctrl}"><div class="topCtrl">{xen:raw $topctrl}</div></xen:if>
                            <xen:include template="breadcrumb"><xen:set var="$microdata">1</xen:set></xen:include>
                        </div>
                        </xen:hook>
                  
                        <xen:include template="ad_below_top_breadcrumb" />
                </xen:if>

Phần kết cấu xong rồi, bây giờ chúng ta bắt tay vào áp dụng cho XenPorta 2 thôi nào.
Các bạn tìm và mở Template "EWRporta2_ArticleList" sau đó thay tất cả bằng code dưới đây.
Mã: 
<xen:include template="EWRporta2_Global_Above" />

<xen:if is="{$author}">
    <xen:title>{xen:phrase porta2_author}: {$author.author_name}</xen:title>
    <xen:h1>{xen:phrase porta2_author}: {$author.author_name}</xen:h1>
    <xen:description>{xen:phrase porta2_viewing_only_articles_authored_by_x, 'author={$author.author_name}'}</xen:description>

    <xen:container var="$head.rss">
        <link rel="alternate" type="application/rss+xml" title="{xen:phrase rss_feed_for_x,
            'title={xen:phrase porta2_articles} - {$xenOptions.boardTitle}'}" href="{xen:link 'full:articles/index.rss'}" />
        <link rel="alternate" type="application/rss+xml" title="{xen:phrase rss_feed_for_x,
            'title={$author.author_name} - {$xenOptions.boardTitle}'}" href="{xen:link 'full:articles/author.rss', $author}" />
    </xen:container>

    <xen:navigation>
        <xen:breadcrumb href="{xen:link 'full:articles'}">{xen:phrase porta2_articles}</xen:breadcrumb>
        <xen:breadcrumb href="{xen:link 'full:articles/authors'}">{xen:phrase porta2_authors}</xen:breadcrumb>
    </xen:navigation>
<xen:elseif is="{$category}"/>
    <xen:title>{$category.category_name}</xen:title>
    <xen:h1>{$category.category_name}</xen:h1>
    <xen:description>
        <xen:if is="{$category.category_desc}">
            {$category.category_desc}
        <xen:else/>
            {xen:phrase porta2_viewing_only_articles_categorized_with_x, 'cat={$category.category_name}'}
        </xen:if>
    </xen:description>

    <xen:container var="$head.rss">
        <link rel="alternate" type="application/rss+xml" title="{xen:phrase rss_feed_for_x,
            'title={xen:phrase porta2_articles} - {$xenOptions.boardTitle}'}" href="{xen:link 'full:articles/index.rss'}" />
        <link rel="alternate" type="application/rss+xml" title="{xen:phrase rss_feed_for_x,
            'title={$category.category_name} - {$xenOptions.boardTitle}'}" href="{xen:link 'full:articles/category.rss', $category}" />
    </xen:container>

    <xen:navigation>
        <xen:breadcrumb href="{xen:link 'full:articles'}">{xen:phrase porta2_articles}</xen:breadcrumb>
    </xen:navigation>
<xen:else/>
    <xen:h1>{$xenOptions.boardTitle}</xen:h1>
    <xen:description><xen:if is="{$xenOptions.EWRporta2_metadesc}">{$xenOptions.EWRporta2_metadesc}<xen:else/>{$xenOptions.boardDescription}</xen:if></xen:description>

    <xen:container var="$head.rss">
        <link rel="alternate" type="application/rss+xml" title="{xen:phrase rss_feed_for_x,
            'title={xen:phrase porta2_articles} - {$xenOptions.boardTitle}'}" href="{xen:link 'full:articles/index.rss'}" />
    </xen:container>

    <xen:if is="@porta2_articles_breakout">
        <xen:require css="EWRporta2_Breakout.css" />
    </xen:if>
</xen:if>

<xen:container var="$head.openGraph">
    <xen:include template="open_graph_meta">
        <xen:set var="$url">{xen:link 'canonical:articles'}</xen:set>
        <xen:set var="$title">{$xenOptions.boardTitle}</xen:set>
        <xen:set var="$description"><xen:if is="{$xenOptions.EWRporta2_metadesc}">{$xenOptions.EWRporta2_metadesc}<xen:else/>{$xenOptions.boardDescription}</xen:if></xen:set>
        <xen:set var="$ogType">website</xen:set>
    </xen:include>
</xen:container>

<xen:container var="$quickNavSelected">articles</xen:container>

<xen:require css="message_user_info.css" />
<xen:require css="EWRporta2.css" />
<xen:require css="EWRporta2_ArticleList.css" />
<xen:require js="js/8wayrun/EWRporta2_ajax.js?_v={$xenAddOns.EWRporta2}" />

<xen:if is="@porta2_articles_masonry">
    <xen:set var="$masonry">1</xen:set>
    <xen:require js="js/8wayrun/EWRporta2_images.js?_v={$xenAddOns.EWRporta2}" />
    <xen:require js="js/8wayrun/EWRporta2_masonry.js?_v={$xenAddOns.EWRporta2}" />
</xen:if>

<xen:if is="{$start} == 1 && @porta2_articles_infinite && !{$setting.setting_options.scroll}">
    <xen:set var="$infinite">1</xen:set>
    <xen:require js="js/8wayrun/EWRporta2_infinite.js?_v={$xenAddOns.EWRporta2}" />
</xen:if>

<xen:if is="{$features}">
    <div class="section featuresGrid" id="featuresGrid">
        <xen:include template="EWRporta2_Features">
            <xen:set var="$feature_id">featuresGrid</xen:set>
            <xen:set var="$relocate">{$xenOptions.EWRporta2_features_relocate}</xen:set>
        </xen:include>
    </div>
</xen:if>

<xen:if is="{$author}">
    <xen:include template="EWRporta2_AuthorList_Bit" />
</xen:if>

<div id="articlesGrid" class="articlesGrid {xen:if '{$masonry}', 'ArticlesMason'} {xen:if '{$infinite}', 'InfiniteScroll'}"
    data-masonry="{$masonry}" data-items=".articleItem" data-nav=".articlePager" data-next=".articlePager a:last" data-control=".articleControl">
    <div class="introduce_supplier">

        <center><font size="4" color="red">{$xenOptions.boardTitle}</font>
        </center>
        <div class="desc"><xen:if is="{$xenOptions.EWRporta2_metadesc}">{$xenOptions.EWRporta2_metadesc}<xen:else/>{$xenOptions.boardDescription}</xen:if></div>
    </div>
    <div id="T-Styles-Porta2">
        <div class="main">
            <div class="suppliers_list">
        <xen:foreach loop="$articles" value="$article"><xen:include template="EWRporta2_ArticleList_Bit" /></xen:foreach>
            </div>
        </div>
    </div>
</div>

<xen:if is="{$infinite}">
    <div class="sectionMain articleControl InfiniteControl" data-target=".articlesGrid" data-pager=".articlePager">
        <div class="pause button">{xen:phrase porta2_pause_infinite_scrolling}</div>
        <div class="resume">
            <div class="muted"><a href="{xen:link articles/settings}">{xen:phrase porta2_change_article_list_settings}</a></div>
            <div class="button">{xen:phrase porta2_resume_infinite_scrolling}</div>
        </div>
    </div>
</xen:if>

<xen:if hascontent="true">
    <div class="sectionMain articlePager">
        <xen:contentcheck>
        <xen:if is="{$author}">
            <xen:pagenav link="articles/author" linkdata="{$author}" page="{$start}" perpage="{$stop}" total="{$count}" />
        <xen:elseif is="{$category}"/>
            <xen:pagenav link="articles/category" linkdata="{$category}" page="{$start}" perpage="{$stop}" total="{$count}" />
        <xen:else/>
            <xen:pagenav link="articles" page="{$start}" perpage="{$stop}" total="{$count}" />
        </xen:if>
        </xen:contentcheck>
    </div>
</xen:if>

<xen:include template="EWRporta2_Global_Below" />
<xen:include template="EWRporta2_Global_Side" />

- Tiếp theo các bạn tìm tiếp template "EWRporta2_ArticleList_Bit" mở nó lên và thay bằng code dưới đây:
Mã: 
<div class="articleItem" id="article_{$article.thread_id}">
                <div class="suppliers" id="article_{$article.thread_id}">
                    <div class="dot dot_icon_{$article.thread_id}_t"></div>
                    <div class="arrow"></div>
                    <h2 class="suppliers_promotion"> <a href="{xen:link threads, $article}" title="{$article.article_title}">{$article.article_title}</a></h2>
                    <div class="suppliers_area">
                        <div class="content_threadinfo"> <div class="avatarNews"> <xen:avatar user="$article" size="s" class="Tooltip" title="{$article.username}" itemprop="photo" /> </div>
                            <div class="meta"> <span class="user author" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <a href="{xen:link members, $article}" class="username" dir="auto"><span class="style5">{$article.username}</span>
                                </a>
                                </span> <span class="DateTime" title="{xen:date $article.article_date, 'd'}/{xen:date $article.article_date, 'm'}/{xen:date $article.article_date, 'y'} - {xen:time $article.article_date}">{xen:date $article.article_date, 'd'}/{xen:date $article.article_date, 'm'}/{xen:date $article.article_date, 'y'}</span>
                            </div>
                            <div class="right"> <span class="like"><i class="fa fa-thumbs-up"></i> {xen:number $article.share_count}</span> <span class="reply"><i class="fa fa-comment"></i> {xen:number $article.reply_count}</span> <span class="view"><i class="fa fa-eye"></i> {xen:number $article.view_count}</span>
                            </div>
                        </div>
                        <div class="newsText">
                            <div align="center">
                            <xen:if hascontent="true">
                    <xen:contentcheck>
                    <xen:if is="{$article.article_icon.type} == 'avatar'">
                        <xen:avatar user="$article" size="s" class="Tooltip" title="{$article.username}" itemprop="photo" />
                    <xen:elseif is="!@porta2_articles_header" />
                        <xen:if is="{$article.article_icon.type} == 'attach'">
                            <a class="attachHolder" href="{xen:link threads, $article}">
                                <xen:if is="@porta2_articles_fullsize">
                                    <img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}" class="bbCodeImage" />
                                <xen:else/>
                                    <img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}" class="bbCodeImage" />
                                </xen:if>
                            </a>
                        <xen:elseif is="{$article.article_icon.type} == 'image'" />
                            <a class="attachHolder" href="{xen:link threads, $article}"><img src="{$article.article_icon.data.url}" alt="{$article.article_icon.data.file}" /></a>
                        <xen:elseif is="{$article.article_icon.type} == 'medio'" />
                            <a class="medioHolder OverlayTrigger"style="background-image: url('{xen:helper medio2, $article.article_icon.data}');"
                                href="{xen:link 'full:media/media', $article.article_icon.data}" data-href="{xen:link 'full:media/media/popout', $article.article_icon.data}"
                                data-cacheOverlay="false" data-overlayoptions="{&quot;fixed&quot;:false}">
                                    <img src="styles/8wayrun/EWRmedio_play.png" />
                            </a>
                        </xen:if>
                    </xen:if>
                    </xen:contentcheck>

                            </xen:if>
                            </div>
                            <br>
                {xen:raw $article.messageHtml}
          
                <xen:if is="{$article.article_break}">
                    <a href="{xen:link threads, $article}">{$article.article_break}...</a>
                </xen:if>
                            </div>
                    </div>
                </div>
</div>

Vậy là phần trang chủ XenPorta 2 đã được chúng ta định dạng, cuối cùng các bạn mở template "EWRporta2.css" và thêm vào dưới cùng đoạn css dưới đây.
Mã: 
.EWRporta2_ArticleList .breadBoxTop, .EWRporta2_ArticleList .breadBoxBottom {
    display: none;
}
.EWRporta2_ArticleList .titleBar {
    display: none;
}
#T-Styles-Porta2 .titleBar {
    display: none
}
.introduce_supplier {
    background: url('@imagePath/img/introduceS.png');
    padding: 12px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 2px 0px 0px rgb(226, 226, 226);
    -moz-box-shadow: 0 2px 0px 0px rgb(226, 226, 226);
    -khtml-box-shadow: 0 2px 0px 0px rgb(226, 226, 226);
    box-shadow: 0 2px 0px 0px rgb(226, 226, 226);
    border: 1px solid rgb(226, 226, 226)
}
.introduce_supplier h2 {
    color: #3a5795;
    font-size: 20px;
    padding-bottom: 10px;
    text-align: center;
    font-weight: 700
}
@media (max-width: 480px) {
    .introduce_supplier h2 {
        font-size: 14px
    }
}
.introduce_supplier .desc {
    color: #666;
    font-style: italic;
    line-height: 20px;
    text-align: justify;
    text-align: justify
}
#T-Styles-Porta2 {
    padding-left: 35px;
    padding-bottom: 20px;
    background: url('@imagePath/img/line.gif') repeat-y 10px;
    zoom: 1;
}
#T-Styles-Porta2 .main {
    width: 100%;
    padding-top: 25px
}
#T-Styles-Porta2 .suppliers {
    -webkit-box-shadow: 0 2px 0px 0px rgb(226, 226, 226);
    -moz-box-shadow: 0 2px 0px 0px rgb(226, 226, 226);
    -khtml-box-shadow: 0 2px 0px 0px rgb(226, 226, 226);
    box-shadow: 0 2px 0px 0px rgb(226, 226, 226);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid rgb(226, 226, 226);
    background: #FFF;
    margin-bottom: 15px;
    position: relative
}
#T-Styles-Porta2 .suppliers .dot {
    background-image: url('@imagePath/img/dot.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    position: absolute;
    width: 20px;
    height: 20px;
    left: -34px;
    top: 82px;
}
#T-Styles-Porta2 .suppliers .dot_icon_2_t {
    background-position: 0 -20px
}
#T-Styles-Porta2 .suppliers .dot_icon_5_t {
    background-position: 0 -40px
}
#T-Styles-Porta2 .suppliers .dot_icon_4_t {
    background-position: 0 -60px
}
#T-Styles-Porta2 .suppliers .dot_icon_213_t {
    background-position: 0 -80px
}
#T-Styles-Porta2 .suppliers .dot_icon_87_t {
    background-position: 0 -100px
}
#T-Styles-Porta2 .suppliers .dot_icon_69_t {
    background-position: 0 -120px
}
#T-Styles-Porta2 .suppliers .dot_icon_67_t {
    background-position: 0 -140px
}
#T-Styles-Porta2 .suppliers .dot_icon_63_t {
    background-position: 0 -160px
}
#T-Styles-Porta2 .suppliers .dot_icon_70_t {
    background-position: 0 -180px
}
#T-Styles-Porta2 .suppliers .dot_icon_71_t {
    background-position: 0 -200px
}
#T-Styles-Porta2 .suppliers .dot_icon_74_t {
    background-position: 0 -220px
}
#T-Styles-Porta2 .suppliers .dot_icon_72_t {
    background-position: 0 -240px
}
#T-Styles-Porta2 .suppliers .dot_icon_84_t {
    background-position: 0 -260px
}
#T-Styles-Porta2 .suppliers .dot_icon_83_t {
    background-position: 0 -280px
}
#T-Styles-Porta2 .suppliers .dot_icon_77_t {
    background-position: 0 -300px
}
#T-Styles-Porta2 .suppliers .dot_icon_220_t {
    background-position: 0 -320px
}
#T-Styles-Porta2 .suppliers .dot_icon_112_t {
    background-position: 0 -340px
}
#T-Styles-Porta2 .suppliers .dot_icon_221_t {
    background-position: 0 -360px
}
#T-Styles-Porta2 .suppliers .dot_icon_115_t {
    background-position: 0 -380px
}
#T-Styles-Porta2 .suppliers .dot_icon_122_t {
    background-position: 0 -400px
}
#T-Styles-Porta2 .suppliers .dot_icon_73_t {
    background-position: 0 -420px
}
#T-Styles-Porta2 .suppliers .dot_icon_110_t {
    background-position: 0 -440px
}
#T-Styles-Porta2 .suppliers .dot_icon_111_t {
    background-position: 0 -460px
}
#T-Styles-Porta2 .suppliers .dot_icon_46_t {
    background-position: 0 -480px
}
#T-Styles-Porta2 .suppliers .dot_icon_96_t {
    background-position: 0 -500px
}
#T-Styles-Porta2 .suppliers .dot_icon_97_t {
    background-position: 0 -520px
}
#T-Styles-Porta2 .suppliers .dot_icon_98_t {
    background-position: 0 -540px
}
#T-Styles-Porta2 .suppliers .dot_icon_99_t {
    background-position: 0 -560px
}
#T-Styles-Porta2 .suppliers .dot_icon_57_t {
    background-position: 0 -580px
}
#T-Styles-Porta2 .suppliers .arrow {
    width: 11px;
    height: 22px;
    background: url('@imagePath/img/arrow.png') no-repeat 0 0;
    position: absolute;
    left: -11px;
    top: 80px
}
#T-Styles-Porta2 .suppliers_area {
    display: table;
    table-layout: fixed;
    width: 100%;
    word-wrap: normal;
    padding: 15px;
    border-top: 1px solid rgb(240, 240, 240);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    text-align: justify;
    text-justify: newspaper
}
#T-Styles-Porta2 .suppliers_area .suppliers_left {
    float: left;
    width: 300px;
    height: 225px;
    margin-right: 15px
}
#T-Styles-Porta2 .suppliers_area .suppliers_author {
    font-size: 11px;
    color: #666;
    line-height: 20px;
    text-decoration: none
}
#T-Styles-Porta2 .suppliers_area .suppliers_author a:hover {
    color: #FF4163;
    text-decoration: none
}
#T-Styles-Porta2 h2.suppliers_promotion a:hover {
    color: #FF4163;
    text-decoration: none
}
#T-Styles-Porta2 .suppliers_area .suppliers_more .suppliers_img {
    width: 300px;
    height: 225px;
    overflow: hidden;
    position: absolute;
    left: 15px;
    top: 15px
}
#T-Styles-Porta2 .suppliers_area .suppliers_more .suppliers_img img {
    width: 300px;
    height: auto
}
#T-Styles-Porta2 .suppliers_area .suppliers_more .suppliers_desc {
    position: absolute;
    left: 330px;
    font-size: 13px;
    padding-right: 15px;
    color: #666;
    font-style: italic;
    line-height: 22px
}
#T-Styles-Porta2 .suppliers_promotion {
    font-size: 20px;
    background: rgb(250, 250, 250);
    padding: 15px;
    font-weight: 700
}
#T-Styles-Porta2 .suppliers_promotion b {
    color: #FF4163
}
#T-Styles-Porta2 .suppliers_promotion a:hover {
    color: #FF4163;
    text-decoration: none
}
.suppliers_ribbon {
    position: absolute;
    right: -6px;
    top: -6px;
    z-index: 1;
    overflow: hidden;
    width: 75px;
    height: 75px;
    text-align: right
}
.suppliers_ribbon span {
    font-size: 10px;
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 100px;
    display: block;
    background: #79A70A;
    background: linear-gradient(#FF728B 0%, #FF4163 100%);
    -webkit-box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    -khtml-box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 19px;
    right: -21px
}
.suppliers_ribbon span::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 100%;
    z-index: -1;
    border-left: 3px solid #FF4163;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #FF4163
}
.suppliers_ribbon span::after {
    content: "";
    position: absolute;
    right: 0px;
    top: 100%;
    z-index: -1;
    border-left: 3px solid transparent;
    border-right: 3px solid #FF4163;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #FF4163
}
.PageNavsuppliers {
    background: url('@imagePath/img/introduceS.png');
    padding: 12px;
    -webkit-box-shadow: 0 -2px 0px 0px rgb(226, 226, 226);
    -moz-box-shadow: 0 -2px 0px 0px rgb(226, 226, 226);
    -khtml-box-shadow: 0 -2px 0px 0px rgb(226, 226, 226);
    box-shadow: 0 -2px 0px 0px rgb(226, 226, 226);
    border: 1px solid rgb(226, 226, 226)
}
.PageNavsuppliers .PageNav .itemL {
    float: right
}
.natMenuLevel0 {
    padding-left: 0px
}
.natMenuLevel1 {
    padding-left: 10px
}
.natMenuLevel2 {
    padding-left: 20px
}
.natMenuLevel3 {
    padding-left: 30px
}
.natMenuLevel4 {
    padding-left: 40px
}
.natMenuLevel5 {
    padding-left: 50px
}
.natMenuLevel6 {
    padding-left: 60px
}
.natMenuLevel7 {
    padding-left: 70px
}
.natMenuLevel8 {
    padding-left: 80px
}
.natMenuLevel9 {
    padding-left: 90px
}
.natMenuLevel10 {
    padding-left: 100px
}
.bbCodeImage {
    max-width: 100%
}
.content_threadinfo {
    float: left;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
    border-bottom: 1px dashed #d7edfc;
    width: 100%
}
.avatarNews {
    display: block;
    float: left;
    margin: 0 5px 0 0px
}

.content_threadinfo .meta {
    display: block;
    min-height: 50px;
    float: left
}
.content_threadinfo .user {
    margin: 0px 0px 5px 0px;
    font-size: 12px;
    font-weight: 700;
    line-height: 19px
}
.content_threadinfo .DateTime {
    display: block;
    font-size: 11px
}
.content_threadinfo .like {
    color: #196eee;
    display: block;
    float: right;
    font-size: 15px;
    font-weight: bold;
    margin: 0 10px 0 0;
    padding: 2px 0 0 22px
}
.content_threadinfo .reply {
    color: #da4531;
    display: block;
    float: right;
    font-size: 15px;
    font-weight: bold;
    margin: 0 10px 0 0;
    padding: 2px 0 0 22px
}
.content_threadinfo .view {
    color: #009957;
    display: block;
    float: right;
    font-size: 15px;
    font-weight: bold;
    margin: 0 10px 0 0;
    padding: 2px 0 0 22px
}
#T-Styles-Porta2 .suppliers_area .newsText {
    font-size: 15px;
    line-height: 1.4;
    font-weight: 350;
    text-align: justify;
    text-justify: newspaper
}
@media (max-width: 961px) {}@media (max-width: 641px) {
    .content_threadinfo .like,
    .content_threadinfo .reply,
    .content_threadinfo .view {
        font-size: 11px;
        padding: 2px 0 0 5px
    }
    #T-Styles-Porta2 .suppliers_area .newsText,
    .content_threadinfo .user {
        font-size: 12px
    }
    .content_threadinfo .DateTime {
        font-size: 11px
    }
    #T-Styles-Porta2 .suppliers_area {
        display: none
    }
    #T-Styles-Porta2 .suppliers_promotion {
        font-size: 14px
    }
    #T-Styles-Porta2 .suppliers .dot {
        top: 20px
    }
    #T-Styles-Porta2 .suppliers .arrow {
        top: 18px
    }
}
@media (max-width: 481px) {
    .content_threadinfo .like,
    .content_threadinfo .reply,
    .content_threadinfo .view {
        font-size: 10px;
        padding: 2px 0 0 5px
    }
    #T-Styles-Porta2 .suppliers_area .newsText,
    .content_threadinfo .user {
        font-size: 11px
    }
    .content_threadinfo .DateTime {
        font-size: 10px
    }
    #T-Styles-Porta2 .suppliers_area {
        display: none
    }
    #T-Styles-Porta2 .suppliers_promotion {
        font-size: 13px
    }
    #T-Styles-Porta2 .suppliers .dot {
        top: 20px
    }
    #T-Styles-Porta2 .suppliers .arrow {
        top: 18px
    }
}
.grid {
    position: relative;
    margin: -3.3% -3% 0 -3%;
    _padding: 1em 0 4em;
    _max-width: 1000px;
    list-style: none;
    text-align: center;
}

/* Common style */
.grid .T-Thread-UserInfo {
    position: absolute;
    bottom: 10px;
    left: 10px;
}
.grid .T-Thread-UserInfo a {
    color: #fff;
    }
.grid .T-Thread-UserInfo span {
    font-size: 18px;
    margin-top: -30px;
}
.grid .T-Thread-Avarta {
    float: left;
    margin-right: 15px;
}
.grid figure {
    position: relative;
    _float: left;
    overflow: hidden;
    margin: 10px 1%;
    _min-width: 320px;
    _max-width: 480px;
    _max-height: 360px;
    _width: 48%;
    background: #3085a3;
    text-align: center;
    cursor: pointer;
}

.grid figure img {
    position: relative;
    display: block;
    min-height: 100%;
    max-width: 100%;
    opacity: 0.8;
}

.grid figure figcaption {
    _padding: 10px 20px;
    color: #fff;
    _text-transform: uppercase;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
    pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.grid figure figcaption > a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
}

.grid figure h2 {
    _word-spacing: -0.15em;
    font-weight: 300;
    font-size: 21px;
}

.grid figure h2 span {
    font-weight: 800;
}

.grid figure h2,
.grid figure p {
    margin: 0;
}

.grid figure p {
    letter-spacing: 1px;
    font-size: 68.5%;
}
figure.effect-sarah {
    background: #42b078;
}

figure.effect-sarah img {
    max-width: none;
    width: -webkit-calc(100% + 20px);
    width: calc(100% + 20px);
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

figure.effect-sarah:hover img {
    opacity: 0.4;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-sarah figcaption {
    text-align: left;
}

figure.effect-sarah h2 {
    position: relative;
    overflow: hidden;
    padding: 10px 15px;
    background-color: rgba(0, 0, 0, 0.25);
    text-transform: uppercase;
}

figure.effect-sarah h2::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #F44336;
    content: '';
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}

figure.effect-sarah:hover h2::after {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-sarah p {
    padding: 5px 15px;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(100%,0,0);
    -webkit-transform: translate3d(100%,0,0);
    -moz-transform: translate3d(100%,0,0);
    -o-transform: translate3d(100%,0,0);
    -ms-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
    background-color: rgba(0, 0, 0, 0.25);
}
figure.effect-sarah p a {
    color: #fff;
}
figure.effect-sarah:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
@media screen and (max-width: 50em) {
    .content {
        padding: 0 10px;
        text-align: center;
    }
    .grid figure {
        display: inline-block;
        float: none;
        margin: 10px auto;
        width: 100%;
    }
}

Ok, bây giờ chúng ta tiếp tục thêm chút "màu mè" cho phần bài viết được Promotion bởi XenPorta 2 nhé.
- Các bạn tìm và mở template "EWRporta2_ArticleView" sau đó thay tất cả bằng code dưới đây.
Mã: 
<xen:include template="EWRporta2_Global_Above" />

<xen:title>{xen:helper threadPrefix, $thread, escaped}{$thread.title}{xen:helper pagenumber, $page}</xen:title>
<xen:h1>{xen:helper threadPrefix, $thread}{$thread.title}</xen:h1>

<xen:description>
    {xen:phrase discussion_in_x_started_by_y_date_z,
        'forum=<a href="{xen:link forums, $forum}">{$forum.title}</a>',
        'name={xen:helper username, $thread}',
        'date=<a href="{xen:link threads, $thread}">{xen:datetime $thread.post_date, html}</a>'}
</xen:description>

<xen:navigation>
    <xen:breadcrumb source="$nodeBreadCrumbs" />
</xen:navigation>

<xen:container var="$head.article">
    <link rel="canonical" href="{xen:link 'canonical:threads', $thread, 'page={$page}'}" />
    <meta name="title" content="{xen:helper threadPrefix, $thread, escaped}{$thread.title}" />
    <meta name="description" content="{xen:helper snippet, $firstPost.message, 155}" />

    <xen:if is="{$article.article_icon.type} == 'attach'">
        <meta property="og:image" content="{$article.article_icon.data.thumbnailUrl}" />
    <xen:elseif is="{$article.article_icon.type} == 'image'" />
        <meta property="og:image" content="{$article.article_icon.data.url}" />
    <xen:elseif is="{$article.article_icon.type} == 'medio'" />
        <meta property="og:image" content="{xen:helper medio, $article.article_icon.data}" />
    </xen:if>

    <xen:include template="open_graph_meta">
        <xen:set var="$url">{xen:link 'canonical:threads', $thread}</xen:set>
        <xen:set var="$title">{xen:helper threadPrefix, $thread, escaped}{$thread.title}</xen:set>
        <xen:set var="$description">{xen:helper snippet, $firstPost.message, 155}</xen:set>
        <xen:set var="$avatar">{xen:helper avatar, $thread, m, 0, 1}</xen:set>
    </xen:include>
</xen:container>

<xen:container var="$bodyClasses">{xen:helper nodeClasses, $nodeBreadCrumbs, $forum}{xen:if {$xenOptions.selectQuotable}, ' SelectQuotable'}</xen:container>
<xen:container var="$searchBar.thread"><xen:include template="search_bar_thread_only" /></xen:container>
<xen:container var="$searchBar.forum"><xen:include template="search_bar_forum_only" /></xen:container>

<xen:if is="{$canReply}">
    <xen:comment><xen:topctrl>
        <a href="{xen:link 'threads/reply', $thread}" class="callToAction"><span>{xen:phrase reply_to_thread}</span></a>
    </xen:topctrl></xen:comment>
</xen:if>

<xen:require css="thread_view.css" />
<xen:require css="EWRporta2.css" />
<xen:require css="EWRporta2_ArticleView.css" />
<xen:require js="js/8wayrun/EWRporta2_ajax.js?_v={$xenAddOns.EWRporta2}" />
                <div class="grid">
                    <figure class="effect-sarah">
                            <xen:if hascontent="true">
                    <xen:contentcheck>
                    <xen:if is="{$article.article_icon.type} == 'avatar'">
                        <xen:avatar user="$article" size="s" class="Tooltip" title="{$article.username}" itemprop="photo" />
                    <xen:elseif is="!@porta2_articles_header" />
                        <xen:if is="{$article.article_icon.type} == 'attach'">
                            <a class="attachHolder" href="{xen:link threads, $article}">
                                <xen:if is="@porta2_articles_fullsize">
                                    <img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}" class="bbCodeImage" />
                                <xen:else/>
                                    <img src="{xen:link attachments, $article.article_icon.data}" alt="{$article.article_icon.data.filename}" class="bbCodeImage" />
                                </xen:if>
                            </a>
                        <xen:elseif is="{$article.article_icon.type} == 'image'" />
                            <a class="attachHolder" href="{xen:link threads, $article}"><img src="{$article.article_icon.data.url}" alt="{$article.article_icon.data.file}" /></a>
                        <xen:elseif is="{$article.article_icon.type} == 'medio'" />
                            <a class="medioHolder OverlayTrigger"style="background-image: url('{xen:helper medio2, $article.article_icon.data}');"
                                href="{xen:link 'full:media/media', $article.article_icon.data}" data-href="{xen:link 'full:media/media/popout', $article.article_icon.data}"
                                data-cacheOverlay="false" data-overlayoptions="{&quot;fixed&quot;:false}">
                                    <img src="styles/8wayrun/EWRmedio_play.png" />
                            </a>
                        </xen:if>
                    </xen:if>
                    </xen:contentcheck>

                            </xen:if>
                        <figcaption>
                            <h2>{$thread.title}</h2>
                            <p><a href="{xen:link forums, $forum}">{$forum.title}</a>, <a href="{xen:link threads, $thread}">{xen:datetime $thread.post_date, html}</a>. Trả lời: {xen:number $article.reply_count}, lượt xem: {xen:number $article.view_count}.</p>
                        </figcaption>
                        <div class="T-Thread-UserInfo">
                        <div class="T-Thread-Avarta">
                        <xen:avatar user="$posts.{$thread.first_post_id}" size="s" />
                        </div>
                        <span>
                        <a href="{xen:link members, $article}" class="username" dir="auto">{$article.username}</a>
                        </span>
                        </div>
      
                    </figure>
                </div>
<div class="section messageAuthor">
    <xen:if is="{$xenOptions.addThis.enabled}">
        <xen:include template="addthis_ajax">
            <xen:set var="$url">{xen:link full:threads, $thread}</xen:set>
        </xen:include>
    <xen:else/>
        <xen:hook name="EWRporta2_article_share_page_options">
            <xen:if is="{$xenOptions.facebookLike}">
                <div class="facebookLike shareControl">
                    <xen:container var="$facebookSdk">1</xen:container>
                    <fb:like href="{xen:link 'canonical:threads', $thread}" layout="button_count" action="{$xenOptions.facebookLikeAction}" font="trebuchet ms" colorscheme="@fbColorScheme"></fb:like>
                </div>
            </xen:if>
            <xen:if is="{$xenOptions.plusone}">
                <div class="plusone shareControl">
                    <div class="g-plusone" data-size="medium" data-count="true" data-url="{xen:link 'canonical:threads', $thread}" data-lang="{$visitorLanguage.language_code}"></div>
                </div>
            </xen:if>
            <xen:if is="{$xenOptions.tweet.enabled}">
                <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="{xen:link 'canonical:threads', $thread}"
                        {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>
            </xen:if>
        </xen:hook>
    </xen:if>



</div>

<div class="pageNavLinkGroup">
    <div class="linkGroup">
        <xen:if hascontent="true">
            <div class="Popup">
                <a rel="Menu">{xen:phrase porta2_article_tools}</a>
                <div class="Menu">
                    <div class="primaryContent menuHeader"><h3>{xen:phrase porta2_article_tools}</h3></div>
                    <ul class="secondaryContent blockLinksList">
                        <xen:contentcheck>
                            <xen:if is="{$canEditThread}">
                                <li><a href="{xen:link 'threads/edit', $thread}" class="OverlayTrigger">{xen:phrase edit_thread}</a></li>
                            <xen:elseif is="{$canEditTitle}" />
                                <li><a href="{xen:link threads/edit-title, $thread}" class="OverlayTrigger">{xen:phrase edit_title}</a></li>
                            </xen:if>
                            <xen:if is="{$canAddPoll}">
                                <li><a href="{xen:link 'threads/poll/add', $thread}">{xen:phrase add_poll}</a></li>
                            </xen:if>
                            <xen:if is="{$canDeleteThread}">
                                <li><a href="{xen:link 'threads/delete', $thread}" class="OverlayTrigger">{xen:phrase delete_thread}</a></li>
                            </xen:if>
                            <xen:if is="{$canMoveThread}">
                                <li><a href="{xen:link 'threads/move', $thread}" class="OverlayTrigger">{xen:phrase move_thread}</a></li>
                            </xen:if>
                            <xen:if is="{$canReplyBan}">
                                <li><a href="{xen:link 'threads/reply-bans', $thread}" class="OverlayTrigger">{xen:phrase manage_reply_bans}</a></li>
                            </xen:if>
                            <xen:if is="{$canViewModeratorLog}">
                                <li><a href="{xen:link 'threads/moderator-actions', $thread}" class="OverlayTrigger">{xen:phrase moderator_actions}</a></li>
                            </xen:if>
                            <xen:if is="{$deletedPosts}">
                                <li><a href="{xen:link threads/show-posts, $thread, 'page={$page}'}" class="MessageLoader" data-messageSelector="#messageList .message.deleted.placeholder">{xen:phrase show_deleted_posts}</a></li>
                            </xen:if>
                            <xen:hook name="thread_view_tools_links" params="{xen:array 'thread={$thread}'}" />
                        </xen:contentcheck>
                    </ul>
                </div>
            </div>
        </xen:if>
    </div>

    <xen:include template="EWRporta2_Article_Categories">
        <xen:map from="$categories.cats" to="$categories" />
    </xen:include>
</div>

<ol class="messageList messageArticle">
    <xen:include template="post">
        <xen:map from="$posts.{$thread.first_post_id}" to="$post" />
    </xen:include>
</ol>

<xen:if is="{$author}">
    <xen:include template="EWRporta2_AuthorList_Bit" />
</xen:if>

<xen:if is="{$xenOptions.EWRporta2_subcategories} && ({$categories.tags} || {$perms.tag})">
    <div class="sectionMain catList">
        <div class="secondaryContent">
            <xen:if is="{$perms.moderate}">
                <a href="{xen:link 'threads/subcats', $article}" class="edit OverlayTrigger" data-cacheOverlay="false"></a>
            </xen:if>
      
            <span class="muted">{xen:phrase porta2_subcats}:</span>
      
            <xen:include template="EWRporta2_Article_Subcats">
                <xen:map from="$categories.tags" to="$tags" />
            </xen:include>
  
            <xen:if is="{$perms.tag}">
            <form action="{xen:link threads/add-subcats, $thread}" method="post" class="xenForm AutoValidator SubcatEditor" data-redirect="true">
                <dl class="ctrlUnit fullWidth">
                    <dt></dt>
                    <dd>
                        <input type="search" name="new_tags" value="" placeholder="{xen:phrase porta2_subcat_this_article}..." results="0" class="textCtrl AutoComplete"
                            data-acurl="{xen:link articles/find-subcats}" />
                        <xen:if is="!{$perms.tags}"><p class="explain">{xen:phrase porta2_subcat_this_article_hint}</p></xen:if>
                    </dd>
                </dl>
                <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" />
            </form>
            </xen:if>
        </div>
    </div>
</xen:if>

<xen:if is="{$poll}">
    <xen:include template="poll_block">
        <xen:set var="$options">
            <xen:if is="{$poll.canVote} AND !{$poll.hasVoted}">
                <xen:include template="poll_block_vote" />
            <xen:else />
                <xen:include template="poll_block_result" />
            </xen:if>
        </xen:set>
    </xen:include>
</xen:if>

<xen:include template="EWRporta2_Global_Below_1" />

<xen:hook name="thread_view_pagenav_before" params="{xen:array 'thread={$thread}'}" />

<xen:if hascontent="true">
    <div class="titleBar" id="comments">
        <h1>{xen:phrase comments}</h1>
        <p id="commentsDescription" class="muted">{xen:phrase discussion_in_x_started_by_y_date_z,
            'forum=<a href="{xen:link forums, $forum}">{$forum.title}</a>',
            'name={xen:helper username, $thread}',
            'date=<a href="{xen:link threads, $thread}">{xen:datetime $thread.post_date, html}</a>'}</p>
    </div>

    <ul class="tabs mainTabs Tabs {xen:if '{xen:count $article.comment_count} == 1', 'onlyOne'}" data-panes="#CommentPanes > li" data-history="on">
        <xen:contentcheck>
        <xen:if is="{$article.article_options.local}">
            <li id="tabLocal"><a href="{$requestPaths.requestUri}#commentsLocal">{xen:phrase porta2_local_comments}</a></li>
        </xen:if>
        <xen:if is="{$xenOptions.EWRporta2_promote_disqus} && {$article.article_options.disqus}">
            <li id="tabDisqus"><a href="{$requestPaths.requestUri}#commentsDisqus">{xen:phrase porta2_disqus_comments}</a></li>
        </xen:if>
        <xen:if is="{$xenOptions.EWRporta2_promote_facebook} && {$article.article_options.facebook}">
            <li id="tabFacebook"><a href="{$requestPaths.requestUri}#commentsFacebook">{xen:phrase porta2_facebook_comments}</a></li>
        </xen:if>
        </xen:contentcheck>
    </ul>

    <ul id="CommentPanes">
        <xen:if is="{$article.article_options.local}">
            <li id="commentsLocal" class="commentPane"><xen:include template="EWRporta2_ArticleView_Comments" /></li>
        </xen:if>
        <xen:if is="{$xenOptions.EWRporta2_promote_disqus} && {$article.article_options.disqus}">
            <li id="commentsDisqus" class="commentPane"><xen:include template="EWRporta2_ArticleView_Disqus" /></li>
        </xen:if>
        <xen:if is="{$xenOptions.EWRporta2_promote_facebook} && {$article.article_options.facebook}">
            <li id="commentsFacebook" class="commentPane"><xen:include template="EWRporta2_ArticleView_Facebook" /></li>
        </xen:if>
    </ul>
</xen:if>

<xen:include template="share_page">
    <xen:set var="$url">{xen:link 'canonical:threads', $thread}</xen:set>
</xen:include>

<xen:include template="EWRporta2_Global_Below_2" />
<xen:include template="EWRporta2_Global_Side" />

Bây giờ quay lại trang chủ và F5 để xem thay đổi thôi nào.
Chú ý: có thể nhiều style sẽ hiển thị đôi chút sai lệnh, nếu gặp lổi các bạn thảo luận tại chủ đề này luôn nhé.
Quên mất, các bạn tải thư mục "img" dưới đính kèm và upload lên thư mục style các bạn đang sử dụng nhé.
Nhấn để mở rộng...

Cho mình hỏi chỉnh cao độ rộng của cái bbCode Block như thế nào nhỉ?

upload_2017-11-29_15-49-41.png


Mình cảm ơn và mong hồi âm của anh em !
 
Bạn phải đăng nhập hoặc đăng ký để bình luận.
Người đăng Chủ đề tương tự Diễn đàn Trả lời Ngày đăng
nhuttranou Hướng dẫn style Xenporta trang chủ dạng tin tức đẹp 2017 Styles Xenforo 19
P Styles Xin Style trang chủ Xenporta Styles Xenforo 0
toanthayviet Help [Style XenPorta 2 - SEOMXH ] - Lỗi khi cài trên Xenforo 1.5.8 mong các bạn giúp đỡ Styles Xenforo 2
T Styles Style SEOMXH with XenPorta 2 (Released) Styles Xenforo 25
T Styles Style Tinhte.vn with XenPorta 2 Styles Xenforo 103

Chủ đề tương tự


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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Xử lý sự cố (Troubleshooting)

Texlink

Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom