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

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
 

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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mobile: 0906081284

Zalo: 0988488096

Telegram: anhanhxf

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

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom