Giao diện Topx phong cách Metro cực đẹp cho XenForo

PVS · 16/03/2015

Liệu bạn có thích thống kê diễn đàn của mình mang giao diện phẳng như hình dưới không ? Nếu có, thì bài viết này sẽ chia sẻ đến bạn cách tùy biến phong cách Metro cho Topx của diễn đàn của bạn!

Đầu tiên, để có được Bảng thống kê . Các bạn phải cài đặt Add-on : Advanced Forum Statistics (Cái này Google nhé) .

Sau khi cài đặt xong. Bạn vào : Admincp -> Appearance -> Templates :

Tìm templates : VietXfAdvStats.css thay toàn bộ bằng :

Mã:

<xen:if is="@enableResponsive">
@media only screen and (max-width: @maxResponsiveWideWidth)
{
#Block1st {display: none; !important;}
#Block2nd {margin-left: 0px !important;}
}
@media only screen and (max-width: @maxResponsiveMediumWidth), only screen and (max-device-width: @maxResponsiveNarrowWidth)
{
#Block1st {display: none; !important;}
#Block2nd {margin-left: 0px !important;}
.VietXfAdvStats_Thread .VietXfAdvStats_SectionItemInfo { display: none !important; }
}
</xen:if>

.VietXfAdvStats {
}
    .VietXfAdvStats h3 {
        @property "subHeading";
        font-size: 11px;
        color: @secondaryDarker;
        background: @secondaryLighter url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
        padding: 5px 10px;
        margin: 0 auto;
        border-bottom-color: #D9D9D9;
        @property "/subHeading";
        @property "categoryStrip";
        font-size: 13px !important;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: rgb(255, 255, 255);
        background-color: rgb(0, 0, 0);
        background-position: !important;
        padding: 5px 10px;
        margin: 0;
        line-height: 1.333em;
        @property "/categoryStrip";
    
        margin-bottom: 5px;
    }
        .VietXfAdvStats h3 .VietXfAdvStats_Header {
            @property "categoryStripTitle";
            font-size: 16px !important;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            color: rgb(255, 255, 255);
            text-decoration: none;
            line-height: 1.333em;
            @property "/categoryStripTitle";
        }
    
        .VietXfAdvStats h3 .VietXfAdvStats_Controls {
            float: right;
            font-size: @categoryStripTitle.font-size;
        }
            .VietXfAdvStats h3 .VietXfAdvStats_Controls select {
                margin-top: -3px;
            }
    #Block1st {
        float: left;
        width: @VietXfAdvStats_Block1stWidth;
    }
    #Block2nd {
    
    }
        #Block1stPanes,
        #Block2ndPanes {
        
        }
        #Block1st .VietXfAdvStats_Block1stContent {
            padding-left: 25px;
            padding-right: 5px;
            line-height: 14px;
        }
        #Block2nd .VietXfAdvStats_Block2ndContent {
            padding-left: 5px;
            padding-right: 5px;
            line-height: 14px;
                    
        }
        #Block1st .VietXfAdvStats_Block1stContent{
            background: url(styles/default/xenforo/list.gif) no-repeat top left;
        }
.VietXfAdvStats_Section {
    position: relative;
    zoom: 1;
}
    .VietXfAdvStats_SectionItem {
        display: table;
        table-layout: fixed;
        width: 100%;
        word-wrap: normal;
        height: 23px;
        border-bottom: 1px solid #ddd;
    }
        .VietXfAdvStats_SectionItem .VietXfAdvStats_SectionItemBlock {
            display: table-cell;
            vertical-align: middle;
        }
    .VietXfAdvStats_SectionItem .VietXfAdvStats_SectionItemTitle {
        @property "VietXfAdvStats_SectionItemTitleCss";

        @property "/VietXfAdvStats_SectionItemTitleCss";
    }
    .VietXfAdvStats_SectionItem .VietXfAdvStats_SectionItemInfo {
        @property "VietXfAdvStats_SectionItemInfoCss";
        font-size: 11px;
        text-align: right;
        @property "/VietXfAdvStats_SectionItemInfoCss";
    }
/** IE <8 **/
.VietXfAdvStats_SectionItem                              { *display: block; _vertical-align: bottom; }
.VietXfAdvStats_SectionItem .listBlock                  { *display: block; *float: left; }
.VietXfAdvStats_SectionItem .listBlock                  { _height: 52px; *min-height: 52px; } /* todo: should be calculation */
.VietXfAdvStats_Section .VietXfAdvStats_SectionItemTitle { *width: 69.98%; }
.VietXfAdvStats_Section .VietXfAdvStats_SectionItemInfo  { *width: 29.98%; }
.VietXfAdvStats_SectionItem {
    background-color: @contentBackground;
}
/** USERS SECTION - itonline.vn */
.VietXfAdvStats_User {
}
    .VietXfAdvStats_User .VietXfAdvStats_SectionItemTitle {
        width: {xen:if '{xen:calc '@VietXfAdvStats_UserNameWidth'} > 0', '@VietXfAdvStats_UserNameWidth', 'auto'};
    }
    .VietXfAdvStats_User .VietXfAdvStats_SectionItemInfo {
        width: {xen:if '{xen:calc '@VietXfAdvStats_UserInfoWidth'} > 0', '@VietXfAdvStats_UserInfoWidth', 'auto'};
    }
/** THREADS SECTION */
.VietXfAdvStats_Thread {
}
    .VietXfAdvStats_Thread .VietXfAdvStats_ThreadTitle.new a {
        font-weight: bold;
    }
    .VietXfAdvStats_Thread .VietXfAdvStats_SectionItemTitle {
        width: {xen:if '{xen:calc '@VietXfAdvStats_ThreadTitleWidth'} > 0', '@VietXfAdvStats_ThreadTitleWidth', 'auto'};
    }
    .VietXfAdvStats_Thread .VietXfAdvStats_SectionItemInfo {
        width: {xen:if '{xen:calc '@VietXfAdvStats_ThreadInfoWidth'} > 0', '@VietXfAdvStats_ThreadInfoWidth', 'auto'};
    }
div.st_vertical {
position: relative;
clear: both;
width: 100%;
color: #616161;
font: 13px/18px Arial, Helvetica, sans-serif;
margin: 0 auto;
}

div.st_vertical div.st_tabs_container {
position: relative;
z-index: 100;
float: left;
width: 132px;
height: 501px;
margin-right: -1px;
border-top: 1px solid #d4d4d4;
overflow: hidden;
border-top: 30px solid #43a6df;
}
div.st_vertical div.st_slide_container {
position: relative !important;
float: left;
clear: both;
}
div.st_vertical div.st_view_container {
margin-left: 131px;
position: relative;
z-index: 5;
height: 510px;
padding: 10px 10px;
line-height: 18px;
border: 1px solid #d4d4d4;
background: #fff;
}
div.st_vertical ul.st_tabs {
float: left;
width: 120px;
margin: 0px;
padding: 0px;
list-style: none;
}
div.st_vertical ul.st_tabs li {
float: left;
clear: both;
}
div.st_vertical ul.st_tabs li a {
display: block;
width: 110px;
height: 41px;
padding: 15px 0 15px 20px;
margin: 0px;
font-size: 11px;
color: #E4E4E4;
font-weight: bold;
line-height: normal;
text-decoration: none;
outline: none;
border-left: 1px solid #d4d4d4;
background: #2A2A2A none;
border-top: 1px solid #d4d4d4;
}
div.st_vertical div.st_view {
position: relative;
height: 100%;
border-top: 30px solid #43a6df;
padding: 8px 10px;
margin: -11px -10px;
padding-left: 0;
}
div.st_vertical div.st_tab_view {
width: 100%;
background-color: #fff;
}
.xl ol, .xl ul {
list-style: none outside none;
}
div.module ul li {
background: #f4f4f4;
float: right;
height: 19px;
margin: 2px !important;
width: 97%;
}
.VietXfAdvStats_Thread .VietXfAdvStats_SectionItemTitle a{
margin-left: 3px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
}
.VietXfAdvStats_Thread .VietXfAdvStats_SectionItemTitle {
padding-left: 5px;

}
div.st_vertical ul.st_tabs a.active {
position: relative;
z-index: 10;
color: #FFF;
background: #43a6df;
}
div.st_vertical ul.st_tabs a:hover {
color: #F4F4F4;
}

.VietXfAdvStats_Header{padding :10px}

Tìm templates : VietxfAdvStats_threads_hot thay toàn bộ bằng :

Mã:

<div class="VietXfAdvStats_SectionItem VietXfAdvStats_Thread">
    <div class="VietXfAdvStats_SectionItemBlock VietXfAdvStats_SectionItemTitle VietXfAdvStats_ThreadTitle">
    
    
        <xen:if is="{$thread.prefix_id}">
            <xen:if is="{$linkPrefix}">
                <a href="{xen:link forums, $forum, 'prefix_id={$thread.prefix_id}'}" class="prefixLink"
                    title="{xen:phrase show_only_threads_prefixed_by_x, 'prefix={xen:helper threadPrefix, $thread, plain, ""}'}">{xen:helper threadPrefix, $thread, html, ''}</a>
            <xen:else />
                {xen:helper threadPrefix, $thread}
            </xen:if>
        </xen:if>
        <a href="{xen:link '{xen:if '{$thread.isNew}', 'threads/unread', 'threads'}', {$thread}}" class="{xen:if $thread.hasPreview, PreviewTooltip}"
            data-previewUrl="{xen:if $thread.hasPreview, {xen:link threads/preview, $thread}}">
            <xen:if is="@VietXfAdvStats_ThreadTitleChars > 0">
                {xen:helper wordtrim, {$thread.title}, @VietXfAdvStats_ThreadTitleChars}
            <xen:else />
                {$thread.title}
            </xen:if>
        </a>
    </div>
    <div class="VietXfAdvStats_SectionItemBlock VietXfAdvStats_SectionItemInfo VietXfAdvStats_ThreadViewCount">
        {xen:number {$thread.view_count}}
        {xen:if '{$thread.view_count} == 1', '{xen:phrase VietXfAdvStats_lowercase_view}', '{xen:phrase VietXfAdvStats_lowercase_views}'}
    </div>
</div>

Tìm templates : VietxfAdvStats_threads_latest thay toàn bộ bằng :

Mã:

<div class="VietXfAdvStats_SectionItem VietXfAdvStats_Thread">
    <div class="VietXfAdvStats_SectionItemBlock VietXfAdvStats_SectionItemTitle VietXfAdvStats_ThreadTitle">
    
        <xen:if is="{$thread.prefix_id}">
            <xen:if is="{$linkPrefix}">
                <a href="{xen:link forums, $forum, 'prefix_id={$thread.prefix_id}'}" class="prefixLink"
                    title="{xen:phrase show_only_threads_prefixed_by_x, 'prefix={xen:helper threadPrefix, $thread, plain, ""}'}">{xen:helper threadPrefix, $thread, html, ''}</a>
            <xen:else />
                {xen:helper threadPrefix, $thread}
            </xen:if>
        </xen:if>
        <a href="{xen:link '{xen:if '{$thread.isNew}', 'threads/unread', 'threads'}', {$thread}}" class="{xen:if $thread.hasPreview, PreviewTooltip}"
            data-previewUrl="{xen:if $thread.hasPreview, {xen:link threads/preview, $thread}}">
            <xen:if is="@VietXfAdvStats_ThreadTitleChars > 0">
                {xen:helper wordtrim, {$thread.title}, @VietXfAdvStats_ThreadTitleChars}
            <xen:else />
                {$thread.title}
            </xen:if>
        </a>
    </div>
    <div class="VietXfAdvStats_SectionItemBlock VietXfAdvStats_SectionItemInfo VietXfAdvStats_ThreadLastPoster">
        <xen:username user="$thread" rich="true" />
    </div>
</div>

Tìm templates : VietXfAdvStats_wrapper thay toàn bộ bằng :

Mã:

<xen:require js="js/VietXfAdvStats/frontend.js" />
<xen:require css="VietXfAdvStats.css" />
<div class="VietXfAdvStats" data-bulkUpdateUrl="{$bulkUpdateUrl}">
    <div id="st_vertical" class="st_vertical">
<div class="st_tabs_container">
    <div class="st_slide_container">
        <ul class="st_tabs VietXfAdvStats_SectionTrigger" data-panes="#Block2ndPanes > li">
            <xen:foreach loop="$sections2nd" value="$section">
                <li><a href="{$requestPaths.requestUri}#{$section.section_id}">{$section.section_title}</a></li>
            </xen:foreach>
        </ul></div></div>
<div class="st_view_container">
<div class="st_view">
<div class="module cl xl xl1">
        <ul id="Block2ndPanes">
            <xen:foreach loop="$sections2nd" value="$section">
                <xen:include template="VietXfAdvStats_wrapper_section_li">
                    <xen:set var="$liClass">VietXfAdvStats_Block2ndContent</xen:set>
                </xen:include>
            </xen:foreach>
        </ul>
</div></div></div>
    <div style="clear: both; height: 0px;">&nbsp;</div>
</div></div>
<xen:include template="preview_tooltip" />
<div style="clear:both;margin-top: 5px"></div>

Tìm templates : VietXfAdvStats_wrapper_section_li thay toàn bộ bằng :

Mã:

<xen:if is="{$section.rendered}">
    <li id="{$section.section_id}" class="VietXfAdvStats_BlockContent {$liClass}">
        {xen:raw {$section.rendered}}
    </li>
<xen:else />
    <li id="{$section.section_id}" class="VietXfAdvStats_BlockContent {$liClass}" data-loadUrl="{$section.section_link}">
        {xen:phrase loading}...
        <noscript><a href="{$section.section_link}'}">{xen:phrase view}</a></noscript>
    </li>
</xen:if>

Oke, như vậy là xong rồi đấy, bây giờ bạn có thể F5 lại và hưởng thành quả thôi!

Lưu ý : Do pageWidth của mỗi Website là khác nhau, nên các bạn chỉnh lại CSS cho phù hợp nhé. Chúc các bạn thành công!

Nguồn: itonline.vn

NDK · 18/03/2015

thank đã chia sẻ , mình muốn hỏi thêm về template VietXf này .Do css và option nên mình chỉ cho hiển thị 11 tin đăng . Theo css ở trên thì sẽ dư ra 1 đoạn .Ở block bài viết thì có thể sửa rồi .Ở block chuyên mục thì trong tùy chọn chỉ cho 4 ô .Vậy làm thế nào để tăng thêm số ô ??

Minh Bảo · 18/03/2015

share4web nói:
thank đã chia sẻ , mình muốn hỏi thêm về template VietXf này .Do css và option nên mình chỉ cho hiển thị 11 tin đăng . Theo css ở trên thì sẽ dư ra 1 đoạn .Ở block bài viết thì có thể sửa rồi .Ở block chuyên mục thì trong tùy chọn chỉ cho 4 ô .Vậy làm thế nào để tăng thêm số ô ??

Bạn mún tăng thêm 4 ô nào vậy?

manhhieudhhv · 19/03/2015

Cảm ơn bạn vì chia sẻ hữu ích, nhưng addon thống kê này thực sự là thảm họa đối với tốc độ load site nếu site nhiều bài viết.

NDK · 19/03/2015

Minh Bảo nói:
Bạn mún tăng thêm 4 ô nào vậy?

ở block đầu tiên như trên ảnh demo đó ad

dcstylexf · 24/03/2015

manhhieudhhv nói:
Cảm ơn bạn vì chia sẻ hữu ích, nhưng addon thống kê này thực sự là thảm họa đối với tốc độ load site nếu site nhiều bài viết.

ít nhất là nó vẫn nhẹ hơn cái modern static của brivium bạn ạ

THB · 24/03/2015

Mình thấy chạy cũng bình thường mà ta?

thangtkt · 11/12/2015

cài đặt VietXfAdvStats sao mấy bác

XenForo 1	XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Giao diện Topx phong cách Metro cực đẹp cho XenForo

PVS

Super Moderator

NDK

MasterSergeant

Minh Bảo

Khách VNXF

manhhieudhhv

Gefreiter

NDK

MasterSergeant

dcstylexf

SergeantMajor

THB

Founder

thangtkt

Private

Dịch vụ XenForo của VNXF

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

Xử lý sự cố (Troubleshooting)

Texlink

Nhà Tài Trợ