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

Thảo luận trong 'Style & Template Questions' bắt đầu bởi nttruong, 8/5/13.

1votes
5/5, 1 vote

  1. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    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 :D

    Demo:

    XenForo (27)

    Làm nè:

    Tìm các template sau và chép code thay thế vào nhé:
    - VietXfAdvStats.css:
    Mã:
    .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:
    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>
    - VietxfAdvStats_threads_latest:
    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>
    
    -VietXfAdvStats_wrapper:
    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="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:
    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>
    Done! chạy xem các bạn. Like mạnh nàu >:)
     
    thb2014, Imma Kun, thuatdl and 6 others like this.
    Đang tải...
  2. Chấm

    Chấm Active Member

    Bài viết:
    649
    Likes :
    123
    Sao e add r cái nền của tiêu đề nó màu đen vậy a @@
     
    QuocCuongPham and Character_Boy like this.
  3. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    Em cho anh demo live để anh xem nhé
     
    Character_Boy thích bài này.
  4. Chấm

    Chấm Active Member

    Bài viết:
    649
    Likes :
    123
    Character_Boy thích bài này.
  5. dongdaik

    dongdaik Member

    Bài viết:
    191
    Likes :
    35
  6. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    Do CSS của anh là lấy màu mặc định của pallete ra, em xem nhé:
    Mã:
    .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!
     
  7. Chấm

    Chấm Active Member

    Bài viết:
    649
    Likes :
    123
    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 :D
     
  8. nttruong

    nttruong Well-Known Member

    Bài viết:
    1,518
    Likes :
    776
    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!
     
  9. thanhpt

    thanhpt Member

    Bài viết:
    174
    Likes :
    30
    MÌNH KO THICK CÁI MÀU NÀY :)
     
  10. Chấm

    Chấm Active Member

    Bài viết:
    649
    Likes :
    123
    A vào inbox xem đi a
    Em mới inbox a vài tin đó :D
     
  11. haiyen.tran37

    haiyen.tran37 New Member

    Bài viết:
    1
    Likes :
    0
    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:x m có nói gì sai đừng chém em, em còn trẻ người non da. Then kui
     
  12. Chấm

    Chấm Active Member

    Bài viết:
    649
    Likes :
    123
    Chỉ e đi a :D
     
  13. nhatdang_daisu

    nhatdang_daisu New Member

    Bài viết:
    4
    Likes :
    0
    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ỉ.
     
  14. Imma Kun

    Imma Kun Verified User

    Bài viết:
    1,298
    Likes :
    782
    Like tinh thần chứ không xài ... đá top cho bác nttruong
     
  15. Trâu điên

    Trâu điên New Member

    Bài viết:
    3
    Likes :
    0
    cái này trông hay hay, mang về test thử cái
     
  16. ad.unlock

    ad.unlock New Member

    Bài viết:
    23
    Likes :
    1
    Em không add đc Advanced Forum Statistics toàn báo lỗi Please enter a valid callback method (VietXfAdvStats_Listener::load_class).
     
  17. fhf

    fhf New Member

    Bài viết:
    6
    Likes :
    0
    e không tìm được cái templates nào trên này luôn. đang xài xenforo 1.1.5. giúp em với ạ
     
  18. Lightness

    Lightness Imma Superman

    Bài viết:
    1,021
    Likes :
    772
    Đã cài addon Advanced Forum Statistics vào chưa ?
     
  19. gaxenforo

    gaxenforo New Member

    Bài viết:
    1
    Likes :
    0
    của mình làm rồi mà nó không hiển thị số thứ tự.... 1 2 3
     
  20. huyne197

    huyne197 Member

    Bài viết:
    183
    Likes :
    43
    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
     
comments powered by Disqus

Chia sẻ trang này

Đang tải...