demon onl : [You must be registered and logged in to see this link.]



Css :

Code:

/* Tổng Thể */
a {text-decoration:none!important}
.pun {padding:0!important}
.somethinglikethat {background:#d2d1d0}
#pun-foot {background:#333 url(http://bglabs.evade.netdna-cdn.com/wp-content/themes/shots/assets/images/dark/bg.png)}
input[type="text"]:hover, input[type="password"]:hover, textarea:hover, input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
    border-color: #333;
}
input[type="text"], input[type="password"], textarea {
    border-width: 1px 1px 1px 5px;
    border-style: solid;
    border-color: #000;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    padding: 2px 5px;
    outline: medium none;
}

button, input[type="reset"], input[type="button"], input[type="submit"] {
    background-color: #000 !important;
    color: #FFF;
    border-color: #000 !important;
}

/* Nav */
#pun-head #pun-navlinks {background:#333!important}
#pun-head table {border-spacing:0px!important}
#pun-head {border-bottom: 4px solid #CCC;background: #333;height: 45px!important;width:auto;z-index:999}
#pun-navlinks li a {cursor:pointer;margin: 0px 1px!important;font-family: sans-serif;font-weight: bold;color: #fff;padding: 16px 10px;line-height: 35px;background: #222;}
.center-overview {
    padding: 0.5em;
    text-align: center;
    background: none repeat scroll 0% 0% #000;
    color: #fff;
}
.title-overview {
    background-color: #010305;
    padding: 5px 5px 0px 0px;
color: #fff;
}
body {font-family: sans-serif;0px!important;overflow-x:hidden!important;height:100%;background:url(http://bglabs.evade.netdna-cdn.com/wp-content/themes/shots/assets/images/dark/bg.png)}
  
/*viền forum */
    .pun {width: 955px;background: #fff ;}

/* Main */
.main .main-head .page-title {position: absolute;background: #000;font-weight: bold;font-size: 15px;padding: 7px 25px;font-family: inherit;color: #fff;margin-left: 20px;}
.main .main-head {padding: 0;height: 35px;background: #333;}
.pun .main-foot .h2, .pun .main-head .h2 {padding: 0px 10px;line-height: 35px;background: #222;margin-left: 30px;position: absolute;float: left;font-weight: bold;color: #fff;}
.main .main-foot, .main .main-head {background-color: #333!important;color: #dedfdf;font-weight: 400;}
.main-foot .h2 {margin-top: -8px;line-height: 38px!important;}

/* Copyright */
.copyrightnothe {box-shadow: 0px -5px 10px #000;padding: 10px;font-weight: bold;color: gray;}
.copyrightimg {margin-top: -105px;float: right;right: 10px;position: absolute;}
.copyrightimg img {max-height: 200px;}



/* View */
.avauser:hover + .somethinginfo, .somethinginfo:hover {visibility:visible;-webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);-o-transform: rotateY(0deg);margin-left: 55px;opacity: 1;width: 500px;height: 110px;margin-top: -25px;z-index: 1;}
.somethinginfo {-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-o-transform: rotateY(180deg);position: absolute;background: #fff;border: 5px solid #333;width: 70px;padding: 10px 10px 10px 90px;margin-left: 9px;margin-top: -5px;height: 70px;opacity: 0;visibility:hidden;transition:all 0.5s ease;overflow:hidden}
.avauser {width: 100px;height: 100px;margin-top: -5px;margin-left: 10px;position: absolute;z-index: 9;}
.avauser img {padding: 5px;background: #fff;height: 80px;width: 80px;border: 5px solid #555;transition:all 0.5s ease}
.avauser:hover .nameuser {background:transparent;margin-left:60px;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg)}
.pun .postmain {border-left:0px solid!important;margin-left:0px!important}
.pun .posthead h2 strong:before {content: 'Bài số ';}
.postfoot {margin-left:0!important}
#online_stt {top:0;position: absolute;right: 0;width: 40px;height: 40px;background: url(http://i78.servimg.com/u/f78/18/35/47/86/offlin10.png);background-size:40px 40px!important;z-index: 1;}
#online_stt img {width:40px;height:40px}
.userview {height: 90px;background:#d7d7d7}
.nameuser {transition:all 0.5s ease;background: rgba(0,0,0,.8);text-align: center;line-height: 20px;margin-top: -60px;position: absolute;width: 100px;}
.nameuser * {color:#fff!important}
.backgroundsomething {background: #ffb2b2;width: 70px;height: 130px;position: absolute;left: 0;top: 0;border-right: 3px solid #ff8888;}
.anotherinfo {width: calc(50% - 11px);float: left;padding: 0px 5px;border-left: 1px solid #d7d7d7;}
.doinothe *, .anotherinfo.statusne {display: none;}
.doinothe .statusne, .doinothe .statusne * {display: inline-block!important;}
.doinothe {position: absolute;background: rgba(255,255,255,.8);padding: 5px 10px;width: 500px;margin-left: 110px;margin-top: 65px;overflow:hidden;white-space:nowrap}


/* Latest topics */
#left, #left *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#content-container div#container{float:none}
#content-container div#main{margin-bottom:0}
*+ html #content-container div#main{margin-left:0;margin-right:0}
#content-container div#left{float:none;width:100%}
#left{margin:30px 0}
#left td{border-width:0 1px;width:25%;vertical-align:top}
#left .double{border-left:0;width:50%;}
#left li{position:relative;width:100%;list-style-type:decimal}
#left a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:absolute;display:block;width:60%;left:0;top:0}
#active_topics a,#viewed_topics a{width:70%}
#left #recent_topics a{width:80%}
#left .lastRight{right:0;text-align:right;position:absolute;top:0;left:auto;width:100px!important}
#left ul,#left th{padding: 10px 10px 10px 30px;margin:0}
#left ul{min-height:100px;height: 180px;overflow: auto;}
#left .changeLast{color:#999;border:0 none!important;background:inherit;margin-top:0!important;margin-bottom:-1px;padding:0!important}
#left th{width:25%;vertical-align:middle}
th.topicLast{border-top:1px solid #F3F3F3!important}
th.double{text-align:left}
#recent_topics li{margin:.5px 0}
#active_starters,#users_month{display:none}
/* Tooltip */
#tooltip{background-color:#FFF;border:2px solid #333;color:#131313;max-width:550px;padding:10px}
#tooltip .statusAva{margin:0}
#left li{position:relative;width:100%;list-style-type:none;height:22px;line-height:24px;border-bottom:1px dashed #CCC;counter-increment:Zzindex}
#left li:before{content:counter(Zzindex);display:block;height:16px;background:#98D0FF;position:absolute;left:-23px;font-size:11px;top:5px;border-radius:2px;text-align:center;width:18px;color:#FFF;line-height:16px}
#left li:after{content:" ";background:#98D0FF;display:block;width:6px;height:6px;position:absolute;top:10px;left:-8px;transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg)}
#left li:nth-child(1):before,#left li:nth-child(1):after{background:red}
#left li:nth-child(2):before,#left li:nth-child(2):after{background:#d47a2a}
#left li:nth-child(3):before,#left li:nth-child(3):after{background:#b9ba45}
#left li:nth-child(4):before,#left li:nth-child(4):after{background:#aad655}
#left li:nth-child(5):before,#left li:nth-child(5):after{background:#55e7aa}


/* Crumbs */
.crumbs a { line-height: 30px; background: #000; padding: 10px; color:#fff!important;}

/* User control */
#pun-visit ul,.main-box ul{position:relative;width:16px;height:16px;background:url(//i56.servimg.com/u/f56/18/59/49/93/align_10.png) no-repeat center transparent;z-index:20}
#pun-visit ul:hover{margin-top:-.7em;margin-right:-1.1em}
.main-box ul:hover{margin-top:-.65em;margin-left:-1.05em}
#pun-visit li,.main-box li{display:none;width:230px;background:#FFF;border-color:transparent #666 #666;border-style:solid;border-width:0 2px;margin:0}
#pun-visit li:first-child,.main-box li:first-child{border-top:2px solid #666}
#pun-visit li:last-child,.main-box li:last-child{border-bottom:2px solid #666}
.main-box li{margin-left:0;float:left;text-align:left;width:170px}
#pun-visit ul:hover li,.main-box ul:hover li{display:block}
#pun-visit li:hover,.main-box li:hover{background:#F2F2F2}
#plus_menu{left:auto!important;right:60px!important;top:-8px;border:2px solid #666;width:260px!important;background:#FFF}
#plus_menu .title-overview{display:none}
#plus_menu .left-overview{padding:0}
#pun-visit ul a,.main-box ul a{display:block;height:30px;line-height:30px;padding:0 10px}
#pun-visit ul a:hover,.main-box ul a:hover{background:#f2f2f2}
.dashed{border-top:1px dashed silver;margin:5px 0}
#pun-visit br{display:none}

/* Trang tri ly lich */

#tabs ul li.activetab a {
    background-color: #000;
    border-color: #000102;
    color: #F4F9FD;
    text-decoration: underline;
}
#tabs ul li a {
    background-color: rgba(0, 0, 0, 1);
    border: 1px solid rgba(24, 8, 8, 1);
    float: left;
    font-size: 1.1em;
    font-weight: 400;
    line-height: 2em;
    padding: 0px 1em;
    text-decoration: none;
color : #fff;
}

/*---chatbox---*/
#chatbox_main_options{margin-top:6px}.chatbox-options li,.chatbox-options li a,.chatbox-options li label{color:#999}#chatbox_footer{padding:3px 0}
#message,#submit_button{border:1px solid #000;border-width:1px;height:24px!important;line-height:22px!important;padding:2px 5px!important}#message{background:#FFF url(http://i57.servimg.com/u/f57/17/73/81/22/sd2310.png) left center no-repeat;width:510px}#message:hover{background:#FFF}#divstrike{display:none}#chatbox_messenger_form{margin-top:2px}.chatbox-title{font-weight:300;padding:7px 5px 0!important}
#chatbox_header.main-head{margin:-1px 0 0}
#chatbox_header.main-head {border-bottom: 10px solid #ccc;padding: 0 1.3em;}
#chatbox,#chatbox_footer,#chatbox_header.main-head,#chatbox_members{background:url(http://i55.servimg.com/u/f55/18/64/88/24/main_b10.png)}
.chatbox-title,.chatbox-title a.chat-title{color:#000}#show_color{display:block!important;height:20px;width:20px}#chatbox_footer #submit_button{background:#000!important;color:#FFF;height:30px!important;padding:4px 8px!important}#chatbox_messenger_form .right:last-child{-webkit-transition:all .3s;bottom:1px;opacity:0;padding:6px;position:absolute;right:700px;transition:all .3s;width:180px}#divcolor img{display:none}#chatbox_messenger_form .right:first-child{color:transparent}#chatbox_messenger_form .right:first-child:hover + .right,#chatbox_messenger_form .right:last-child:hover{opacity:1;right:570px}
#chatbox_members {
border-right: 1px solid #ccc;
bottom: 39px;
overflow: auto;
position: absolute;
top: 30px;
width: 180px;
}
#chatbox_footer {
border-top: 1px solid #ccc;
bottom: 0;
left: 0;
position: absolute;
right: 0;
}
#chatbox {
bottom: 39px;
left: 181px;
line-height: 10px;
overflow: auto;
position: absolute;
right: 0;
top: 30px;
}
.chatbox_row_1, .chatbox_row_2 {
background: url(http://i55.servimg.com/u/f55/18/64/88/24/main_b10.png);
color: #adadad;
}
#chatbox_members .member-title {
background-color: #000;
background-image: none;
color: #FFFFFF;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
padding: .5em .25em;
text-align: center;
}
#chatbox_members ul li {
font-weight: 700;
}
/*---chatbox---*/
/*xoa @ chatbox----------*/  
#chatbox_members ul li a span:before{display: none!important;}
#chatbox_members ul li a span:after{display: none!important;}
#chatbox .user span, .online-users li a span, .online-users li span, .away-users li a span, .away-users li span {display: none;}
#chatbox .user a *, .online-users li a span:last-child, .away-users li a span:last-child {display: inline-block !important;}
  

index_body :

Code:

<div id="{ID_LEFT}" class="main">
   <div class="main-head">
      <div class="page-title">
         <h2>Thống kê bài viết</h2>
      </div>
   </div>
   <div class="main-content">
      <table cellspacing="0" class="table">
         <tbody class="statused">            
            <tr>              
               <!-- BEGIN giefmod_index1 -->
               {giefmod_index1.MODVAR}                                
               <!-- END giefmod_index1 -->
            </tr>
         </tbody>
      </table>
   </div>  
   <script type="text/javascript">
      //<![CDATA[          
      var versionMinor = parseFloat(navigator.appVersion),
      versionMajor = parseInt(versionMinor),
      IE = document.all && !window.opera && 7 > versionMajor,
      IE7 = document.all && !window.opera && 7 <= versionMajor,
      OP = window.opera,
      FF = document.getElementById,
      NS = document.layers;
      function get_item(a, c) {        
         if (IE) return c ? window.opener.document.all[a] : document.all[a];        
         if (FF) return c ? window.opener.document.getElementById(a) : document.getElementById(a);        
         if (NS) return c ? window.opener.document.layers[a] : document.layers[a]    
      }          
      var current_tooltip;
      function show_tooltip(a, c) {        
         var b = get_item("tooltip");        
         b || (b = document.createElement("div"), b.setAttribute("id", "tooltip"), document.body.appendChild(b));        
         b.style.zIndex = 1000;        
         b.style.position = "absolute";        
         b.innerHTML = "<p>" + c + "</p>";        
         b.style.visibility = "visible";        
         a.onmousemove = move_tooltip;        
         a.onmouseout = function() {            
            b.style.visibility = "hidden"        
         };        
         a.title = ""    
      }    
      var offsetxpoint = -60,
      offsetypoint = 20,
      real_body = document.compatMode && "BackCompat" != document.compatMode ? document.documentElement : document.body,
      real_body = document.documentElement ? document.documentElement : document.body;
      function move_tooltip(a) {        
         var c = !IE ? a.pageX : event.clientX + real_body.scrollLeft,
         d = !IE ? a.pageY : event.clientY + real_body.scrollTop,
         b = IE && !window.opera ? real_body.clientWidth - event.clientX - offsetxpoint : window.innerWidth - a.clientX - offsetxpoint - 20,
         e = IE && !window.opera ? real_body.clientHeight - event.clientY - offsetypoint : window.innerHeight - a.clientY - offsetypoint - 20,
         f = 0 > offsetxpoint ? -1 * offsetxpoint : -1E3;        
         current_tooltip = get_item("tooltip");        
         current_tooltip.style.left = b < current_tooltip.offsetWidth ? IE ? real_body.scrollLeft + event.clientX - current_tooltip.offsetWidth + "px" : window.pageXOffset + a.clientX - current_tooltip.offsetWidth + "px" : c < f ? "5px" : c + offsetxpoint + "px";        
         current_tooltip.style.top = e < current_tooltip.offsetHeight ? IE ? real_body.scrollTop + event.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : window.pageYOffset + a.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : d + offsetypoint + "px"    
      }    
      $("#recent_topics li a:first-child").mouseover(function() {        
         show_tooltip(this, $(this).next().html())    
      });    
      $("#active_topics a, #viewed_topics a").mouseover(function() {        
         show_tooltip(this, $(this).prev().text().replace(/(.*)\s-\s\d+.+/, "$1"));    
      }).after(function() {        
         return '<span class="lastRight">' + $(this).attr("alt").replace(/.*\s-\s(\d+.+)/, "$1") + '</span>'    
      });     //]]>
   </script>
</div>


{JAVASCRIPT}
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
 <ul>
 <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
 <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
 <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
 <li><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
 </ul>
 <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
 <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->

<!-- BEGIN message_admin_index -->
<div class="main">
 <!-- BEGIN message_admin_titre -->
 <div class="main-head">
 <h1 class="page-title">{message_admin_index.message_admin_titre.MES_TITRE}</h1>
 </div>
 <!-- END message_admin_titre -->

 <!-- BEGIN message_admin_txt -->
 <div id="pun-announcement">
 <p>{message_admin_index.message_admin_txt.MES_TXT}</p>
 </div>
 <!-- END message_admin_txt -->
</div>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<div class="main">
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form main-box center">
 <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username" /></label> &nbsp;
 <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password" /></label> &nbsp;
 <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
 {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
 <!-- BEGIN switch_fb_connect -->
 <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
 <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
 <!-- END switch_fb_connect -->
 </div>
</form>
</div>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->
<div id="pun-info" class="main">
 <div class="main-content">
 <div id="stats" class="footcaigido">
 <div class="sunny">{TOTAL_POSTS}</div>
 <div class="sunny"><p>{TOTAL_USERS}</p></div>
 <div class="sunny"><p>{NEWEST_USER}</p></div>
              
          </div>
 
          <div id="onlinelist">
 
 <p class="right">
 <!-- BEGIN switch_viewonline_link -->
 <a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
 <!-- END switch_viewonline_link -->
 <!-- BEGIN switch_viewonline_nolink -->
 {L_WHO_IS_ONLINE}
 <!-- END switch_viewonline_nolink -->
 </p>
 <p>{TOTAL_USERS_ONLINE}<br />
 {RECORD_USERS}
 
 <br />
 {LOGGED_IN_USER_LIST}

 {L_ONLINE_USERS}
 {L_CONNECTED_MEMBERS}<br />
 {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}</p>
 <div class="clear"></div>

 <p>{LEGEND}&nbsp;:&nbsp;{GROUP_LEGEND}</p>

 </div>
 <!-- BEGIN switch_chatbox_activate -->
 <div id="onlinechat">
 <p class="page-bottom">
 {TOTAL_CHATTERS_ONLINE}&nbsp;:&nbsp;
 {CHATTERS_LIST}<br />
 <!-- BEGIN switch_chatbox_popup -->
 <div id="chatbox_popup"></div>
 <script type="text/javascript">
 insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
 </script>
 <!-- END switch_chatbox_popup -->
 </p>
 </div>
 <!-- END switch_chatbox_activate -->
 </div>
</div>
<!-- END disable_viewonline -->

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form main-box center">
 <label><span class="genmed">{L_USERNAME} :</span> <input class="post" type="text" size="10" name="username"/></label> &nbsp;
 <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password"/></label> &nbsp;
 <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
 {S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
 <!-- BEGIN switch_fb_connect -->
 <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
 <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
 <!-- END switch_fb_connect -->
 </div>
</form>
<!-- END switch_user_login_form_footer -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_legend -->
<ul id="pun-legend">
 <li>
 <img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />&nbsp;{L_NEW_POSTS}
 <img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />&nbsp;{L_NO_NEW_POSTS}
 <img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />&nbsp;{L_FORUM_LOCKED}
 </li>
</ul>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
 appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
 status: true,
 cookie: true,
 xfbml: true,
 oauth: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

<style>.sunny {display: inline-block;margin-left: 5px;font-weight: bold;padding: 5px 10px;background: #000;color: #fff;
border: 4px solid #000; }
  .sunny div {float: left;font-weight: bold;}
#stats div.sunny:nth-child(5) {float: right;margin-right: 50px;}
#stats {background-color: #fff;line-height: 150%;padding: 0;}
</style>

index_box :

Code:

http://tny.cz/501dcf83

overall_footer_end :

Code:

http://tny.cz/f7c31310

overall_header :

Code:

http://tny.cz/7cf9d687

xong ^^

bạn nên đỗi thanh Nav và Ccat thành màu khác nỗi hơn so với nền thì sẽ đẹp hơn đấy . nhìn vậy skin kì lắm bạn

1 like cho ai sài thì sài nhé