Tìm thấy 1 mục

[Code] Khung thống kê cho PunBB

Khung thống kê đẹp cho PunBB
Demo: Topics tagged under statics on Diễn Đàn Hỗ Trợ FM Screen24
Hướng dẫn: Tìm trong index_body đoạn code sau: 

Code:

<!-- BEGIN disable_viewonline --> 
bla bla bla bla bla bla....
<!-- END disable_viewonline -->

thay bằng đoạn code: 

Code:

<!-- BEGIN disable_viewonline -->
<script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
<div id="pun-info" class="main">

<table width="100%" cellspacing="3" cellpadding="5">                    
<tbody>
<tr>
                                          
<td align="left" valign="top" width="75%" class="table-online">
<div class="statistics-list">  
  
<dl class="center">Statistics</dl>          
<div class="table-liner"></div>
  
<p class="right">  
<!-- BEGIN switch_viewonline_link -->
<a href="{U_VIEWONLINE}" rel="nofollow"><img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" /></a>
<!-- END switch_viewonline_link -->
<!-- BEGIN switch_viewonline_nolink -->
<img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
<!-- END switch_viewonline_nolink -->
</p>
<p>{TOTAL_USERS_ONLINE}</p>
<p style="margin-top: 5px;">{LOGGED_IN_USER_LIST}</p>  
<div class="clear"></div>
  
<div class="table-liner"></div>
  
<p class="right">{GROUP_LEGEND}</p>  
<p>{RECORD_USERS}</p>
<p style="margin-top: 5px;">{L_CONNECTED_MEMBERS}</p>
<div class="clear"></div>  
  
</div>  
</td>
                                                
<td>
</td>
                                          
<td align="left" valign="top" width="25%" class="table-online">
<div class="statistics-list">  
                  
<dl><dt>Total Topics :</dt>
<dd><span class="FORUMCOUNTOPIC"></span></dd></dl>
          
<div class="table-liner"></div>          
<dl><dt>Total Posts :</dt>
<dd><span class="FORUMCOUNTPOST"></span></dd></dl>
          
<div class="table-liner"></div>          
<dl><dt>Total Members :</dt>
<dd><span class="FORUMCOUNTUSER"></span></dd></dl>
          
<div class="table-liner"></div>          
<dl><dt>Most Online :</dt>
<dd><strong><span class="FORUMONLINEUSER"></span></strong></dd></dl>
  
<div class="table-liner"></div>          
<dl><dt>Newest Member :</dt>
<dd><strong><span class="FORUMLASTUSERLINK"></span></strong></dd></dl>  
  
</div>                                      
</td>
                                          
</tr>
</tbody>
</table>
  
</div>
<!-- END disable_viewonline -->



Tiếp tục, thêm đoạn code sau vào CSS: 

Code:

.table-online {
    height: auto;
    padding: 5px;
    background: #fff;
    border: 1px solid #ddd;  
}


.table-liner {
    margin: 5px 0;  
    border-top: 1px solid #ddd;
}


.statistics-list img {
    height: 35px;
}


.statistics-list {
    line-height: 2.0;
}
  
.statistics-list dl {
    overflow: hidden;
}
  
.statistics-list dt {
    float: left;
    max-width: 100%;
    margin-right: 5px;
}
  
.statistics-list dd {
    float: right;
    text-align: right;
    max-width: 100%;
}  

#codefm


Tags: #code #statics #beautiful
vi01239984564, 8/29/2016, 20:10
Search in: Code Forumotion Chủ đề: [Code] Khung thống kê cho PunBB Trả lời: 4 Xem: 9619