Skin Black © Màu Đen 2014

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;}

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>