[Đóng góp] Skin Comprehensive Black And White

  Bài viết hay nhất1
Skin Comprehensive Black And White

Demo : Skincbw.forumvi.com

Kích hoạt bởi Forumotion - Version Punbb

CSS :
Code:
/* menu  */
#cai-menu {
color: #000;
background: #fff;
border-bottom: 3px solid #181818;
font-size: 15px;
z-index: 888;
width: 100%;
height: 33px;
padding-top:3px;
line-height: 30px;
text-align: center;
font-weight: bold;
top: 0px;
position: fixed!important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}



.menuhome a {
color: #000;
margin-top: -10px;
font-size: 12px;
}



#menutop {
margin: 10px;
margin-top: 0px;
float:left;
}

#menutop a:hover{
color: #000;
}


#cai-logo {
float:left;
margin-top: 3px;
}




.cai-menu {
margin: 0px auto 0px auto;
width: 1110px;
position: relative;
padding: 0;
background:  none;
height: 32px;
}

.menuhome {
float: left;
margin-left: 100px;
}

.menuhome h1 {
font-size: 1em;
font-weight: bold;
}
.loginvatt {
float: right;
margin-right: 100px;
}



.loginvatt ul {
list-style: none;
padding: 0;
margin: 0;
}

.loginvatt li {
float: left;
margin: 0;
padding: 0 3px;
}

.loginvatt a:link, .Login-Box a:visited {
color: #000;
}
.loginvatt a:hover {
color: #dddddd;
}


.logintt {
float: right!important;
}
.notreg {
border-left: 0px solid #dddddd;
padding-left: 10px;
font-weight: 700;
}

.login-x {
background:#FFF;
border: 0;
color: #333333;
padding: 0 5px;
font-size: 9pt;
width: 90px;
height: 20px;
line-height: 20px;
border: 1px solid #181818;
margin: 4px 3px 3px 3px;
border-radius: 1px;
}

.login-s {
background:#fff         ;
border: 0;
color: #000;
font-size: 10pt!important;
width: 80px!important;
height: 22px!important;
line-height: 20px;
border: 1px solid #181818;
margin: 3px!important;
border-radius: 1px;
font-weight:bold;
padding-top:1px!important;
}
  /* ketthucmenu */

/* phu kien */
a{text-decoration:none!important}
body{font-family:Roboto,arial,sans-serif;font-size:14px;overflow-x:hidden;}

.main-content {
box-shadow: 3px 5px 5px rgba(0,0,0,0.1);
}
.main .main-head {
font-weight: bold;
background: #ffffff;
font-size: 12px;
border: 1px solid #dddddd;
border-bottom: 2px solid #000;
color: #000;
padding: 10px;
}

.main .frm-info {
background: #FFFFFF;
border: 3px solid #165E99;
margin: 1.0em;
padding: 1em;
}

.main .main-foot {
font-weight: bold;
font-size: 12px;
background: #ffffff;
border-bottom: 2px solid #3189C4;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
color: #000;
padding: 10px;
}


.main .main-head-quangcaobenphai {
font-weight: bold;
font-size: 12px;
color: #000;
font-weight: bold;
background: none;
border-bottom: 2px solid #f26300;
padding: 10px;
}


.pun .main-foot .h2, .pun .main-head .h2 {
color: #454545;
font-weight: bold;
margin-top:3px;
}



.main-head .h2, .main-head .h3, .main-head h1, .main-head h2, .main-head h3 {
color: #454545;
font-size: 13px!important;
font-weight: 600!important;
}

.pun table.table th {
background-color: #F2F2F2;
color: #333;
padding: .5em 0;
}
.pun table.table td {
background-color: #FFFFFF;
border-color: #FFF;
border-style: solid none none solid;
border-width: 1px;
line-height: 130%;
padding: .6em 0 .7em;
}
.pun .main table td.tc2, .pun .main table td.tc3 {
background-color: #FFFFFF;
}

/* User action */
#pun-visit ul,.main-box ul{position:relative;width:16px;height:16px;background:url(http://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 #888 #999;border-style:solid;border-width:0 2px;margin:0}
#pun-visit li:first-child,.main-box li:first-child{border-top:2px solid #999}
#pun-visit li:last-child,.main-box li:last-child{border-bottom:2px solid #999}
.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 #999;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}

/* zzStars by baivong - devs.forumvi.com */
#pun-info *{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
#pun-info > .main-content{border-width:0 1px 1px 1px}
#pun-info .starsItem{position:relative}
#pun-info .starsTitle{height:26px;line-height:24px;background:#fff;border-width:1px 0;padding:0 10px}
#pun-info .leftStats img{width:48px;height:48px}
#pun-info .leftStats{position:absolute;left:11px;top:32px;width:60px}
#pun-info .rightStats{min-height:50px;border-left:1px solid #000;padding-left:10px;word-break:break-word;max-height:200px;overflow:auto;margin:10px 10px 10px 70px}

.pun-crumbs {
background-color: #FAFAFA;
border-color: #BDBDBD;
border-style: solid;
border-width: 1px;
margin: 0 0 1em;
padding: .6em 1em;
}
#tabs ul li.activetab a {
background-color: #000C15;
color: #FFFFFF;
}
#tabs ul li a {
background-color: #DADADA;
float: left;
font-size: 1.1em;
font-weight: 400;
line-height: 2em;
padding: 0 1em;
color: #000;
}

.caifooter {
bottom: 0;
background: rgb(0, 6, 6);
padding: 15px;
position: relative;
z-index: 2;
color: #fff;
font-weight: bold;
overflow: hidden;
}


/*ket thuc phu kien */

index_box : mặc định

overall_header :
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

   <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />   
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {

         var width_max = $('ul#fa_ticker_content').width();
         var width_item = Math.floor(width_max / {switch_ticker.SIZE});

         if (width_max > 0)
         {
            $('#fa_ticker_content').css('display','block');

            $('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            if (slid_vert)
            {
               var height_max = h_perso;

               $('ul#fa_ticker_content li').each( function () {
                  if ($(this).height() > height_max)
                  {
                     height_max = $(this).height();
                  }
               } );

               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
               $('ul#fa_ticker_content li').height(height_max);
            }

            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">
   //<![CDATA[
   jQuery().ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         if(pm != null) { pm.focus(); }
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         $(window).load(function() {            
            Ticker.start({
               height : {switch_ticker.HEIGHT},
               spacing : {switch_ticker.SPACING},
               speed : {switch_ticker.SPEED},
               direction : '{switch_ticker.DIRECTION}',
               pause : {switch_ticker.STOP_TIME}
            });
         });
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = false, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(["_setAccount", "{G_ANALYTICS_ID}"]);
    _gaq.push(["_trackPageview"]);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
      ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
      var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
</head>

<body>
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup" class="module main" style="z-index: 10000 !important;">
      <div id="login_popup_title" class="main-head">
         <div class="h3">{SITENAME}</div>
      </div>
      <div class="main-content">
         {LOGIN_POPUP_MSG}
         <div id="login_popup_buttons">
            <form action="{S_LOGIN_ACTION}" method="get">
               <input type="submit" class="button2" value="{L_LOGIN}" />
               <input type="button" class="button2" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
               <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
            </form>
         </div>
      </div>
   </div>
   <!-- END switch_login_popup -->

   <a id="top" name="top" accesskey="t"></a>

<div id="cai-menu">
  <div class="menuhome">
   
    <span><a href="/" id="cai-logo"><img src="http://phongcongchung4tphcm.vn/content/icons/icon_breadcrumb_home.png" alt="Home"  width="25" height="25"></img></a></span>     
   
  <span>
   
    <form style="float:left;" action="/search?mode=results" method="get" name="search" class="searchtimkiem"><input id="nhaptimkiem" type="text" name="search_keywords" style="border: 1px solid #000;margin-top: 3px;margin-left: 5px;font: 15px Tahoma, Calibri, Verdana, Geneva, sans-serif;background:#fff url(http://i35.servimg.com/u/f35/17/75/86/58/search10.png) no-repeat right;width:250px;color:gray;padding-right:25px !important;padding: 3px;position:relative;padding-left: 10px;" id="query" name="submit" placeholder="Nhập từ khoá tìm kiếm..." value="" lang="en"></input></form>
   
    </span>     
   
    </div>
           
   
             
             
  <div class="loginvatt">
 
           
      <div class="logintt">
                 


             
      <ul>
                          <form action="/login" method="post" name="form_login">
               

       
<!-- BEGIN switch_user_logged_out -->

        <li><a href="register" rel="nofollow" class="notreg">Đăng Ký</a></li>
     

        <li class="inputPad"><div class="loginBoxInput">
        <input type="text" class="login-x" id="loginUsername"  name="username" alt="Tài Khoản" value="Tài Khoản" onblur="if (this.value == '') {this.value = 'Tài Khoản';}" onfocus="if (this.value == 'Tài Khoản') {this.value = '';}" />
                          </div></li>
        <li class="inputPad"><div class="loginBoxInput">

        <input type="password" class="login-x" size="10" name="password" alt="Mật khẩu" value="Mật khẩu" onblur="if (this.value == '') {this.value = 'Mật khẩu';}" onfocus="if (this.value == 'Mật khẩu') {this.value = '';}"/>
                          </div></li>
        <li class="rememberMe"><label for="cb_cookieuser_navbar"><input type="checkbox" class="radio" name="autologin" checked="checked" /> Lưu?</label></li>
                            <li class="searchButton"><input type="submit" class="login-s" name="login" value="Đăng nhập" /></li>

                    <!-- END switch_user_logged_out -->
         
                          <!-- BEGIN switch_user_logged_in -->
                            <li><a href="/profile?mode=editprofile" rel="nofollow" class="notreg" style="padding-left:10px;">Lý Lịch</a></li>
      <li><a href="{U_PRIVATEMSGS}" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()" rel="nofollow" class="notreg">{PRIVATE_MESSAGE_INFO}</a></li>
        <li><a href="/profile?mode=editprofile&page_profil=avatars" rel="nofollow" class="notreg">Thay Avatar</a></li>
                  <li><a href="/login?logout" rel="nofollow" class="notreg">Thoát</a></li>
                      <!-- END switch_user_logged_in -->
                           
                                        </form>
 
  </ul>


     

      </div>
         
         
 
  </div>       
  </div>

   
   
 



   <div class="minwidth_IE">
      <div class="layout_IE">
         <div class="container_IE">
            <div class="pun">
               

               <!-- BEGIN switch_ticker_new -->
               <div id="fa_ticker_block" style="padding-top:4px;">
                  <div class="module main">
                     <div class="main-content clearfix">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display: none;width: 100%;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </div>
                  </div>
               </div>
               <!-- END switch_ticker_new -->

               <!-- BEGIN switch_ticker -->
               <div id="fa_ticker_block" style="padding-top:4px;">
                  <div class="module main">
                     <div class="main-content clearfix">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <!-- END switch_ticker -->

               <div id="page-body">
                  <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                     <div id="outer-wrapper">
                        <div id="wrapper">
                           <div id="container">
                              <div id="content">
                                 
                                 <div id="main">
                                    <div id="main-content">

<!-- BEGIN html_validation -->
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</body>
</html>
<!-- END html_validation --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

   <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />   
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {

         var width_max = $('ul#fa_ticker_content').width();
         var width_item = Math.floor(width_max / {switch_ticker.SIZE});

         if (width_max > 0)
         {
            $('#fa_ticker_content').css('display','block');

            $('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            if (slid_vert)
            {
               var height_max = h_perso;

               $('ul#fa_ticker_content li').each( function () {
                  if ($(this).height() > height_max)
                  {
                     height_max = $(this).height();
                  }
               } );

               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
               $('ul#fa_ticker_content li').height(height_max);
            }

            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">
   //<![CDATA[
   jQuery().ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         if(pm != null) { pm.focus(); }
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         $(window).load(function() {            
            Ticker.start({
               height : {switch_ticker.HEIGHT},
               spacing : {switch_ticker.SPACING},
               speed : {switch_ticker.SPEED},
               direction : '{switch_ticker.DIRECTION}',
               pause : {switch_ticker.STOP_TIME}
            });
         });
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = false, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(["_setAccount", "{G_ANALYTICS_ID}"]);
    _gaq.push(["_trackPageview"]);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (function() {
      var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
      ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
      var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
</head>

<body>
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup" class="module main" style="z-index: 10000 !important;">
      <div id="login_popup_title" class="main-head">
         <div class="h3">{SITENAME}</div>
      </div>
      <div class="main-content">
         {LOGIN_POPUP_MSG}
         <div id="login_popup_buttons">
            <form action="{S_LOGIN_ACTION}" method="get">
               <input type="submit" class="button2" value="{L_LOGIN}" />
               <input type="button" class="button2" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
               <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
            </form>
         </div>
      </div>
   </div>
   <!-- END switch_login_popup -->

   <a id="top" name="top" accesskey="t"></a>

<div id="cai-menu">
  <div class="menuhome">
   
    <span><a href="/" id="cai-logo"><img src="http://phongcongchung4tphcm.vn/content/icons/icon_breadcrumb_home.png" alt="Home"  width="25" height="25"></img></a></span>     
   
  <span>
   
    <form style="float:left;" action="/search?mode=results" method="get" name="search" class="searchtimkiem"><input id="nhaptimkiem" type="text" name="search_keywords" style="border: 1px solid #000;margin-top: 3px;margin-left: 5px;font: 15px Tahoma, Calibri, Verdana, Geneva, sans-serif;background:#fff url(http://i35.servimg.com/u/f35/17/75/86/58/search10.png) no-repeat right;width:250px;color:gray;padding-right:25px !important;padding: 3px;position:relative;padding-left: 10px;" id="query" name="submit" placeholder="Nhập từ khoá tìm kiếm..." value="" lang="en"></input></form>
   
    </span>     
   
    </div>
           
   
             
             
  <div class="loginvatt">
 
           
      <div class="logintt">
                 


             
      <ul>
                          <form action="/login" method="post" name="form_login">
               

       
<!-- BEGIN switch_user_logged_out -->

        <li><a href="register" rel="nofollow" class="notreg">Đăng Ký</a></li>
     

        <li class="inputPad"><div class="loginBoxInput">
        <input type="text" class="login-x" id="loginUsername"  name="username" alt="Tài Khoản" value="Tài Khoản" onblur="if (this.value == '') {this.value = 'Tài Khoản';}" onfocus="if (this.value == 'Tài Khoản') {this.value = '';}" />
                          </div></li>
        <li class="inputPad"><div class="loginBoxInput">

        <input type="password" class="login-x" size="10" name="password" alt="Mật khẩu" value="Mật khẩu" onblur="if (this.value == '') {this.value = 'Mật khẩu';}" onfocus="if (this.value == 'Mật khẩu') {this.value = '';}"/>
                          </div></li>
        <li class="rememberMe"><label for="cb_cookieuser_navbar"><input type="checkbox" class="radio" name="autologin" checked="checked" /> Lưu?</label></li>
                            <li class="searchButton"><input type="submit" class="login-s" name="login" value="Đăng nhập" /></li>

                    <!-- END switch_user_logged_out -->
         
                          <!-- BEGIN switch_user_logged_in -->
                            <li><a href="/profile?mode=editprofile" rel="nofollow" class="notreg" style="padding-left:10px;">Lý Lịch</a></li>
      <li><a href="{U_PRIVATEMSGS}" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()" rel="nofollow" class="notreg">{PRIVATE_MESSAGE_INFO}</a></li>
        <li><a href="/profile?mode=editprofile&page_profil=avatars" rel="nofollow" class="notreg">Thay Avatar</a></li>
                  <li><a href="/login?logout" rel="nofollow" class="notreg">Thoát</a></li>
                      <!-- END switch_user_logged_in -->
                           
                                        </form>
 
  </ul>


     

      </div>
         
         
 
  </div>       
  </div>

   
   
 



   <div class="minwidth_IE">
      <div class="layout_IE">
         <div class="container_IE">
            <div class="pun">
               

               <!-- BEGIN switch_ticker_new -->
               <div id="fa_ticker_block" style="padding-top:4px;">
                  <div class="module main">
                     <div class="main-content clearfix">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display: none;width: 100%;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </div>
                  </div>
               </div>
               <!-- END switch_ticker_new -->

               <!-- BEGIN switch_ticker -->
               <div id="fa_ticker_block" style="padding-top:4px;">
                  <div class="module main">
                     <div class="main-content clearfix">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <!-- END switch_ticker -->

               <div id="page-body">
                  <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                     <div id="outer-wrapper">
                        <div id="wrapper">
                           <div id="container">
                              <div id="content">
                                 
                                 <div id="main">
                                    <div id="main-content">

<!-- BEGIN html_validation -->
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</body>
</html>
<!-- END html_validation -->

index_body :
Code:
{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}

<!-- zzStars by baivong - devs.forumvi.com -->
<!-- BEGIN disable_viewonline -->
<div id="pun-info" class="main">
  <div class="main-head">
      <div class="page-title">
        <h2>Tình hình diễn đàn</h2>
      </div>
  </div>
  <div class="main-content">
      <div class="starsItem">
        <h3 class="starsTitle">
            <!-- BEGIN switch_viewonline_link -->
          <a href="{U_VIEWONLINE}" rel="nofollow">Tình Hình Truy Cập</a>
            <!-- END switch_viewonline_link -->
            <!-- BEGIN switch_viewonline_nolink -->Tình Hình Truy Cập
            <!-- END switch_viewonline_nolink -->
        </h3>
        <div class="leftStats">
            <img src="http://i48.servimg.com/u/f48/16/58/89/73/user_s10.png" />
        </div>
        <div class="rightStats">
            <p>{TOTAL_USERS_ONLINE}
              <br />{LOGGED_IN_USER_LIST} {L_ONLINE_USERS} {L_CONNECTED_MEMBERS}</p>
        </div>
      </div>
      <div class="starsItem">
     
         
     
      <div class="starsItem">
        <h3 class="starsTitle">Thống kê diễn đàn</h3>
        <div class="leftStats">
            <img src="http://i48.servimg.com/u/f48/16/58/89/73/icon_s10.gif" />
        </div>
        <div class="rightStats">
            <p>{RECORD_USERS}
              <br />{TOTAL_POSTS}
              <br />{TOTAL_USERS}</p>
          <p>{NEWEST_USER}</p>
        </div>
      </div>
      <!-- BEGIN switch_chatbox_activate -->
      <div class="starsItem">
        <!-- BEGIN switch_chatbox_popup -->
        <h3 id="chatbox_popup" class="starsTitle"></h3>
        <script type="text/javascript">
            insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', 'Chatbox');
        </script>
        <!-- END switch_chatbox_popup -->
        <div class="leftStats">
            <img src="http://i48.servimg.com/u/f48/16/58/89/73/it_and10.png" />
        </div>
        <div class="rightStats">
            <p>{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}</p>
        </div>
      </div>
      <!-- END switch_chatbox_activate -->
  </div>
</div>
<div class="main-box clearfix">
  <p class="center">{GROUP_LEGEND}</p>
</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 -->
  Bài viết hay nhất2
overall_footer_end :
Code:
<!-- BEGIN html_validation -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
   <div>
      <div>
         <div>
            <div>
               <div>
                  <ul>
                     <li>
<!-- END html_validation -->
                     </li>
                  </ul>
                  <!-- BEGIN switch_footer_links -->
                  <ul>
                     <li>
                        <!-- BEGIN footer_link -->
                           <!-- BEGIN switch_separator -->&nbsp;|&nbsp;<!-- END switch_separator -->
                           {switch_footer_links.footer_link.FOOTER_LINK_SEPARATOR}<a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}</a>
                        <!-- END footer_link -->
                     </li>
                  </ul>
                  <!-- END switch_footer_links -->
               </div>
               <br />
               <p class="center">
                  <strong>{ADMIN_LINK}</strong>
               </p>
            </div>
            {PROTECT_FOOTER}
         </div>
      </div>
   </div>
</div>

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

<!-- BEGIN switch_facebook_logout_TMP -->
<script type="text/javascript">
//<![CDATA[
FB.Event.subscribe('auth.logout', function(response) {
   if ($('a#logout'))
   {
      var lien_redir = $('a#logout').attr('href');

      if ($('a#logout').attr('href') && $('a#logout').attr('href') != '')
      {
         document.location.href = 'http://{switch_facebook_logout.SERVER_NAME}/' + lien_redir;
      }
   }
});

$(document).ready( function() {
   $('a#logout').click( function() {
      FB.logout();
   } );
} );
//]]>
</script>
<!-- END switch_facebook_logout_TMP -->

<script type="text/javascript">
//<![CDATA[
   fa_endpage();
//]]>
</script>
</body>
</html>
<div class="caifooter">Skin <font color="palegreen">Comprehensive Black And White</font><br>Kích hoạt bởi <font color="#76c6ec">Forumotion - Version Punbb</font><br>Chúng tôi không chịu trách nhiệm về bất cứ vấn đề nào liên quan đến bài viết<br>Không RIP skin hoặc BÁN skin dưới mọi hình thức</div>
  
  
  Bài viết hay nhất3
Skin rối mắt quá
  Bài viết hay nhất4
Skin đơn giản nhưng hơi nhạt (y)
  Bài viết hay nhất5
You cannot reply to topics in this forum