Share giao diện thống kê vietxf giống Awesome Top Stats

nttruong · May 8, 2013

Tình hình buồn chả gì làm, share cái giao diện thống kê vietxf chỉnh sửa lại css cho giống Awesome Top Stats của bác Xavier, và chỉ đơn giản là giống về giao diện chứ kg có chức năng như bác ấy nhé!

Do đó, ai thích thì dùng, kg dùng đừng nói lời cay đắng

Demo:

Làm nè:

Tìm các template sau và chép code thay thế vào nhé:
- VietXfAdvStats.css:

Code:

.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;
    }
   
        .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 */
.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.sort_num {
width: 23px;
height: 370px;
background: url(http://students-vn.com/styles/Milano/AwesomeTopStats/statsnum15.png) left center no-repeat;
position: absolute;
z-index: 999;
margin-left: 136px;
}
div.st_vertical div.st_tabs_container {
position: relative;
z-index: 100;
float: left;
width: 132px;
height: 371px;
margin-right: -1px;
border-top: 1px solid #d4d4d4;
overflow: hidden;
}
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: 350px;
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: 36px;
padding: 15px 0 15px 20px;
margin: 0px;
font-size: 11px;
color: #5c5c5c;
font-weight: bold;
line-height: normal;
text-decoration: none;
outline: none;
 
border-bottom: 1px solid #d4d4d4;
border-left: 1px solid #d4d4d4;
background: #fff;
}
 
div.st_vertical div.st_view {
position: relative;
height: 100%;
}
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;
font-weight: bold;
color: #623F1D;
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: rgb(87, 116, 158);
padding-right: 1px;
font-size: 0.95em;
background: #fff;
box-shadow: 5px 5px 7px #CCCCCC;
-webkit-box-shadow: 5px 5px 7px #CCCCCC;
-moz-box-shadow: 5px 5px 7px #CCCCCC;
-khtml-box-shadow: 5px 5px 7px #CCCCCC;
-webkit-box-shadow: 5px 5px 7px #CCCCCC;
-moz-box-shadow: 5px 5px 7px #CCCCCC;
-khtml-box-shadow: 5px 5px 7px #CCCCCC;
}
div.st_vertical ul.st_tabs a:hover {
color: rgb(102, 102, 102);
}

- VietxfAdvStats_threads_hot:

Code:

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

- VietxfAdvStats_threads_latest:

Code:

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

-VietXfAdvStats_wrapper:

Code:

<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="sort_num"></div>
<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>

- VietXfAdvStats_wrapper_section_li:

Code:

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

Done! chạy xem các bạn. Like mạnh nàu >:)

Chấm · May 8, 2013

Sao e add r cái nền của tiêu đề nó màu đen vậy a @@

nttruong · May 8, 2013

Chấm said: ↑

Sao e add r cái nền của tiêu đề nó màu đen vậy a @@
Click to expand...

Em cho anh demo live để anh xem nhé

Chấm · May 9, 2013

nttruong said: ↑

Em cho anh demo live để anh xem nhé
Click to expand...

http://ss-f.net/ssf/index.php
Đây anh

dongdaik · May 9, 2013

Chấm said: ↑

http://ss-f.net/ssf/index.php
Đây anh
Click to expand...

bạn tìm css của thanh nằm ngang đó sửa đi!

nttruong · May 9, 2013

Chấm said: ↑

http://ss-f.net/ssf/index.php
Đây anh
Click to expand...

Do CSS của anh là lấy màu mặc định của pallete ra, em xem nhé:
Code:
.VietXfAdvStats_SectionItem {
    background-color: @contentBackground;
 
}
1 là em sửa màu trong pallete, 2 là em chỉnh màu tại đây luôn!

Chấm · May 9, 2013

nttruong said: ↑
Do CSS của anh là lấy màu mặc định của pallete ra, em xem nhé:
Code:
.VietXfAdvStats_SectionItem {
    background-color: @contentBackground;
 
}
1 là em sửa màu trong pallete, 2 là em chỉnh màu tại đây luôn!
Click to expand...
A chỉ e cái dưới mỗi tiêu đề ngoài topx cho nó gạch gạch phân cách đi a
Chứ nó trống không nhìn hơi xấu

nttruong · May 9, 2013

anh cũng đâu có gạch phân cách, cần thì thêm boder-bottom dạng gạch phân cách là được em!

thanhpt · May 9, 2013

MÌNH KO THICK CÁI MÀU NÀY

Chấm · May 9, 2013

nttruong said: ↑

anh cũng đâu có gạch phân cách, cần thì thêm boder-bottom dạng gạch phân cách là được em!
Click to expand...

A vào inbox xem đi a
Em mới inbox a vài tin đó

haiyen.tran37 · May 9, 2013

hơ hơ em đang tìm cái này, em mới được xếp giao cho cái diễn đàn ( từ trước đến giờ chưa từng làm) . Mong các pro chỉ giáo cho em nhiều hơn, e m có nói gì sai đừng chém em, em còn trẻ người non da. Then kui

Chấm · May 9, 2013

nttruong said: ↑

anh cũng đâu có gạch phân cách, cần thì thêm boder-bottom dạng gạch phân cách là được em!
Click to expand...

Chỉ e đi a

nhatdang_daisu · Jun 23, 2013

Bác cho em hỏi có cách nào chọn thao từng thead mình muốn như của vbb mình có thể chọn hiển thị nội dung của 1 box nhất định không nhỉ.

Imma Kun · Jun 23, 2013

Like tinh thần chứ không xài ... đá top cho bác nttruong

Trâu điên · Jun 23, 2013

cái này trông hay hay, mang về test thử cái

ad.unlock · Sep 27, 2013

Em không add đc Advanced Forum Statistics toàn báo lỗi Please enter a valid callback method (VietXfAdvStats_Listener::load_class).

fhf · Feb 2, 2014

e không tìm được cái templates nào trên này luôn. đang xài xenforo 1.1.5. giúp em với ạ

Lightness · Feb 2, 2014

fhf said: ↑

e không tìm được cái templates nào trên này luôn. đang xài xenforo 1.1.5. giúp em với ạ
Click to expand...

Đã cài addon Advanced Forum Statistics vào chưa ?

gaxenforo · May 30, 2014

của mình làm rồi mà nó không hiển thị số thứ tự.... 1 2 3

huyne197 · May 30, 2014

Chấm said: ↑

Chỉ e đi a
Click to expand...

inbox đi, mình gửi lại cho bạn cái addon cài đặt lại mới xêm có bị gì không, bên mình vẫn bình thườn mà dâu có bị gì đâu ak

Share giao diện thống kê vietxf giống Awesome Top Stats

nttruong Well-Known Member

Chấm Active Member

nttruong Well-Known Member

Chấm Active Member

dongdaik Member

nttruong Well-Known Member

Chấm Active Member

nttruong Well-Known Member

thanhpt Member

Chấm Active Member

haiyen.tran37 New Member

Chấm Active Member

nhatdang_daisu New Member

Imma Kun Verified User

Trâu điên New Member

ad.unlock New Member

fhf New Member

Lightness Imma Superman

gaxenforo New Member

huyne197 Member

Share This Page

Text Links

Textlink

Thông báo mới nhất