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

Thảo luận trong 'Theme skin xenforo' bắt đầu bởi nanalove01, 17/6/14.

  1. nanalove01 PageRank 1 Member

    Tham gia ngày:
    17/6/14
    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é!

    Demo:

    [​IMG]

    Làm nè:

    Tìm các template sau và chép code thay thế vào nhé:
    - VietXfAdvStats.css:
    Mã:
    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>
    Xong. Nếu có thắc mắc chỗ nào thì để lại yêu cầu phía dưới nhé.
     
    #1
  2. Lãng Tử PageRank 1 Member

    Tham gia ngày:
    4/5/14
    #2
  3. dachop PageRank 1 Member

    Tham gia ngày:
    15/1/14
    1.Thiết kế đẹp
    Rovi HERO 2 tai zalo mien phi thiết kế nổi bật với khung viền nhôm nguyên khối, với các chi tiết phím cứng gia công tỉ mỉ đem lại cảm giác hoàn thiện khá tốt. Mặt lưng máy được xử lý bằng công nghệ ép liền 9 lớp, mỏng nhưng cứng và chống xước thiệu quả. Ngoài ra còn giúp chống bám bẩn mồ hôi, dấu vân tay.
    [​IMG]
    [​IMG]
    2.Cấu hình mạnh
    [​IMG]
    HERO 2 trang bị cấu hình khá với vi xử lý 8 nhân vận hành đồng thời MT6592 xung nhịp 1,4GHz, GPU Mali 400 MP4 tốc độ 600MHz. tai zalo Thực tế máy cho hiệu năng không có gì phải phàn nàn, thể hiện mượt mà khi chơi game đồ họa nặng hay xem phim Full HD.
    3.Màn hình chuẩn HD
    [​IMG]
    Máy có màn hình 5 inch độ phân giải chuẩn HD (1280 x 720 px), sử dụng tấm nền IPS, tất cả bảo vệ bằng tấm kính cường lực Dragontrail công nghệ 2.5D vuốt cong về 4 cạnh. Đem lại chất lượng hiển thị rất đáng ghi nhận trong phân khúc giá.
    4. Máy ảnh chính 14MP
    [​IMG]
    HERO 2 được đầu tư máy ảnh chính lên đến 14MP kèm đèn flash kính quang học sáng hơn bình thường, kết hợp với phần cứng tốt nên cho tốc độ lấy nét và chụp khá nhanh. Đáp ứng tốt nhu cầu nhiếp ảnh người dùng.
    5. Camera Selfie góc rộng
    Bắt kịp xu hướng Selfie đang trở thành tai zalo 2015 trào lưu thì HERO 2 sở hữu máy ảnh selfie 5MP góc rộng 84 độ, giúp thu nhiều đối tượng trong bức ảnh hơn.
    6. Đèn thông báo tiện lợi
    HERO 2 có 3 phím cảm ứng tích hợp tính năng đèn thông báo khá tiện lợi. Khi có cuộc gọi, tin nhắn... 3 phím sẽ sáng nhịp nhàng khá đẹp mắt, giúp không bỏ lỡ thông báo nào.
    7. Pin công nghệ mới
    Pin HERO 2 có dung lượng 2.100 mAh đáp ứng trung bình 2 ngày nhờ sử dụng công nghệ mới Li-Polymer. Theo thử nghiệm thực tế với tác vụ xem phim online 30 phút rồi chơi game 3D Fast & Furious liên tục, máy trụ được khoảng 6 tiếng.
    8. Kết nối HDMI + OTG
    HERO 2 trang bị kết nối OTG khá tiện lợi giúp kết nối dễ dàng với các thiết bị ngoại vi như USB, chuột, bàn phím... Điểm đáng giá tiếp theo tai zalo java chính là cổng HDMI, giúp truy xuất hình ảnh lên các TV màn hình lớn, đem lại trải nghiệm xem video hay chiến game tuyệt vời hơn.
    9. Phần mềm thông minh
    HERO 2 khởi chạy nền tảng Android 4.4 KitKat khá mới vốn thân thiện, dễ sử dụng cùng kho game, ứng dụng khổng lồ hoàn toàn miễn phí, phục vụ tối đa nhu cầu làm việc và giải trí. Ngoài ra, phần mềm máy còn tích hợp 1 số tính năng hữu ích như chạm 2 lần mở khóa màn hình, cử chỉ nhận cuộc gọi thông minh.
    10. Mức giá hợp lý
    Với rất nhiều ưu điểm kể trên nhưng máy lại sở hữu mức giá khá mềm, dưới 4 triệu đồng. Rất nổi bật trong phân khúc, và đây cũng là điểm tai facebook nhấn chính giúp máy tự tin với các đối thủ trong phân khúc.
    Nếu xét 10 lý do trên thì mức giá của HERO 2 khá tốt. Tuy nhiên, với một thương hiệu mới như Rovi thì nhiều người dùng còn cân nhắc về chất lượng và độ bền máy.
    Còn bạn thì nghĩ sao? Liệu với những ưu điểm cùng mức giá trên có đủ để các bạn rút hầu bao mua sắm sản phẩm này? Hay còn sự lựa chọn khác tốt hơn trong phân khúc giá. Hãy commet ý kiến bên dưới bài viết này.
    xem thêm:http://taifacebook8.blogspot.com/
    http://taizalo8.blogspot.com/
     
    #3
  4. tranlong9x PageRank 0 Member

    Tham gia ngày:
    20/5/15
    Hay quá, bạn thật giỏi.
     
    #4
  5. goalkinh PageRank 0 Member

    Tham gia ngày:
    31/7/15
    quá pro =))
     
    #5
  6. thienphu92 PageRank 1 Member

    Tham gia ngày:
    3/11/15
    chúc bạn gặp nhiều thành công trong cuộc sống
     
    #6
  7. acer5750 PageRank 0 Member

    Tham gia ngày:
    8/12/15
    Cái xenforo này bác tự học hay học trung tâm để có thể làm được thế này ạ?
     
    #7

Chia sẻ trang này