VNXF stats đẹp cho các bạn

1,243 1 3
H

HungTQ

Sergeant
Tham gia
01/03/2016
Bài viết
428
Được Like
308
Demo: http://204.44.69.58/~tuyenqua/ (đang tạm die)
Dành cho bạn nào thích phong cách vnxf nhé . hôm nay mình mới thử cài và cũng khá ấn tượng với statitics này vì nó tương đối nhẹ giảm tải máy chủ cho những host yếu .Addons cũng khá đơn giản hi vọng những bản update sau sẽ tốt hơn . Addons này khá hợp với những forum rao vặt nhé

đầu tiên là template VNXF_Stats_Items

PHP: 
<xen:if is="{$vnxf_stats.0.bai}">
<xen:require css="VNXF_Stats.css" />
<div class="sectionMain" id="VNXF_Stats">
    <div class="blockbody">
        <xen:if is="{$vnxf_stats_node} >= 1">
       
            <div class="VNXF_Stats" style="width:{xen:raw $vnxf_stats_width}%; float:left;">
              <div class="bao">
                <div class="blocksubhead" align="left">
                    <font color="DarkBlue"><b>{xen:raw $vnxf_stats.0.ten}</b></font>
                </div>
               
                <xen:if is="{$vnxf_stats.0.bai}">
                    <xen:foreach loop="$vnxf_stats.0.bai" value="$news">
                        <div class="list2<xen:if is="{$news.sticky} == 1"> red</xen:if><xen:if is="!{$news.isNew}"> bold</xen:if>">
                           <xen:if is="{$thread.sticky}"><span class="sticky" title="{xen:phrase sticky}"><font color="red"><i></span></xen:if>

                            <h4><a class="PreviewTooltip" data-previewurl="{xen:link threads/preview,$news}" title="{$news.foruma.forum_read_date}Posted by: {xen:raw $news.username} | Last post by: {xen:raw $news.last_post_username} | Replies: {xen:number $news.reply_count} | Views: {xen:number $news.view_count} | Attachment: {xen:number $news.atts}" href="{xen:link threads,$news}">{xen:helper threadPrefix, $news.pre}{xen:helper snippet, $news.title, $news.len}</a></h4>
                        </i></font></div>
                    </xen:foreach>
                </xen:if>
            </div></div>
        </xen:if>
        <xen:if is="{$vnxf_stats_node} >= 2">
            <div class="VNXF_Stats" style="width:{xen:raw $vnxf_stats_width}%; float:left;">
               <div class="bao">
              <div class="blocksubhead" align="left">
                    <font color="DarkBlue" ><b>{xen:raw $vnxf_stats.1.ten}</b></font>
                </div>
                <xen:if is="{$vnxf_stats.1.bai}">
                    <xen:foreach loop="$vnxf_stats.1.bai" value="$news">
                        <div class="list2<xen:if is="{$news.sticky} == 1"> red</xen:if><xen:if is="!{$news.isNew}"> bold</xen:if>">
                           
                            <h4><a class="PreviewTooltip" data-previewurl="{xen:link threads/preview,$news}" title="Posted by: {xen:raw $news.username} | Last post by: {xen:raw $news.last_post_username} | Replies: {xen:number $news.reply_count} | Views: {xen:number $news.view_count} | Attachment: {xen:number $news.atts}" href="{xen:link threads,$news}">{xen:helper threadPrefix, $news.pre}{xen:helper snippet, $news.title, $news.len}</a>
                        </h4></div>
                    </xen:foreach>
                </xen:if>
            </div></div>
        </xen:if>
        <xen:if is="{$vnxf_stats_node} >= 3">
            <div class="VNXF_Stats" style="width:{xen:raw $vnxf_stats_width}%; float:left;">
               <div class="bao">

              <div class="blocksubhead" align="left">
                    <font color="DarkBlue"><b>{xen:raw $vnxf_stats.2.ten}</b></font>
                </div>
                <xen:if is="{$vnxf_stats.2.bai}">
                    <xen:foreach loop="$vnxf_stats.2.bai" value="$news">
                        <div class="list2<xen:if is="{$news.sticky} == 1"> red</xen:if><xen:if is="!{$news.isNew}"> bold</xen:if>">
                           
                           <h4> <a class="PreviewTooltip" data-previewurl="{xen:link threads/preview,$news}" title="Posted by: {xen:raw $news.username} | Last post by: {xen:raw $news.last_post_username} | Replies: {xen:number $news.reply_count} | Views: {xen:number $news.view_count} | Attachment: {xen:number $news.atts}" href="{xen:link threads,$news}">{xen:helper threadPrefix, $news.pre}{xen:helper snippet, $news.title, $news.len}</a>
                        </h4></div>
                    </xen:foreach>
                </xen:if>
            </div></div>
        </xen:if>
        <xen:if is="{$vnxf_stats_node} >= 4">
            <div class="VNXF_Stats" style="width:{xen:raw $vnxf_stats_width}%; float:left; ">
                <div class="bao">
                <div class="blocksubhead" align="left">
                    <font color="DarkBlue" style="margin-left: 7px;"><b>{xen:raw $vnxf_stats.3.ten}</b></font>
                </div>
                <xen:if is="{$vnxf_stats.3.bai}">
                    <xen:foreach loop="$vnxf_stats.3.bai" value="$news">
                        <div class="list2<xen:if is="{$news.sticky} == 1"> red</xen:if><xen:if is="!{$news.isNew}"> bold</xen:if>">
                           
                            <h4><a class="PreviewTooltip" data-previewurl="{xen:link threads/preview,$news}" title="Posted by: {xen:raw $news.username} | Last post by: {xen:raw $news.last_post_username} | Replies: {xen:number $news.reply_count} | Views: {xen:number $news.view_count} | Attachment: {xen:number $news.atts}" href="{xen:link threads,$news}">{xen:helper threadPrefix, $news.pre}{xen:helper snippet, $news.title, $news.len}</a>
                       </h4> </div>
                    </xen:foreach>
                </xen:if>
            </div></div>
        </xen:if>
        <xen:if is="{$vnxf_stats_node} >= 5">
            <div class="VNXF_Stats" style="width:{xen:raw $vnxf_stats_width}%; float:left;">
                <div class="bao">
                <div class="blocksubhead" align="left">
                    <font color="DarkBlue"><b>{xen:raw $vnxf_stats.4.ten}</b></font>
                </div>
                <xen:if is="{$vnxf_stats.4.bai}">
                    <xen:foreach loop="$vnxf_stats.4.bai" value="$news">
                        <div class="list2<xen:if is="{$news.sticky} == 1"> red</xen:if><xen:if is="!{$news.isNew}"> bold</xen:if>">
                            <div class="thumb">
                                <img alt="" src="js/VNXF/Stats/img/lastpost.gif" align="absmiddle" border="0">
                            </div>
                           <h4> <a class="PreviewTooltip" data-previewurl="{xen:link threads/preview,$news}" title="Posted by: {xen:raw $news.username} | Last post by: {xen:raw $news.last_post_username} | Replies: {xen:number $news.reply_count} | Views: {xen:number $news.view_count} | Attachment: {xen:number $news.atts}" href="{xen:link threads,$news}">{xen:helper threadPrefix, $news.pre}{xen:helper snippet, $news.title, $news.len}</a>
                       </h4> </div>
                    </xen:foreach>
                </xen:if>
            </div></div>
        </xen:if>
        <xen:if is="{$vnxf_stats_node} >= 6">
            <div class="VNXF_Stats" style="width:{xen:raw $vnxf_stats_width}%; float:left; margin-left: 9px; ">
                <div class="bao">
                <div class="blocksubhead" align="left">
                    <font color="DarkBlue"><b>{xen:raw $vnxf_stats.5.ten}</b></font>
                </div>
                <xen:if is="{$vnxf_stats.5.bai}">
                    <xen:foreach loop="$vnxf_stats.5.bai" value="$news">
                        <div class="list2<xen:if is="{$news.sticky} == 1"> red</xen:if><xen:if is="!{$news.isNew}"> bold</xen:if>">
                           
                            <h4><a class="PreviewTooltip" data-previewurl="{xen:link threads/preview,$news}" title="Posted by: {xen:raw $news.username} | Last post by: {xen:raw $news.last_post_username} | Replies: {xen:number $news.reply_count} | Views: {xen:number $news.view_count} | Attachment: {xen:number $news.atts}" href="{xen:link threads,$news}">{xen:helper threadPrefix, $news.pre}{xen:helper snippet, $news.title, $news.len}</a>
                        </h4></div>
                    </xen:foreach>
                </xen:if>
            </div></div>
        </xen:if>
        <xen:if is="{$vnxf_stats_node} >= 7">
            <div class="VNXF_Stats" style="width:{xen:raw $vnxf_stats_width}%; float:left;">
                <div class="bao">
                <div class="blocksubhead" align="left">
                    <font color="DarkBlue"><b>{xen:raw $vnxf_stats.6.ten}</b></font>
                </div>
                <xen:if is="{$vnxf_stats.6.bai}">
                    <xen:foreach loop="$vnxf_stats.6.bai" value="$news">
                        <div class="list2<xen:if is="{$news.sticky} == 1"> red</xen:if><xen:if is="!{$news.isNew}"> bold</xen:if>">
                           
                            <a class="PreviewTooltip" data-previewurl="{xen:link threads/preview,$news}" title="Posted by: {xen:raw $news.username} | Last post by: {xen:raw $news.last_post_username} | Replies: {xen:number $news.reply_count} | Views: {xen:number $news.view_count} | Attachment: {xen:number $news.atts}" href="{xen:link threads,$news}">{xen:helper threadPrefix, $news.pre}{xen:helper snippet, $news.title, $news.len}</a>
                        </div>
                    </xen:foreach>
                </xen:if>
            </div></div>
        </xen:if>
        <xen:if is="{$vnxf_stats_node} >= 8">
            <div class="VNXF_Stats" style="width:{xen:raw $vnxf_stats_width}%; float:left; margin-left: 9px;">
                <div class="bao">
                <div class="blocksubhead" align="left">
                    <font color="DarkBlue"><b>{xen:raw $vnxf_stats.7.ten}</b></font>
                </div>
                <xen:if is="{$vnxf_stats.7.bai}">
                    <xen:foreach loop="$vnxf_stats.7.bai" value="$news">
                        <div class="list2<xen:if is="{$news.sticky} == 1"> red</xen:if><xen:if is="!{$news.isNew}"> bold</xen:if>">
                           
                           <h4> <a class="PreviewTooltip" data-previewurl="{xen:link threads/preview,$news}" title="Posted by: {xen:raw $news.username} | Last post by: {xen:raw $news.last_post_username} | Replies: {xen:number $news.reply_count} | Views: {xen:number $news.view_count} | Attachment: {xen:number $news.atts}" href="{xen:link threads,$news}">{xen:helper threadPrefix, $news.pre}{xen:helper snippet, $news.title, $news.len}</a>
                       </h4> </div>
                    </xen:foreach>
                </xen:if>
            </div></div>
        </xen:if>
        <div style="clear:both"></div>
    </div>
</div>
<xen:include template="preview_tooltip" />
</xen:if>


Tiếp đến là VNXF_Stats.css


PHP: 
#VNXF_Stats {
    border: 1px solid #ccc;
    clear: both;
    padding-top: 0px;
    padding-bottom: 10px;
    width: 100%!important;
}

#VNXF_Stats .blocksubhead {    
    font-weight: normal;
font-size: 12px;
font-family: arial, tahoma;
background: rgb(234, 240, 246) url('styles/default/xenforo/gradients/category-23px-light.png') repeat-x top;

margin-top: 0px;
margin-right: -3px;
margin-left: -3px;
margin-bottom: 0px;
padding: 10px;
color:#176093 ;
border: 0px solid #ccc;
text-transform: capitalize;
   
   
}
#VNXF_Stats .blocksubhead img {
    vertical-align: middle;
    height:30px;
    margin-right: 5px;
    margin-top: 2px;
    }
#VNXF_Stats .rows a {
    text-decoration: none;
}
#VNXF_Stats .rows.bolda a {
    font-weight: 600;
}
#VNXF_Stats .rows.reda a {
    color: red;
}
#VNXF_Stats .blocksubhead a:hover {
    color: hsl(60, 100%, 50%);
}
#VNXF_Stats .blocksubhead_info {
    float: right;
    font-weight: normal;
}
#VNXF_Stats .blockbody {    
    padding: 5px;
    padding-left: 15px;
    padding-right: 0px;
}
#VNXF_Stats .smallfont {
    padding-left: 5px;
}
#VNXF_Stats .smallfont a {
    color: hsl(0, 0%, 100%);
    text-decoration: none;
}
.rows {
width: 100%;
valign: top;
font-size: 14px;
font-family: arial;
padding-bottom: 2px;
padding-top: 2px;
overflow: hidden;
}
.thumb {
float: left;
border-width: 0px;
width: 20px;
overflow: hidden;
margin-left: 10px;
}
.postdate {
color: #669999;
font-size: 12px;
font-style: italic;
}
.bao {
padding-top: 0px;
padding-bottom: 1px;
padding-left: 3px;
padding-right: 3px;
margin-top: 10px;
border-bottom:0px solid #ccc;
border-left:0px solid #ccc;
border-right:0px solid #ccc;
border: 1px solid #ccc;
}
.bao2 {
padding-top: 0px;
padding-bottom: 1px;
padding-left: 3px;
padding-right: 3px;
margin-top: 10px;
border-bottom:0px solid #ccc;
border-left:0px solid #ccc;
border-right:0px solid #ccc;

border: 1px solid #ccc;
}



.list2 {
background-color: white;
color: #696969;
padding: 6px;
width:100%-4px;
font-weight: normal;
border-bottom:0px solid #ccc;
border-left:0px solid #ccc;
border-right:0px solid #ccc;
border-top: 1px solid #d7edfc;
}

.list22 {
background-color: white;
color: #696969;
padding: 6px;
width:100%-4px;
font-weight: normal;
border-bottom:0px solid #ccc;
border-left:0px solid #ccc;
border-right:0px solid #ccc;
border-top: 1px solid #d7edfc;
}

@media (max-width:@maxResponsiveNarrowWidth)
{   
    .VNXF_Stats {
width: 100%!important;
margin-right: 0px!important;
}
#VNXF_Stats .blockbody {    
    padding: 10px;
    }
}

Done.

Hướng dẫn Responsive chỉ hiện block đầu tiên trên mobile

ở đây các bạn cần chú ý làm như sau vì addons này hiển thị theo dạng tab nên hơi dài dòng một chút nhé
Ở css mình có viết các mã 'list2' 'list22' 'bao' 'bao2' thì để ẩn các block chúng ta cần đổi thẻ div của các block vd

$vnxf_stats_node 1 mình đặt thẻ div là list2 , bao thì các bạn phải đổi các block từ 2 > 7 là 'list22' và 'bao2' tương tự chúng ta cần nhân bản các css sau với nội dung tương tự nhé

'.VNXF_Stats' nhân bản thêm thành '.VNXF_Stats2'
'#VNXF_Stats .blockbody' thêm mã thành '#VNXF_Stats .blockbody2'
'#VNXF_Stats .blocksubhead' thêm mã thành '#VNXF_Stats .blocksubhead2'

Trong html chúng ta cũng phải thay đổi giá trị các thẻ cho tương ứng block 1 riêng biệt còn từ 2 > 7 thì như nhau . sau đó thêm vào cuối VNXF_Stats.css bên trên dấu } cuối cùng dòng sau.

.VNXF_Stats2 {
display: none !important
}
#VNXF_Stats .blockbody2 {
display: none !important ;
}

#VNXF_Stats .blockbodyx2 ,
#VNXF_Stats .blocksubhead2
{ display: none !important;
}

.list22 ,
.bao2 {
display: none !important;
}

Chúc các bạn thành công. :D
 
Bài viết liên quan
Code trang trí tết cho web cơ bản bởi bloghocpiano,
Tìm hiểu về HTML cơ bản cho những ai không biết bởi anhngan21,
Các Pro có ai làm web AMP không? bởi hoangnhanpro,
Tìm hiểu các thuộc tính mới, các phần tử mới ứng dụng trong FORM của HTML5 bởi PVS,
Tìm hiểu Canvas để vẽ các đối tượng đồ họa trong HTML5 bởi PVS,
Tìm hiểu cách tạo ảnh SVG trong HTML5 bởi PVS,
Bài viết mới
Code trang trí tết cho web cơ bản bởi bloghocpiano,
Em dùng Css + JavaScript + HTML chạy trong Visual Studio Code thì được,nhưng lên 000webhost thì nó lỗi như thế này. bởi iamphong2002,
Tìm hiểu về HTML cơ bản cho những ai không biết bởi anhngan21,
Các Pro có ai làm web AMP không? bởi hoangnhanpro,
Xin giúp đỡ làm slider bởi YouTube,
Tìm hiểu các thuộc tính mới, các phần tử mới ứng dụng trong FORM của HTML5 bởi PVS,
Bạn phải đăng nhập hoặc đăng ký để bình luận.

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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mobile/Zalo: 0906081284

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

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
Mút Sofa Không Gian
Top Bottom