You are not connected. Please login or register

Diễn Đàn Hỗ Trợ FM  » Advanced Search

Tìm thấy 12 mục

Sau đây là 1 số skin được chia sẽ tại HotroFM.Net



Skin Chia sẻ skin Hocwebchuan 2015
Skin IPB Subway Skin
Mobile Theme Dark Slate


Skin ver Punbb

Skin forum sa-mp.vn thời cổ vbb
- Skin PELIKAN
Skin Ngamvn
Skin Xanh đẹp đơn giản
Skin diễn đàn GameThu 2016 
Skin game style blogger
Skin TreTuKy Đơn giản
Skin 5 màu
- Skin Đỏ chói mắt
CNTT-K3 2015 (Full Mod)
Skin Gameprivate247.com Xanh Lá
Skin Phutu 2016
Skin Span.vn
Skin vngame số 2

- Skin GameLau.Forum.St 2018 Responsive
- Skin cover từ Github cho version Punbb

- Skin GameLau.Forum.St 2018 Responsive

- Chia sẻ skin màu xanh đang làm dở dang
- Skin VnRaoVat 2018 Responsive
- Skin thích hát hò ver invision


- Skin ĐHFM.V7 @PUNBB

- Skin DHFM.V8 ©️ Classic (PUNBB)

- Skin Chinh Phục V2
- Skin VXF giống xenforo cho version Invision




Skin Phpbb3

Skin IPB ipboard


Skin Invision

Skin thích hát hò ver invision
Skin Zone-FM
Skin VXF




Updates...


Tags: #skin
Search in: Skin Forumotion  Chủ đề: [Skin] Tổng hợp Skins tại hotrofm.net  Trả lời: 10  Xem: 901
Giao Diện : Gameprivate247.com Xanh Lá Phiên Bản Punbb
Tác Giả : Thànhkent
Phiên Bản : Punbb

Demo :




Link Download :
Code:
http://www.mediafire.com/file/pzbf5doozcwytb5/Skin+Gameprivate247.com.zip


pass thanhkent

Nguồn :
Code:
zone-fm.forumvi.com

Tags: #skin #zone-fm
Search in: Skin Forumotion  Chủ đề: [Skin] Gameprivate247.com Xanh Lá [Punbb]  Trả lời: 13  Xem: 997
Demo : 


Hướng dẫn cài đặt : 


Coppy mã nguồn vào các mục tương ứng với các file có ghi là tên file
Sắp xếp Modules >> Portal & Widgets >> Forum widgets management 



Coppy Generalities
Display=>Generalities=>Message content :

Link Share : Click ( pass giãi nén cntt-k3.com )


Edit từng box  ( thêm icon cho từng box khác nhau ) 


Quản Lý Tổng Thể >> Forum >>>   Categories and forums
rồi Kick vào bánh xe của từng box

Sau đó ở phần sửa chữa các bạn kéo xuống phần Mô tả : 
thêm đoạn code này cho từng box
Code:
<div class="desc">
 <img src="http://i55.servimg.com/u/f55/16/58/45/96/punbb10.png
" />
</div>





Kick hoạt chức năng Vote 


ACP >> QLTT >> Forum >> Security
Unauthorize unofficial forms to post messages and private messages on the forum : Không

ACP >> Modules >> Points and reputation >> Points system
Activate points system : Có
Display average points per message : Có

ACP >> QLTT >> Reports >> Report Post Hắc - Configuration
Report status : Members
Allows users to report their own posts. Self-Reports : Có
Allows your users to edit their own reports. Report edit by users : Có



Cài đặt GOeditor (repply)


Mình viết hướng dẫn dựa trên viewtopic punbb mặc định còn 2 phiên bản phpbb3 và Invision mình sẽ convert sau

Bước 1 : ACP --> QLTT --> Forum --> Security 
Unauthorize unofficial forms to post messages and private messages on the forum : Không

Bước 2 : ACP --> Messages and e-mails --> Cấu hình diễn đàn

Allow Quick Reply : Không

Bước 3 : ACP --> Display --> CSS :

Trong CSS tìm : GOeditor và tìm thông số width:70% thay 70% thành độ dài để phù hợp với forum bạn


Cài đặt thanh lever


Nếu thanh lever không hoạt động bạn vào 
Quản lý người dùng & Quản lý nhóm =>   Quản lý người dùng =>Profiles
cụ thể là sắp xếp theo như sau !



Nguồn : cmtt-k3.com
Tags: #skin #cntt-k3 #skin-cntt-k3
Search in: Skin Forumotion  Chủ đề: [Skin] CNTT-K3 2015 (Full Mod)  Trả lời: 11  Xem: 908

Demo ảnh



Hướng dấn

ACP >> Display >> Colors >> CSS
Thay toàn bộ bằng code sau
Code:
/* Button topic */.pun .posting a{background-color:#3B6E22;color:#FFF !important;font:bold 14px Arial;padding:6px 20px;margin-right:5px}
.posting a[href*="mode=reply"]:before{content:"Trả lời"}
.posting a[href*="mode=newtopic"]:before{content:"Đăng bài"}
.posting a[href^="/privmsg?mode=reply"]:before{content:"Trả lời"}
.posting a[href^="/privmsg?mode=post"]:before{content:"Gửi tin"}
.post-options a[href*="mode=quote"]:before{content:"• Trích dẫn"}
.post-options a[href*="?thank="]:before{content:"• Cảm ơn"}
.post-options a[href*="mode=editpost"]:before{content:"• Sửa"}
.post-options a[href*="mode=delete"]:before{content:"• Xóa"}
.post-options a[href*="mode=report"]:before{content:"• Báo lỗi"}
.post-options a[href^="/report?mode=lock"]:before{content:"• Khóa báo lỗi"}
.post-options a[href*="mode=ip"]:before{content:"• Xem IP"}
/* Khung post */.sceditor-group a{cursor:pointer!important;border:1px solid #999!important;background:#FFF url(http://i38.servimg.com/u/f38/16/18/15/10/untitl27.png)repeat-x bottom left!important;box-shadow:0 1px 0 #dedade!important;margin-left:-1px;border-radius:0;-moz-border-radius:0;padding:0 3px!important}
a.sceditor-button-faspoiler div{background:#FFF url(http://i35.servimg.com/u/f35/16/18/15/10/183.png)no-repeat center!important;border:1px solid #ccc!important;height:9px!important;width:9px!important;padding:3px!important}
.sceditor-container{border:1px solid #bdbdbd!important;border-radius:0!important;-moz-border-radius:0!important}
.sceditor-toolbar{text-align:left;border-bottom:1px solid #cecfce!important;background:#f2f2f2!important}
.sceditor-group a:active{background:#dedede!important;box-shadow:inset 0 1px 1px #b0b0b0!important}
.sceditor-group a.hover,.sceditor-group a.active{background:#dedede!important;box-shadow:inset 0 0 0 #b0b0b0!important}
.sceditor-toolbar .sceditor-group{background:none!important;border:0!important}
.sceditor-button-date,.sceditor-button-time{display:none!important}
/* View */.reply #pun-qpost .main-head{display:none}
.reply #pun-qpost .main-content.frm,.reply .frm-form{background:none !important;border:0;margin:-10px;padding:0}
/* Số trang */.pun .paging a{background-color:#FFF;background-image:url(http://i28.servimg.com/u/f28/16/18/15/10/untitl12.png);background-position:bottom left;background-repeat:repeat-x;border:1px solid #ccc;color:#000;font-family:Tahoma;font-size:12px;font-style:normal;font-variant:normal;font-weight:normal;height:15px !important;line-height:15px !important;margin:3px;padding:4px 6.5px}
.pun .paging{color:#FFF;display:inline-block;font-size:0;padding:0}
.pun .paging b{background-color:#ffedcf;border:1px solid #e6913c;color:#f60;font-family:Tahoma;font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;height:15px !important;line-height:15px !important;margin:3px;padding:4px 6.5px}
.pun .paging a:hover{border:1px solid #417394}
.pun .paged .paging,.pun .paged-foot .paging{float:right}
.pun .paged .posting{float:left}
/* Điều hướng */.pun div.nav a.nav{color:#243E75;display:inline-block;margin-top:-2px}
.pun div.nav a.nav{background-image:url(http://i57.servimg.com/u/f57/16/18/15/10/141.png);background-position:left top;background-repeat:no-repeat;display:inline-block;font-family:Tahoma;font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;height:20px;margin-bottom:-2px;padding:10px 5px 4px 15px}
.pun div.nav{background-color:#FFF;background-image:url(http://i57.servimg.com/u/f57/16/18/15/10/1335.png);background-position:top left;background-repeat:repeat-x;font-size:0;height:31px;margin-bottom:-5px;overflow:hidden;padding:2px 5px 1px 20px}
/* Box con 2 cột */.indexbox .smallrum{font-size:0;display:inline-block;width:100%}
.indexbox .smallrum a img{vertical-align:text-top;padding-right:2px}
.indexbox .smallrum a.gensmall{margin-right:5px;display:inline-block;padding-left:20px;overflow:hidden;text-overflow:ellipsis;width:40%;white-space:nowrap;float:left;font-size:12px;font-weight:bold;font-famli:Arial;background-size:16px 16px;margin-bottom:4px}
/* Box */.indexbox{display:inline-block;width:50%;font:12px Arial;float:left}
.indexbox1{padding:10px;border:1px solid #ddd;margin:5px}
.indexbox2{overflow:hidden;padding-left:110px}
.avatar_box1{display:inline-block;height:100px;width:100%}
.indexbox3{border-top:1px solid #ddd;margin:10px -10px 0 -10px;padding:7px 10px;height:30px;overflow:hidden}
.lastpost{font-weight:bold;background:url(http://i19.servimg.com/u/f19/18/83/96/52/111.png)no-repeat left center;padding-left:20px}
.indexbox01{margin:0 -5px}
.indexbox_view{display:inline-block;background:url(http://tb2.bdstatic.com/tb/static-frs/widget/forum_recommend/img/post_num_icon_3b35c3c.png)no-repeat left;padding-left:20px;color:rgb(255,125,57);margin:7px 0}
.indexbox_mota{color:rgb(156,154,156);max-height:50px;overflow-y:hidden}
/* Cột phải */#content-container div#right{float:right;overflow:hidden;width:180px}
#right{height:100%;margin-top:0 !important}
#right{position:relative}
.top_avatarbox,.avatar_box a[href*="/f"]{background-image:url(http://i38.servimg.com/u/f38/18/83/96/52/th/timg10.png);background-repeat:no-repeat;background-position:left top;background-size:100px 100px}
.avatar_box a[href*="/f40-"]{background-image:url(http://i39.servimg.com/u/f39/18/83/96/52/th/113.jpg)}
.mapxte{font-family:Arial;width:244px;display:inline-block;margin:0;padding:0;list-style:none;margin-top:10px}
.mapxte li a{font-size:14px;margin:0;padding:5px 1px 5px 28px;color:#333!important;display:block;background-size:16px 16px!important;background-position:4px 4px!important}
.mapxte li a:hover{background-color:rgb(247,247,247)}
.mapxte dd,.mapxte dd a{color:rgb(148,150,165)!important}
.mapxte .anbox{display:none}
.mapxte li{text-transform:capitalize}
.mapxte dd{margin:10px 0 5px 3px;font-size:14px;text-transform:uppercase;font-weight:bold}
.mapxtemo{background-position:228px 4px;background-repeat:no-repeat;background-image:url(http://i84.servimg.com/u/f84/17/57/29/64/select10.gif)}
.mapxte li a:first-child{text-transform:uppercase;font-weight:bold}
li.mapxteshow,.mapxtemo:hover{background-color:#FFF;background-image:none;border:1px solid #b0b0b0;margin-left:-1px;margin-top:-1px}
li.mapxteshow{border-top:0!important;border-right:0!important;border-bottom:0!important;background:none!important}
li.mapxteshow .anbox,.mapxtemo:hover .anbox,.mapxtemo:active .anbox{display:block!important}
.hrright{border-top:1px solid #d4d4d4;margin:7px 0 5px 0}
.navright{padding-top:8px;padding-bottom:8px;font-size:14px;font-weight:bold;font-family:Arial;text-transform:uppercase}
.navright,.pun .navright a{color:#333}
.pun a.topictitle{font-size:14px;line-height:180%;font-family:Arial;font-weight:bold}
/* All */.pun{width:982px !important}
body{color:#000;font-family:Verdana,Arial,sans-serif;font-size:12px}
a{text-decoration:none !important}
#pun-intro,#pun-head #pun-navlinks,.pun-crumbs,#pun-visit,#pun-about #qjump,#pun-info{display:none}
#wrapper{width:700px;display:inline-block;border-right:1px solid rgb(222,223,231)}
#content-container{min-height:2000px;margin-top:-4px;border-width:0 1px 1px;border-style:none solid solid;border-color:rgb(222,223,231);border-image:none}
.pun .main-content{background-color:#fff}
.main .main-head,.main-head{color:#333 !important;background-color:#e7e7e7;background-image:url(http://i.imgur.com/36LlnK7.png);background-position:top left;background-repeat:repeat-x;font-family:Tahoma !important;font-size:12px !important;padding:8px 15px;border:1px solid #ddd}
.pun .paged-foot,.pun .paged-head{background:0;border:0;margin:0 -3px}
#pun-about{background:0;border:0;line-height:normal;padding:0;text-align:center}
#ab39 img{display:none}
/* Log Reg */#username_reg,#email,#password_reg,#password,#subject,#username{width:200px;padding:7px 7px 7px 30px;font:14px Arial;border:1px solid #b0b0b0}
#username_reg,#username{float:left;background:#FFF url(http://i48.servimg.com/u/f48/16/18/15/10/login_11.jpg) no-repeat 5px center}
#password_reg,#password{float:left;background:#FFF url(http://i48.servimg.com/u/f48/16/18/15/10/login_12.jpg) no-repeat 5px center}
#email{float:left;background:#FFF url(http://i21.servimg.com/u/f21/17/57/29/64/emaiii10.jpg) no-repeat 5px center}
/* Thanh menu */.pun .topmuc a.acpt{margin:-13px -1px -13px -1px;padding:13px 15px 12px 39px;background-color:rgb(231,227,231);border:1px solid rgb(206,211,214);border-right:1px solid rgb(222,227,231) position:relative;z-index:2}
.pun .topmuc a{display:inline-block;padding:0 15px 0 39px;background-repeat:no-repeat;background-position:15px center;font:16px Arial;color:rgb(90,101,115);border-left:1px solid #FFF;border-right:1px solid rgb(214,219,231)}
.pun .topmuc a:nth-child(2){border-left:0}
.tienich:hover a.tienichshow{border:1px solid #ccc !important;background-color:#FFF !important;border-bottom:1px solid #FFF !important}
.tienich span{z-index:5;position:relative;float:right;margin-bottom:-170px;margin-top:10px;border:1px solid #ccc;width:170px;height:80px;margin-right:-1px;background-color:#FFF;padding:10px}
.pun .tienich span a{font:12px Arial !important;background:none;width:75px;border:0;color:#000;margin:0 !important;padding:5px !important}
a.tienichshow{position:relative;z-index:6;border:1px solid transparent !important;background:url(http://i39.servimg.com/u/f39/18/83/96/52/169.png)no-repeat 80px center !important;margin:-8px 4px -11px 0;padding:8px 39px 10px 15px !important}
.tienich:hover span{display:inline-block!important}
/* Button */.pun input[name="login"],.pun input[name="submit"],.pun input.mainoption,.pun input[name="post"]{color:#fff;background-color:rgb(87,145,237);background-position:top left}
input.button2:hover,input[type="button"],.pun input[type="submit"],input[type="reset"]{border:0;cursor:pointer;background-position:bottom left;font:bold 11px Tahoma !important;height:32px !important;padding:8px 20px 11px !important;font:bold 14px Arial !important}
button.button2,input.button2{background-image:none}


ACP >> Display >> QLTT
Thay từng template tương ứng
Index_box
Code:
<div class="main">
<!-- BEGIN catrow -->
 <!-- BEGIN tablehead -->
 <table cellspacing="0" class="table">

 <div class="indexbox01">
 <!-- END tablehead -->

 <!-- BEGIN forumrow -->
 <div class="indexbox">
 <div class="indexbox1 avatar_box">
                                                  <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle avatar_box1">
                                                  <div class="indexbox2">
 <h{catrow.forumrow.LEVEL} class="hierarchy">{catrow.forumrow.FORUM_NAME}</h{catrow.forumrow.LEVEL}>
 <br />
                                                    <div class="indexbox_view">{catrow.forumrow.TOPICS}</div>
 <br />
                                                    <div class="indexbox_mota">{catrow.forumrow.FORUM_DESC}</div>
                                                    
                                                  </div>
                                                  </a>
 <div class="indexbox3">
                                                          <div class="box smallrum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
                                                  <a class="lastpost" href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a>
                                                  </div>
                                                    
 </div>
 
 </div>
 <!-- END forumrow -->

 <!-- BEGIN tablefoot -->
 </div>
 </table>
 <!-- END tablefoot -->
<!-- END catrow -->
</div>


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>
        <script type="text/javascript">
        //<![CDATA[
        function lang_vi(a) {
            a = a.toLowerCase();
            a = a.replace(/\u00e0|\u00e1|\u1ea1|\u1ea3|\u00e3|\u00e2|\u1ea7|\u1ea5|\u1ead|\u1ea9|\u1eab|\u0103|\u1eb1|\u1eaf|\u1eb7|\u1eb3|\u1eb5/g, "a");
            a = a.replace(/\u00e8|\u00e9|\u1eb9|\u1ebb|\u1ebd|\u00ea|\u1ec1|\u1ebf|\u1ec7|\u1ec3|\u1ec5/g, "e");
            a = a.replace(/\u00ec|\u00ed|\u1ecb|\u1ec9|\u0129/g, "i");
            a = a.replace(/\u00f2|\u00f3|\u1ecd|\u1ecf|\u00f5|\u00f4|\u1ed3|\u1ed1|\u1ed9|\u1ed5|\u1ed7|\u01a1|\u1edd|\u1edb|\u1ee3|\u1edf|\u1ee1/g, "o");
            a = a.replace(/\u00f9|\u00fa|\u1ee5|\u1ee7|\u0169|\u01b0|\u1eeb|\u1ee9|\u1ef1|\u1eed|\u1eef/g,
                "u");
            a = a.replace(/\u1ef3|\u00fd|\u1ef5|\u1ef7|\u1ef9/g, "y");
            a = a.replace(/\u0111/g, "d");
            a = a.replace(/\W+/g, "-");
            a = a.replace(/^\-+|\-+$/g, "");
            a = a.replace(/(-group)$/, "");
            return a.replace(/(-page-\d+)$/, "")
        }
        var path = location.pathname,
            canonical = path + location.search + location.hash;
        /(\-category|\-forum|\-topic|\-group)/.test(path) && history.replaceState(null, null, canonical.slice(1).replace(/(\-category|\-forum|\-topic|\-group)/, "-" + lang_vi(document.title)));
        //]]>
 </script>
 <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}
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />{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 class="minwidth_IE">
 <div class="layout_IE">
 <div class="container_IE">
 <div class="pun">
                                  
                                  <div style="top:0px;left:0px;z-index:7;width:100%;background-position:top left;padding:10px 0 15px 0;height:24px;background-color:#FFF" class="topload blogpt" align="center">
                                    <div class="bb22" align="left">
                                      <!-- BEGIN switch_user_logged_out -->
                                      <span style="float:right;display:inline-block;width:470px" class="ptdn">
                                        <style>.toplogin input#username,.toplogin input#password {width:90px;margin:0px 5px;font:14px Arial;}</style>
                                        <script type="text/javascript"> $(function(){$("input#username_reg").attr("maxlength","16");})</script>
                                        <form action="/login" method="post" name="form_login" class="toplogin" style="float:left">
                                          <script type="text/javascript">document.write('<input type="hidden" name="redirect" value="' + location.href + '" />')</script>
                                          <input name="autologin" checked="true" style="display:none" type="checkbox">
                                            <input tabindex="1" name="username" id="username" size="30" maxlength="40" onblur="if (this.value == '') this.value = 'Tên truy cập';" onfocus="if (this.value == 'Tên truy cập') this.value = '';" value="Tên truy cập" placeholder="Tên truy cập" class="inputfield" type="text">
                                              <input tabindex="2" id="password" name="password" size="30" maxlength="25" onblur="if (this.value == '') this.value = 'Mật khẩu';" onfocus="if (this.value == 'Mật khẩu') this.value = '';" value="Mật khẩu" placeholder="Mật khẩu" class="inputfield" type="password">
                                                <input name="login" tabindex="6" value="Đăng Nhập" type="submit">
                                                </form>
                                                <a href="/register?agreed=true&amp;step=2" class="dangkibottom mobilept">Đăng ký</a>
                                              </span>
                                         <!-- END switch_user_logged_out -->
                                              
                                              <!-- BEGIN switch_user_logged_in -->
                                              <div style="float:right;display:inline-block;margin-top:-4px;text-align:right" class="toppt">
                                                <style>.quangcaopt {display:none!important}.topprofile {float:right;display:inline-block;font-family:Arial;;margin-right:2px}.topprofile span {display:none}div.topprofile .a_topprofile {display:inline-block;padding:10px 5px;border:1px solid transparent;border-bottom:0;font-weight:bold;}.topprofile .tb_top,.topprofile .edit_top {background-image:url(http://i59.servimg.com/u/f59/18/83/96/52/untitl13.png);background-repeat:no-repeat;background-position:center 10px;height:17px;width:14px;}.topprofile .tb_top {background-image:url(http://i59.servimg.com/u/f59/18/83/96/52/untitl14.png);}.topprofile:hover .a_topprofile {border-color: rgb(181,174,173);background-color:#FFF;position: relative;z-index:15;}.topprofile:hover span {z-index: 12;position: absolute;display:inline-block;border:1px solid rgb(181,174,173);padding:0 20px;background-color:#FFF;width:100px;margin-top:-1px;margin-left:-142px;text-align:left;}.pun .topprofile span a {display:block;border-top:1px dotted #d4d4d4;padding:7px 0;color:#000;}.pun .topprofile span a b {color:red;font-weight:normal;float:right}.topprofile span a:first-child {border:0}#av_top img {width:25px;height:25px;margin-top:5px}.sms_top {background-color:red;color:#FFF;font-weight:normal;display:inline-block;padding:0 3px;position: absolute;margin-top:-7px;margin-left:13px;font-size:10px;}.sms_top0 {display:none}</style>
                                                <script>$(function() {$('#name_top').html(_userdata['username']);$('#av_top,.reply1').html(_userdata['avatar']);$('#post_top').html(_userdata['user_posts']);$('#like_top').html(_userdata['point_reputation']);$('#not_top').html(_userdata['notifications']);});</script>
                                                <div class="topprofile" style="margin-top:1px">
                                                  <a href="/privmsg?folder=inbox" class="a_topprofile tb_top" style="background-color:transparent;border-color: transparent;">
                                                    <b class="sms_top sms_top0"></b>
                                                  </a>
                                                </div>
                                                <div class="topprofile">
                                                  <a href="/profile?mode=editprofile" class="a_topprofile edit_top"></a>
                                                  <br />
                                                  <span>
                                                    <a href="/profile?mode=editprofile&amp;page_profil=preferences">Tùy chỉnh cá nhân</a>
                                                    <a href="/profile?change_password=Change+your+password&amp;mode=editprofile&amp;page_profil=informations">Đổi mật khẩu</a>
                                                    <a href="/profile?mode=editprofile&amp;page_profil=avatars">Sửa ảnh đại diện</a>
                                                    <a href="/profile?mode=editprofile&amp;page_profil=signature">Sửa chữ ký</a>
                                                    <a href="{U_LOGIN_LOGOUT}" rel="nofollow" id="logout">Thoát</a>
                                                  </span>
                                                </div>
                                                <div class="topprofile mobilept">
                                                  <a href="/profile?mode=editprofile" class="a_topprofile" id="name_top"></a>
                                                  <br/>
                                                  <span>
                                                    <a href="/profile?mode=editprofile">Lý lịch tôi</a>
                                                    <a href="/search?search_id=activetopics">Bài trong ngày</a>
                                                    <a href="/search?search_id=favouritesearch">Bài yêu thích</a>
                                                    <a href="/search?search_id=egosearch">Bài viết tôi
                                                      <b id="post_top"></b>
                                                    </a>
                                                    <a href="/profile?mode=editprofile">Được thích
                                                      <b id="like_top"></b>
                                                    </a>
                                                    <a href="/profile?mode=editprofile&amp;page_profil=notifications">Thông báo
                                                      <b id="not_top"></b>
                                                    </a>
                                                  </span>
                                                </div>
                                                <a href="/profile?mode=editprofile&amp;page_profil=avatars" class="topprofile" id="av_top">
                                                  <img src="http://r12.imgfast.net/users/1211/23/83/92/avatars/gallery/111.jpg" alt=""/>
                                                </a>
                                              </div>
                                              <!-- END switch_user_logged_in -->
                                              
                                              <form id="sell1" method="get" action="/h36-search" name="cpsearch" style="width:450px;display:inline-block;float:left;">
                                                <input autocomplete="off" class="ui-autocomplete-input" name="q" onblur="if (this.value == '') this.value = 'My Life';" onfocus="if (this.value == 'My Life') this.value = '';" value="My Life" placeholder="My Life" style="border:1px solid #d4d4d4;padding:7px 30px 7px 8px;font:14px Arial;color:#333333;background: #FFF url(http://i57.servimg.com/u/f57/16/18/15/10/1102.png)no-repeat right;width:100%;height:16px" type="text">
                                                </form>
                                              </div>
                                            </div>
                                  
                                    
                                    <div class="topmuc blogpt" style="background-color:rgb(238,239,243);background-image:url(http://i.imgur.com/36LlnK7.png);background-repeat:repeat-x;background-position:top left;border:1px solid rgb(222,223,231);border-bottom:1px solid rgb(214,219,222)">
                                      <div style="padding:12px 0">
                                        <a href="/" style="background-image:url(http://i.imgur.com/HE1Sg9r.png)" class="acpt mobilept">Trang chính</a>
                                        <a href="/f54-forum#view" style="background-image: url(http://i.imgur.com/ayBGt3J.png)">Hình ảnh</a>
                                        <a href="/f3-forum" style="background-image: url(http://i39.servimg.com/u/f39/16/18/15/10/113.png)">Tin Hay</a>
                                        <a href="/h58-Games" style="background-image: url(http://i39.servimg.com/u/f39/18/83/96/52/123.png)" class="mobilept">Games</a>
                                        <a href="/h3-Tools" style="background-image: url(http://i74.servimg.com/u/f74/18/83/96/52/110.png)" class="mobilept">Phần mềm</a>
                                        <a href="/f65-forum#view" style="background-image: url(http://i39.servimg.com/u/f39/18/83/96/52/156.png);border-right:0!important">Video</a>
                                        <span class="tienich">
                                          <a href="/t129-topic" target="_blank" style="float:right;border:0" class="mobilept tienichshow">Tiện ích</a>
                                          <span style="display:none">
                                            <a href="/h32-forum" target="_blank">Photoshop</a>
                                            <a href="/h22-uploadimage" target="_blank">Up Ảnh</a>
                                            <a href="/h1-gamemini" target="_blank">Game Mini</a>
                                            <a href="/h4-" target="_blank">Truyện Tranh</a>
                                            <a href="/h47-" target="_blank">Ảnh Bìa Fb</a>
                                          </span>
                                        </span>
                                      </div>
                                            </div>
                                    
                                    
 <div id="pun-intro" class="clearfix">
 <a href="{U_INDEX}" id="pun-logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>
 <!-- BEGIN switch_h1 -->
 <div id="pun-title">{switch_h1.MAIN_SITENAME}</div>
 <!-- END switch_h1 -->
 <!-- BEGIN switch_desc -->
 <p id="pun-desc">{switch_desc.SITE_DESCRIPTION}</p>
 <!-- END switch_desc -->
 </div>
 <div id="pun-head">
 <div id="pun-navlinks">
 <ul class="clearfix">
 <li>{GENERATED_NAV_BAR}</li>
 </ul>
 </div>
 </div>
 <!-- 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="content-container">
 <div id="outer-wrapper">
                                                          
                                                          
<span style="float:right">
  <div id="right" style="display:inline-block;width:245px;padding:15px;padding-top:0" class="topload1 blogpt">
    <ul class="mapxte avatar_box">
      <dd>Trò chơi</dd>
      <li class="mapxtemo f40 f4 f16 f29 f32 f25 f87 suboxf46">
        <a href="/f40-forum" class="f40">Divide &amp; Fight</a>
        <a href="/f4-forum" class="anbox f4">Bản tin D&amp;F</a>
        <a href="/f16-forum" class="anbox f16">Báo lỗi</a>
        <a href="/f29-forum" class="anbox f29">Giao lưu - đấu trường</a>
        <a href="/f32-forum" class="anbox f32">Thư viện</a>
        <a href="/f25-forum" class="anbox f25">Clan</a>
        <a href="/f87-forum" class="anbox f87 mapsub">Video DF</a>
      </li>
      <li class="mapxtemo f15 f106 f47 27 f104 f46 f22 suboxf15">
        <a href="/f15-forum" class="f15">Warcraft III</a>
        <a href="/f22-forum" class="f22 anbox">Custom map tần tật</a>
        <a href="/f106-forum" class="anbox f106">9x Hero Defense VN</a>
        <a href="/f27-forum" class="anbox f27 mapsub">Hướng dẫn tạo map</a>
        <a href="/f104-forum" class="anbox f104">Ảnh đẹp Warcraft III</a>
        <a href="/f46-forum" class="anbox f16">Video Warcraft III</a>
      </li>
      <li>
        <a href="/f121-forum" class="f64">Game Private</a>
      </li>
      <li class="mapxtemo f58 f6 f102 f131 f110">
        <a href="/f58-forum" class="f58">PC Games Offline</a>
        <a href="/f102-forum" class="anbox f102">Mini Game PC</a>
      </li>
      <dd>Giải trí</dd>
      <li>
        <a href="/f65-forum" class="f65 f111 f95 f87 f11">Video Clip</a>
      </li>
      <li class="mapxtemo f54 f73 f98 f57 f55 f100 f74 f83">
        <a href="/f54-forum" class="f54">Hình ảnh đẹp</a>
        <a href="/f115-forum" class="anbox f115">Ảnh Vui Cười</a>
        <a href="/f73-forum" class="anbox f73">Hình Nền Máy Tính</a>
        <a href="/f98-forum" class="anbox f98">Cosplay</a>
        <a href="/f100-forum" class="anbox f100">Bìa facebook</a>
        <a href="/f74-forum" class="anbox f74">Ảnh đẹp khác</a>
      </li>
      <li>
        <a href="/f3-forum" class="f3">Tin Hay</a>
      </li>
      <li class="mapxtemo f56 f126 f118 f79 f127 f129 f103">
        <a href="/f56-forum" class="f56">Hội quán truyện</a>
        <a href="/f52-forum" class="anbox f52">Tam Quốc Kỳ Truyện</a>
        <a href="/f126-forum" class=" anbox f126">Truyện cười</a>
        <a href="/f118-forum" class="anbox f118">Ô Long Viện</a>
        <a href="/f127-forum" class="anbox f127">Tay Du Ký 1</a>
        <a href="/f129-forum" class="anbox f129">Tay Du Ký 2</a>
        <a href="/f103-forum" class="anbox f103">Lưu trữ truyện tranh</a>
      </li>
      <li>
        <a href="/f8-forum" class="f8">Âm nhạc - Nonstop</a>
      </li>
      <dd>Công nghệ</dd>
      <li class="mapxtemo f97 f122">
        <a href="/f97-forum" class="f97">Phần Mềm Tổng Hợp</a>
        <a href="/f105-forum" class="anbox f105">Movie Maker</a>
      </li>
      <li>
        <a href="/f122-forum" class="f122">Thủ thuật mẹo vặt</a>
      </li>
      <dd>Nhóm</dd>
      <li class="mapxtemo">
        <a href="/f30-forum" class="f30">Anime Manga</a>
        <a href="/f48-forum" class="anbox f48">Fairy Tail</a>
        <a href="/f49-forum" class="anbox f49">One Piece</a>
        <a href="/f60-forum" class="anbox f60">Tổng Hợp Map Anime</a>
        <a href="/f66-forum" class="anbox f66">Anime Vietsub</a>
      </li>
    </ul>
    
    <div id="abb11">
      <style>.phutu_new {display:inline-block;margin-top:10px}.new_mod div:first-child .phutu_new{border-top:0px}.phutu_new img {width:100%;height:170px;margin-top:-25px;margin-bottom:10px}.phutu_new b {display:inline-block;color:#000;font:bold 14px/20px Arial}.phutu_new span {float:left;display:block;width:100%;height:123px;float:left;overflow:hidden;margin-bottom:5px;background-color:#000}.phutu_new embed {display:none}</style>
      <div style="float:right">
            
 <div class="thanhtien" style="right:20px;float: right; width: 45px; position: fixed; bottom: 30%;display: inline-block;margin-left:20px;z-index:98">
          <a style="display:none;width:45px;height:45px;background-image: url(http://i39.servimg.com/u/f39/18/83/96/52/163.png);background-repeat:no-repeat;margin-bottom:4px" href="#comments"></a>
          <a style="display:inline-block;width:45px;height:45px;background-image: url(http://i39.servimg.com/u/f39/18/83/96/52/164.png);background-repeat:no-repeat;margin-bottom:4px" onclick="reloadPage()" href="javascript:reloadPage()"></a>
          <a style="display:inline-block;width:45px;height:45px;background-image: url(http://i39.servimg.com/u/f39/18/83/96/52/161.png);background-repeat:no-repeat;margin-bottom:4px" href="#top"></a>      
 </div>
</div>
      <script>
function reloadPage()
  {
  location.reload();
  }
</script></div><div class="bailienquan"></div></div></span>
                                                          
                                                          
 <div id="wrapper">
                                                                  
             <div style="border-width:0px 0px 1px" class="nav main-box">
 <div style="display:block">
 <a href="/" style="display:inline-block;background-image: url(http://i48.servimg.com/u/f48/14/28/30/23/home10.gif);background-repeat:no-repeat;margin:8px 5px 0px -5px;float:left;padding:9px" class="nav"></a>{NAV_CAT_DESC}
 </div>
 </div>
                                                                  
 <div id="container">
 <div id="content" style="padding:10px">
 <div id="{ID_LEFT}">
 <!-- BEGIN giefmod_index1 -->
 {giefmod_index1.MODVAR}
 <!-- BEGIN saut -->
 <div style="height:{SPACE_ROW}px"></div>
 <!-- END saut -->
 <!-- END giefmod_index1 -->
 </div>
 <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 -->



Topics_blog_box
Code:
<style>
  /* Mod new và topic blog */
.singleCol #post-container{background:url("http://i21.servimg.com/u/f21/17/57/29/64/timeli11.jpg") repeat-y 567px top}
.pin-container{float:left;position:relative}
.singleCol #post-container .pin-container{width:220px;padding:5px}
.singleCol #post-container .pin-container:first-of-type{margin-top:0}
.singleCol #post-container .pin-container .midCol{margin-right:10px;width:220px}
.pin{font-size:11px}
.singleCol #post-container .pin{position:relative}
.singleCol .upperInfo h3{display:inline;font-size:100%;font-weight:normal;font-family:inherit;margin:0}
.pin-container .upperInfo h3 a{color:#2b2b2b;font-size:22px;font-weight:bold}
.singleCol #post-container .pin .pin_pic_img_a{height:142px;display:block;overflow:hidden;font-size:0}
.singleCol #post-container .pin .pin_pic_img_a img{width:220px;height:142px;margin-bottom:0}
.pin-container .pinleft{color:#aaa;margin-bottom:5px;margin-top:5px;height:auto;font-size:11px}
.pin-container .pinleft a{color:#aaa;font-size:11px}
.pin-container .pinright{float:right}
.pin-container .bottomInfo{width:450px;padding-top:3px;overflow:hidden}
.pin-container .bottomInfo .block{margin:1px 3px 0 0;padding:3px}
.fl-l{float:left;overflow:hidden}
.pin-container .bottomInfo .block{margin:1px 3px 0 0;padding:3px}
.item {
    display: none;
}
.borr {margin: 0px -5px;}
.pin_pic_img_a br, .pin_pic_img_a > strong, .pin_pic_img_a font, .pin_pic_img_a span{
    display: none;
}
.pin_pic_img_a {
    background-image: url('http://i.imgur.com/rhebXoh.png');
}
</style>

<!-- BEGIN topics_blog_box -->
<div class="singleCol">
 <div id="post-container">
          <div class="borr">
  <!-- BEGIN row -->
<!-- BEGIN topic -->
 <div class="masonry-brick pin-container">
 <div class="midCol">
 <div class="pin">
 <div class="upperInfo">
 </div>
 <a class="pin_pic_img_a" target="_blank" href="{topics_blog_box.row.U_VIEW_TOPIC}">
 {topics_blog_box.row.FIRST_POST_TEXT}
 </a>
                                  <a href="{topics_blog_box.row.U_VIEW_TOPIC}" style="font: bold 14px/20px Arial; display: inline-block; margin-top: 5px; overflow: hidden; height: 38px;" target="_blank">{topics_blog_box.row.TOPIC_TITLE}</a>
 <div class="pinleft">
 <a>Bởi {topics_blog_box.row.TOPIC_AUTHOR}</a>
                                          <span style="float:right">{topics_blog_box.row.LAST_POST_TIME}</span>
 </div>

<div class="item">
 <a href="{topics_blog_box.row.U_VIEW_TOPIC}">
 <div>
 <div class="photo">
                  {topics_blog_box.row.FIRST_POST_TEXT}
 </div>
 </div>
 <p>
{topics_blog_box.row.TOPIC_TITLE}
 </p>
 </a>
</div>
 </div>
 </div>
 </div>
<!-- END topic -->
<!-- END row -->
          </div>
 <div id="listEnd">
 </div>
 </div>
</div>
 <!-- END topics_blog_box -->



Hướng dẫn thay ảnh box chuyên mục : http://www.hotrofm.net/t356-hoi-dap-can-giup-do-ve-skin-phutu-2016#1570
Tags: #skin #punbb
Search in: Skin Forumotion  Chủ đề: [Skin] Chia sẻ skin Phutu 2016 ver Punbb  Trả lời: 6  Xem: 1648

Demo ảnh



Demo online

Địa chỉ: http://huudang5.forumvi.com/
http://tikii.forumvi.com/

Hướng dấn

ACP >> Display >> Colors >> CSS
Thay toàn bộ CSS bằng code sau
Code:
/* All */
body {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    font-family: 'Trebuchet MS',Helvetica,Arial,sans-serif;
    color: #303030;
    word-wrap: break-word;
    line-height: 1.28;
  background: #000000;
}
.pun {
    background: #fff;
    padding: 0 10px 10px;
  width:1000px
}
a:link, a:visited {
    color: #303030;
    text-decoration: none;
}
li {
    list-style: none;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
.pun .main-content {
    background: #fff;
    border: 1px solid #ddd;
  margin-bottom: 10px;
}
#pun-about {
    text-align: center;
    border: 0;
    line-height: 0;
    padding: 0;
    background: 0;
}
#pun-about ul li {
    color: #bbb;
}
#pun-about ul li a {
    font-weight: 400;
    color: #bbb;
}
#pun-visit{
    display: none;
}
/* Header */
#headerMover #header {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
#header {
    background: #fff;
}
#logoBlock {
    background: #fff;
  margin-left: -10px;
margin-right: -10px;
}
.pageWidth {
    padding-right: 0;
    padding-left: 0;
    margin: 0;
    _max-width: 1200px;
    _margin: 0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
#header .pageWidth .pageContent {
    zoom: 1;
}
#logo {
    display: block;
    float: left;
    line-height: 76px;
    *line-height: 80px;
    height: 80px;
    max-width: 100%;
    vertical-align: middle;
}
#logo span {
    *display: inline-block;
    *height: 100%;
}
#logo img {
    vertical-align: middle;
    max-width: 100%;
    margin-left: 10px;
}
#logo_transparent {
    display: none;
}
ul#gt_navigation {
    float: left;
    line-height: 80px;
    margin-left: 30px;
}
ul#gt_navigation li {
    float: left;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    margin-left: 40px;
}
#header .pageWidth .pageContent::after {
    content: '.';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/* Nav tab */
.navTabs {
    font-weight: bold;
    font-size: 13px;
    color: #fff;
    background: #3b3b3b;
    padding: 0 0 0 5px;
    margin-top: 10px;
    position: relative;
    height: 50px;
}
.navTabs .publicTabs {
    float: left;
}
.navTabs .navTab.PopupClosed {
    position: relative;
}
.navTabs .navTab.PopupClosed:hover {
    background: #d12429;
}
.navTabs .navTab {
    float: left;
    white-space: nowrap;
    word-wrap: normal;
}
.navTabs .navTab.PopupClosed .navLink {
    color: #fff;
}
.navTabs .publicTabs .navLink {
    padding: 0 13px;
}
.navTabs .navLink, .navTabs .SplitCtrl {
    display: block;
    float: left;
    vertical-align: text-bottom;
    text-align: center;
    outline: 0 none;
    height: 25px;
    line-height: 24px;
}
.navTabs .navTab.selected .navLink {
    position: relative;
    font-weight: bold;
    color: #303030;
    background: #ccc;
}
.navTabs .navTab.selected .SplitCtrl {
    display: none;
}
.navTabs .navTab.selected .tabLinks {
    background: #ccc;
    width: 100%;
    padding: 0;
    border: none;
    overflow: hidden;
    zoom: 1;
    position: absolute;
    left: 0px;
    top: 25px;
    height: 25px;
    *clear: expression(style.width = document.getElementById('navigation').offsetWidth + 'px', style.clear = "none", 0);
}
.navTabs .navTab.selected .tabLinks .menuHeader {
    display: none;
}
.primaryContent {
    background: #fff;
    padding: 10px;
}
body .muted, body a.muted, body .muted a {
    color: #949494;
}
.withSearch .navTabs .navTab.selected .blockLinksList {
    margin-right: 275px;
}
.navTabs .navTab.selected .blockLinksList {
    background: none;
    padding: 0;
    border: none;
    margin-left: 8px;
}
.blockLinksList {
    font-size: 11px;
    padding: 2px;
}
.secondaryContent {
    background: #fff url('http://st.fgt.vnexpress.net/styles/gamethu/xenforo/gradients/category-23px-light.png') repeat-x top;
    padding: 10px;
    border-bottom: 1px solid #d6d6d6;
}
.navTabs .navTab.selected .tabLinks li {
    float: left;
    padding: 2px 0;
}
.navTabs .navTab.selected .tabLinks a {
    font-size: 12px;
    color: #303030;
    padding: 0px 9px;
    display: block;
    line-height: 22px;
}
.secondaryContent.blockLinksList li a {
    color: #333;
}
.blockLinksList a, .blockLinksList label {
    color: #333;
    padding: 5px 10px;
    display: block;
    outline: 0 none;
}
.Popup .PopupControl, .Popup.PopupContainerControl {
    display: inline-block;
    cursor: pointer;
}
/* Dropmenu */
.navTabs ul.menus{height:auto;overflow:hidden;width:200px;background:#444;position:absolute;z-index:99;display:none;margin-top: 25px;}

.navTabs ul.menus a {
    color: #fff;
    padding: 0 13px;
    height: 25px;
    line-height: 25px;
    display: block;
}
.navTabs li:hover ul.menus{display:block}
.navTabs ul.menus a:hover{background:#222;color:#fff}
/* Avatar menu */
.avatarbar img {
    border: 1px solid #ff0;
    height: 19px;
    margin-right: 3px;
    margin-top: 2px;
    width: 19px;
    vertical-align: top;
}
/* Box */
.main .main-foot, .main .main-head {
    font-weight: bold;
    font-size: 11px;
    color: #fff;
    background: #3b3b3b;
    padding: 5px 10px;
    margin: 0 auto;
border-left: 3px solid #d12429;
    padding: 5px 10px;
    margin: 0;
    min-height: 6px;
}
h3.hierarchy {
    font-size: 12pt;
}
.lastpost{
    background: #efefef;
    font-size: 14px;
    padding: 3px 10px;
    margin: 0px 10px 0px 4px;
    border: 1px solid #ddd;
    border-radius: 5px;
    white-space: nowrap;
}
/* Box con 2 cột */
#smallrum{padding: 0.2em 1em 0 1em; margin: 3px 1px;  
color: #FFFFFF; width: 375px;}
#smallrum a img{vertical-align: text-top; padding-right: 2px;}
#smallrum a.gensmall {
display: inline-block;
text-align: left;
width: 165px;
}
/* Side bar */
.sidebar{padding:10px;background:#fff;margin-bottom:10px;text-align:center;border: 1px solid #ddd;}
.SignupButton{font-size:18px;color:#FFF!important;background:#d12429;display:block;text-shadow:0 0 0 transparent,0 0 3px rgba(0,0,0,0.5);font-weight:700;padding:10px}
.LogButton{font-size:18px;color:#FFF!important;background:#d12429;display:block;text-shadow:0 0 0 transparent,0 0 3px rgba(0,0,0,0.5);font-weight:700;padding:10px;margin-top:10px}
.SignupButton:hover,.LogButton:hover{background:#3b3b3b}
.sidebar h3{font-size:14px;color:#38445F;background:#FFF;padding:8px 10px;margin:-10px -10px 10px;border-bottom:1px solid #EFF2F7;text-transform:uppercase}
.thin{border-bottom:0;border-top:0}
.Tinhte_XenTag_TagCloud{zoom:1}
.Tinhte_XenTag_TagCloud:after{content:'.';display:block;height:0;clear:both;visibility:hidden}
.Tinhte_XenTag_TagCloud .Tinhte_XenTag_TagCloudTag{background:#0F61A1;color:#EFF2F7;display:inline;float:left;margin:0.2em;padding:0}
.Tinhte_XenTag_TagCloud .Tinhte_XenTag_TagCloudTag:hover{background:#f9d9b0;color:#32A34F}
.Tinhte_XenTag_TagCloud .Tinhte_XenTag_TagCloudTag a{color:inherit;display:block;font-size:1em;font-weight:bold;margin:0.5em;white-space:nowrap}
.Tinhte_XenTag_TagCloud .Tinhte_XenTag_TagCloud_Level1{background:#EFF2F7;color:#0F61A1}
.Tinhte_XenTag_TagCloud .Tinhte_XenTag_TagCloud_Level2{background:#D4D4D4}
.Tinhte_XenTag_TagCloud .Tinhte_XenTag_TagCloud_Level3{background:#6cb2e4}
.sidebar .avatar{margin-right:10px;float:left;width:auto;height:auto;border:0}
.sidebar .avatar img{width:70px;height:70px;display:block;padding:0;padding:2px;border:1px solid #ddd}
.sidebar .username{font-size:14px}
.sidebar .stats{margin-top:10px}
.sidebar .stats .pairsJustified{line-height:normal}
.sidebar .pairsJustified dd,.sidebar .pairsJustified dt{color:#92A5B4}
.pairsJustified dt{float:left}
.sidebar .pairsJustified dd,.sidebar .pairsJustified dt{color:#92A5B4}
.pairsJustified dd{float:right;text-align:right}
dl.pairsColumns,dl.pairsJustified,.pairsColumns dl,.pairsJustified dl{overflow:hidden}
/* Footer */
.footerLegal {
width: 1020px;
margin: 0px auto;
background: #000;
padding-top: 5px;
}
.footerLinks {
    margin: 5px;
    float: none;
  overflow: hidden;
  padding-right: 5px;
}
.footerLinks li {
    float: right;
    margin-left: 10px;
}
.footerLinks li a {
    color: #fff;
}
.footerLegal .pageWidth .pageContent {
    color: #999;
      text-align: left;
    padding-left: 150px;
      background: url('http://st.fgt.vnexpress.net/styles/gamethu/logo_transparent.png') no-repeat left;
}
.footerLegal .pageContent {
    font-size: 11px;
    overflow: hidden;
    zoom: 1;
    padding: 5px 5px 15px;
    text-align: center;
}
.footerLegal .pageWidth .pageContent a {
    font-size: 12px;
    font-weight: bold;
    color: #d3222a;
}
/* button css */
.posting a,.options-button a{display:block;color:#FFF!important;background:#d12429;margin:0 0 0 10px;padding:4px 16px;float: right;}
.options-button a{padding:3px 6px;margin: 0 5px 0 0 !important;}
.posting a {font-size: 15px;font-weight: 700;padding: 8px;}
.options-button a[title="Thank you"]{background:#ff007e}
.posting a:hover,.options-button a:hover{background:#444!important}
.zzPoll > h3 a:before,div.errorwrap p:before,div.infowrap p:before,.options-button a:before,.posting a:before,.contract:before,.expand:before{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.posting a[href*="mode=reply"]:before{content:"\f112"}
.posting a[href*="mode=reply"]:after{content:" Trả lời bài viết"}
.posting a[href*="mode=newtopic"]:before,.post-icon > a[href^="/privmsg?mode=post"]:before{content:"\f067"}
.posting a[href*="mode=newtopic"]:after{content:" Tạo chủ đề mới"}
.posting a[href^="/privmsg?mode=reply"]:after{content:" Trả lời tin nhắn"}
.posting a[href^="/privmsg?mode=post"]:after{content:" Viết tin nhắn mới"}

.options-button a[href*="mode=quote"]:before{content:"\f10d"}
.options-button a[href*="mode=quote"]:after{content:" Trích dẫn"}
.options-button a[href*="?thank="]:before{content:"\f164"}
.options-button a[href*="?thank="]:after{content:" Cảm ơn"}
.options-button a[href*="mode=editpost"]:before{content:"\f044"}
.options-button a[href*="mode=editpost"]:after{content:" Sửa bài"}
.zzPoll > h3 a:before,.options-button a[href*="mode=delete"]:before{content:"\f00d"}
.options-button a[href*="mode=delete"]:after{content:" Xóa bài"}
.options-button a[href*="mode=report"]:before{content:"\f024"}
.options-button a[href*="mode=report"]:after{content:" Báo lỗi"}
.options-button a[href^="/report?mode=lock"]:before{content:"\f11d"}
.options-button a[href^="/report?mode=lock"]:after{content:" Khóa báo lỗi"}
.options-button a[href*="mode=ip"]:before{content:"\f041"}
.options-button a[href*="mode=ip"]:after{content:" Xem Ip"}
/* Làm đẹp số trang */
.pun .pagination.top b,.pun .paging b{background:#d12429;border:1px solid #d12429;font:bold 12px Tahoma;color:#FFF;padding:8px}
.pun .pagination.top a,.pun .paging a{background:#DEEFEB;border:1px solid #C8D7EC;font:bold 12px Tahoma;padding:8px;color:#d12429}
.pun .pagination.top,.pun .paging{color:#FFF;display:inline-block;padding:0;font-size:11px;margin-top:8px;margin-bottom:4px}
.pun .pagination.top a:hover,.pun .paging a:hover{border-color:#d12429}

/* Button icon */
input[type="button"],input.button,a.button,input.button1,input[type="submit"],input[type="reset"]{background:#d12429;padding:5px 14px;font-size:1em;border:0 none!important;color:#FFF!important}
input[type="button"]:hover,input.button:hover,a.button:hover,input.button1:hover,input[type="submit"]:hover,input[type="reset"]:hover{background-color:#333!important}
a.button,#find_user,select[name="g"] + input,#use,#jqmHide,#friend + input,#foe + input,#find_friend,select[name="avatarcategory"] + input,select[name="active_time"] + input,select[name="msgdays"] + input,input[type="reset"],input[type="submit"],form[name="searchform"] .button{padding:5px 10px 5px 30px;background-repeat:no-repeat;background-position:10px center!important}
#find_user,#find_friend,form[action="/search"] input[type="submit"],input[type="submit"][name="search"],form[name="searchform"] .button{background-image:url(http://i39.servimg.com/u/f39/14/67/90/38/search10.png)}
input[type="reset"],input[type="submit"][name="refresh"],input[type="submit"][name="groupstatus"]{background-image:url(http://i39.servimg.com/u/f39/18/95/05/08/refres10.png)}
a.button[href="/"],input[type="submit"][name="valid"],#jqmHide,input[type="submit"][name="remove"],input[type="submit"][name="cancelavatar"],input[type="submit"][name="cancel"],input[type="submit"][name="delete"],input[type="submit"][name="deleteall"],input[type="submit"][name="delete_all"]{background-image:url(http://i39.servimg.com/u/f39/18/59/49/93/icon_e10.png)}
input[type="submit"][name="prevent_modif"],input[type="submit"][name="preview"]{background-image:url(http://i39.servimg.com/u/f39/18/95/05/08/previe10.png)}
input[type="submit"][name="draft"],input[type="submit"][name="save"]{background-image:url(http://i39.servimg.com/u/f39/18/95/05/08/save10.png)}
a.button[href="/register?agreed=true&step=2"],input[type="submit"][name="prevent_post"],input[type="submit"][name="split_type_beyond"],input[type="submit"][name="split_type_all"],input[type="submit"][name="submitavatar"],input[type="submit"][name="post"],input[type="submit"][name="confirm"],input[type="submit"][name="publish"],input[type="submit"][name="submit"],input[type="submit"][name="login"]{background-image:url(http://i39.servimg.com/u/f39/18/95/05/08/send10.png)}
select[name="g"] + input,select[name="fid"] + input[type="submit"][name="go"],input[type="submit"][name="moveprofile"],select[name="active_time"] + input,select[name="msgdays"] + input,select[name="avatarcategory"] + input[type="submit"]{background-image:url(http://i39.servimg.com/u/f39/18/83/32/63/14085610.png)}
input[type="submit"][name="add"],#friend + input,#foe + input{background-image:url(http://i39.servimg.com/u/f39/18/83/32/63/14085611.png)}
input[type="submit"][name="go"],input[type="submit"][name="select_to"],#use{background-image:url(http://i39.servimg.com/u/f39/18/83/32/63/14085612.png)}
input[type="submit"][name="avatargallery"]{background-image:url(http://i39.servimg.com/u/f39/18/83/32/63/14085613.png)}
.noIcon input.button[type="submit"]{padding-left:10px;background-image:none}
input.button2{margin: 0}
.pun .frm .frm-buttons input,.button,.button1{padding: 5px 10px 5px 30px!important}
/* Thanh đường dẫn devs */
.pun-crumbs{padding:0;margin:0}
.navstrip{color:#e8e8e8;font-weight:700;list-style:none;background:#fff;border:1px solid #ddd;margin-bottom: 10px}
.navstrip > li{float:left;color:#666;margin:0;padding:0;line-height:36px;height:36px;display:block;position:relative;background:#FFF;padding:0 5px 0 20px}
.navstrip > li.begin {
    width: 47px;
    padding-left: 4px;
    background: #3b3b3b;
border-left: 3px solid #d12429;
}
.navstrip li a{font-weight:700;text-decoration:none}
.navstrip > li.begin > a{text-indent:-9999px;display:block;background:url(http://i.imgur.com/gM0x7Zx.png) no-repeat center center transparent;background-position: 15px 8px;}
.navstrip > li:before,.navstrip > li:after{content:" ";border:18px solid transparent;border-left-width:12px;border-right:0;border-left-color:#FFF;display:block;position:absolute;right:-12px;top:0;z-index:10;width:0;height:0}
.navstrip > li:after{border-left-color:#DBDBDB;right:-13px;z-index:5}
.navstrip > li.begin:before{border-left-color:#3b3b3b}
.navstrip > li:hover,.navstrip > li:hover a{background-color:#333;color:#FFF}
.navstrip > li:hover:before{border-left-color:#333}


ACP >> Display >> QLTT
Thay từng template tương ứng
Index_body
Code:
{JAVASCRIPT}

<!-- 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'" 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}
<table width="100%"><tbody><tr><td width="74%" valign="top">{BOARD_INDEX}</td>
<td width="26%" valign="top" style="padding-left:10px">
<!-- BEGIN switch_user_logged_out -->
<div class="sidebar">

  <a class="SignupButton" href="/register">Đăng ký!</a>

  <a class="LogButton" href="/login">Đăng nhập!</a>

</div>
<!-- END switch_user_logged_out -->
  <!-- BEGIN switch_user_logged_in -->
  <div class="sidebar" style="text-align:left">
        
<div class="forumstatistics profilez">
    <div class="teststats">
        <span class="hienthianh"></span>
        <div class="visitorText">
          <h2><span class="tenthanhvien"></span></h2>
            <div class="stats">
                <dl class="pairsJustified"><dt>Tin nhắn:</dt>
                  <dd><span class="tinhan"></span></dd>
                </dl>
                <dl class="pairsJustified"><dt>Được Like:</dt>
                    <dd><span class="duoclike"></span></dd>
                </dl>
                <dl class="pairsJustified"><dt>Points:</dt>
                    <dd><span class="sopoint"></span></dd>
                </dl>
            </div>
        </div>
    </div>
</div>
  <script type="text/javascript">
//<![CDATA[
   $(".hienthianh").replaceWith('<a class="avatar" href="/u' + _userdata.user_id + 'wall" rel="nofollow">' + _userdata.avatar + '</a>');
              $(".tenthanhvien").replaceWith('<a class="username NoOverlay" href="/u' + _userdata.user_id + 'wall" rel="nofollow">' + _userdata.username + '</a>');
              $(".tinhan").replaceWith('' + _userdata.user_nb_privmsg + '');
              $(".duoclike").replaceWith('' + _userdata.point_reputation + '');
              $('.sopoint').load('/u'+_userdata["user_id"]+' #field_id-13 .field_uneditable');  
//]]>
</script>
                  
</div>
<!-- END switch_user_logged_in -->
  
<div class="sidebar">
        
  <a href="http://vxf.vn/threads/tuyen-ban-quan-tri-cong-dong-xenforo-viet-nam-2015.22474/"><img src="http://i68.servimg.com/u/f68/17/57/29/64/tuyen_10.png" style="border: 0; width: 100%;"/></a>
            
</div>
  
  
  <div class="sidebar">
        
    <a href="https://cer.vn/"><img src="http://i68.servimg.com/u/f68/17/57/29/64/88559b10.png" style="width: 100%;"/></a>
  
</div>
  
<div class="sidebar" style="text-align:left">
  
  <h3>AI ĐANG ONLINE ?</h3>
<div class="clearfix"><div class="left">{TOTAL_USERS_ONLINE}</div> <a href="{U_VIEWONLINE}" rel="nofollow" class="viewonline right">{L_VIEW_COMPLETE_LIST}</a></div>
<div class="thin">{LOGGED_IN_USER_LIST}{L_CONNECTED_MEMBERS}</div>
<marquee onmouseout="this.start()" onmouseover="this.stop()" scrolldelay="25" truespeed="" loop="true" direction="left" scrollamount="2"><div>{GROUP_LEGEND}</div></marquee>
  
</div>
            
<div class="sidebar" style="text-align:left">


<ul class="Tinhte_XenTag_TagCloud cloud">
        
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level1"><a href="tags/">Á đù</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level1"><a href="tags/">Á đuuuu</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level1"><a href="tags/">Hú hù hu</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level2"><a href="tags/">À đu đú</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level1"><a href="tags/">Ú đà ú đa</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level1"><a href="tags/">Hà ha há</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level1"><a href="tags/">À đu đù</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level2"><a href="tags/">Đu đủ</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level2"><a href="tags/">Hahe hehe</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level2"><a href="tags/">Ú ú đà đà</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level1"><a href="tags/">Á đù hehe</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level3"><a href="tags/">Á à á a</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level3"><a href="tags/">Add đù</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level3"><a href="tags/">Hía hía</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level2"><a href="tags/">A akaka</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level2"><a href="tags/">Test cái</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level3"><a href="tags/">Úi ui</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level1"><a href="tags/">Hí hì hi</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level2"><a href="tags/">Cờ hó</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level2"><a href="tags/">Dân chơi</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level2"><a href="tags/">VPS</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level3"><a href="tags/">Tao là tao</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level3"><a href="tags/">Hú hù hu</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level3"><a href="tags/">Gta</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level1"><a href="tags/">Forum</a></li>
            
        
    </ul>

  
</div>
  
  
  <div class="sidebar" style="text-align:left">
  
  <h3>THỐNG KÊ DIỄN ĐÀN</h3>
 <!-- BEGIN message_admin_index -->
 <!-- BEGIN message_admin_txt -->
 {message_admin_index.message_admin_txt.MES_TXT}
 <!-- END message_admin_txt -->
<!-- END message_admin_index -->
</div>
  
    <div class="sidebar" style="text-align:left">
  
  <h3>TEXT LINK</h3>
      + <a href="http://www.marry.vn/kinh-nghiem-cuoi/trang-diem-lam-dep/" title="Trang điểm cô dâu">Trang diem co dau</a><br/>
      + <a href="http://www.elleman.vn/" title="ELLE MAN">ELLE MAN</a><br/>
      + <a href="http://www.bepgiadinh.com/mon-ngon/" title="mon ngon">Mon Ngon</a><br/>
      + mua ban <a href="http://simsodepviettel.com/" title="sim so dep">sim so dep</a> giá rẻ 10 số<br/>
      + cách chọn <a href="http://xemboisim.vn/xem-phong-thuy-sim" title="sim so dep">sim phong thuy</a> chính xác<br/>
      + tổng đại lý sim <a href="http://muasimsodep.com.vn/" title="sim so dep">so dep</a> giá rẻ<br/>
      + chọn mua  <a href="http://www.simphongthuy.com.vn/xem-phong-thuy-cho-sim.html" title="phong thuy sim">phong thuy sim</a> hợp mệnh<br/>
      + thỏa sức chọn mua <a href="http://simsodepviettel.com/simgiare.htm" title="sim so dep gia re">sim so dep gia re</a><br/>
      + <a href="http://medonthan.net" title="Cộng đồng mẹ đơn thân lớn nhất Việt đẹp zai đẹp zai đẹp zai Nam">Mẹ đơn thân </a> <br/>
      + <a href="http://taigamemienphichodienthoai.net/" target="_blank" title="tải game miễn phí">tải game miễn phí</a><br/>
      + <a href="http://w88daily.com/" target="_blank" title="W88">W88</a><br/>
      + <a href="http://trochoi.pro" title="tai game">tai game</a><br/>
      + cho <a href="http://vaytinchap99.com" target="_blank"> vay tín chấp </a> ngân hàng<br/>
<span style="color: red;">+ Liên hệ quảng cáo 0902.974.686</span>
    
</div>
  
  </td></tr></tbody></table>



<!-- 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'" 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}


{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script>
    FB.init({
      appId      : {switch_fb_index_login.FACEBOOK_APP_ID},
      cookie     : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_fb_index_login -->


Index_box
Code:
<div class="pun-crumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
 <p class="crumbs"><a href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
 <!-- BEGIN tablehead -->
 <div class="main-head">
 <div class="page-title">{catrow.tablehead.L_FORUM}</div>
 </div>
 <div class="main-content">
 <table cellspacing="0" class="table">
 <tbody class="statused">
 <!-- END tablehead -->

 <!-- BEGIN forumrow -->
 <tr>
 <td class="tcl" style="padding-right: 0; padding-left: 60px;">
 <span class="status" style="margin-right: -32px; margin-left: -46px;">
 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
 </span>
 <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
 <br />
 {catrow.forumrow.FORUM_DESC}
 <!-- BEGIN switch_moderators_links -->
 <br />
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 <!-- END switch_moderators_links -->
 <div id="smallrum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
 <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
 </td>
 <td class="tcr" style="border-left: 0">
                            <!-- BEGIN avatar -->
                            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                            <!-- END avatar -->

 <div class="lastpost">
 <!-- BEGIN switch_topic_title -->
 <a style="font-weight:700" href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
 <!-- END switch_topic_title -->
 {catrow.forumrow.USER_LAST_POST}
 </div>
 </td>
 </tr>
 <!-- END forumrow -->

 <!-- BEGIN tablefoot -->
 </tbody>
 </table>
 </div>
 <!-- END tablefoot -->
<!-- END catrow -->
</div>

<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
 <ul>
 <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
 <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
 <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
 </ul>
 <!-- BEGIN switch_delete_cookies -->
 <p class="right">
 <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
 </p>
 <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->


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">
    FB.init({
      appId      : {switch_facebook_login.FACEBOOK_APP_ID},
      cookie     : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</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="footerLegal">
 <ul class="footerLinks">
 
 <li><a href="/#navigation" class="topLink">Lên đầu trang</a></li>
 <li><a href="http://gamethu.net" class="homeLink">Trang chủ</a></li>
 
 <li><a href="misc/contact" class="OverlayTrigger" data-overlayoptions="{"fixed":false}">Liên hệ</a></li>
 
 <li><a href="help/">Trợ giúp</a></li>
 
 </ul>
 <div class="pageWidth">
 <div class="pageContent">
 <a href="http://gamethu.vnexpress.net" target="_blank">Game Thủ.net</a><br>
 Chuyên mục giải trí của VnExpress.net. Game Thủ.net giữ bản quyền nội dung trên website này.<br>
©️ 2014 Game Thủ.net. Liên hệ tòa soạn: Tầng 5, Tòa nhà FPT Cầu Giấy, Phố Duy Tân, Phường Dịch Vọng Hậu, Quận Cầu Giấy, Hà Nội.<br>
Điện thoại: 04 7300 8899 ext 4517 - 4537. Liên hệ quảng cáo 04 7300 8888 ext 4570.5
 </div>
 </div>
</div>

Tags: #skin #forumotion #punbb
Search in: Skin Forumotion  Chủ đề: [Skin] Chia sẻ skin diễn đàn GameThu 2016 ver Punbb  Trả lời: 3  Xem: 1037
Demo:


Tải về: Click để tải về (mediafile)
Tags: #skin #punbb #đẹp #theme #beautiful #vi01239984564 #đơn-giản #blue #xanh
Search in: Skin Forumotion  Chủ đề: [Skin] Xanh đẹp đơn giản  Trả lời: 1  Xem: 1126

Demo ảnh



Hướng dẫn

ACP >> Display >> Colors >> CSS
Thay toàn bộ bằng code sau
Code:
::selection {
 background: none repeat scroll 0% 0% rgba(255, 0, 234, 1);
    color: #fff;

    }

    ::-webkit-selection {
  background: none repeat scroll 0% 0% rgba(255, 0, 234, 1);
    color: #fff;
    }
*::-moz-selection {
    background: none repeat scroll 0% 0% rgba(255, 0, 234, 1);
    color: #fff;
}
.contents {
overflow: initial!important;
}
body {
   background-color: #f9f9f9;
   font-size: 12px;
   font-family: Arial, Helvetica, sans-serif;
   color:#333333;   
}
#page-body {
    margin: 0!important
}
.pun {
margin: 0 auto;
padding: 0!important;
width: 100%;
}
a {
   color:#3b5998;
   text-decoration: none;   
}
a:hover {
   text-decoration: underline;   
}
.none {
   display: none;   
}
.center h3 a{color:#000!important}
.pic img {
display: block;
margin: 0 auto;
max-width: 310px;
min-width: 300px;
min-height: 200px;
}
/*footer*/
#pun-about ul li a {
color: #f9f9f9!important;
pointer-events: none;
}
#pun-about ul li {
color: #f9f9f9!important;
}
/*main-head*/

.reply #pun-qpost .main-head p.h2:before{font-size: 26px!important;content: "Trả lời của thành viên"}
.main .main-head {
position: relative;
background: transparent;
border-bottom: 1px solid #359bed;
line-height: 32px;
min-height: 33px;
padding: 0;
}
.main .main-head .h2 ,.main .main-head .page-title {
color: #359bed;
font-size: 26px;
text-shadow: 0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF;
font-weight: 300;
padding: 0;
}
.main .main-head > .page-title {
margin: 0;
}
/*NAVBAR*/
li.sub .hot {
background: url(http://i.imgur.com/SEmTduA.png) no-repeat;
display: inline-table;
height: 16px;
margin-left: -83px;
margin-top: -8px;
position: absolute;
width: 24px;
}

#nav {
   list-style: none;
   background-color:#3b5998;
   height:35px;
   box-shadow: 0 1px 5px #888888;
}

#nav li.sub{
   float: left;
}
#nav li.sub a{
   line-height: 35px;
   float: left;
   color:#ffffff;
   font-size:14px;
   padding: 0 15px;
   border-right: 1px solid #123682;
   border-left: 1px solid #4965a0;
}
#nav li.sub a.home {
   background:url(http://i.imgur.com/DIGTTgH.png) no-repeat center;
   height: 35px;
   width:15px;   
}
#nav li.sub a.home:hover {
   background:url(http://i.imgur.com/MkL3U6W.png) no-repeat center;
}
#nav li.sub a:hover {
   text-decoration: none;
   color:#cccccc;   
}

#nav li.upload {
   float: right;
}

#nav li.upload a {
margin-right: 3px;
top: 9px;
}
#nav li.upload a:hover{

}
#nav ul {
   list-style: none;
   display: none;
   position: absolute;
   z-index:3;
   margin-top: 35px;
   box-shadow: 0 1px 5px #888888;
}
#nav li:hover ul {
   display: block;   
}
#nav li.sub ul li {
   float: none;
   border: none;
}
#nav li.sub ul li a{
   display:block;
   background-color: #ffffff;
   border-left: none;
   border-right: none;
   border-bottom: 1px solid #dfdfdf;
   color: #666666;
   line-height: 25px;
   width:130px;
}
/*SEACH*/
#header .search{
   width:367px;
   height:38px;
   position: absolute;
   left: 265px;
   top:20px;   
}
#header .search .gsc-control-cse {
   background: none!important;
   padding: 0!important;
   border: none!important;
}
#header .search .gsc-input {
   background: none!important;
}
/*HEAD*/
.wauto {
   width:980px;
   margin: 0 auto;   
}

#header {
   position: relative;
   height:68px;
}
#header h1 a{
   font-size: 0;
   background:url(http://i.imgur.com/gCWiZJZ.png) no-repeat;
   width:172px;
   height:68px;
   display: inline-block;
}

/*butoon*/
.uibutton, .uibutton:visited {
-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.1), inset 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.1), inset 0 1px 0 #fff;
background-color: #eee;
background-image: linear-gradient(#f5f6f6,#e4e4e3);
border: 1px solid #999;
border-bottom-color: #888;
box-shadow: 0 1px 0 rgba(0,0,0,0.1), inset 0 1px 0 #fff;
color: #333;
cursor: pointer;
display: inline;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f6f6',EndColorStr='#e4e4e3');
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size: 11px;
font-style: normal;
font-variant: normal;
font-weight: bold;
line-height: normal;
margin: 0;
overflow: visible;
padding: .3em .7em .375em;
position: relative;
text-align: center;
text-decoration: none;
white-space: nowrap;
z-index: 1;
zoom: 1;
}

.uibutton:hover,
.uibutton:focus,
.uibutton:active,
.uibutton.active {
    border-color: #777 #777 #666;
   text-decoration: none;
}

.uibutton:active,
.uibutton.active {
    border-color: #aaa;
    background: #ddd;
    filter: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
/*sider trai phai*/
#main {
    position: relative;
    margin: 10px 0px;
}
#main .m-top {
    position: relative;
    color: #3B5998;
    border-bottom: 1px dotted #DFDFDF;
    margin-bottom: 10px;
    padding-bottom: 8px;
}
#main .m-left {
   float: left;
   width:680px;
        margin-left: 1px;
}

#main-contents {
   width:670px;
   background-color: #ffffff;
   box-shadow: 0 1px 5px #888888;
}

#main .m-right {
   float: right;
   width:295px;
        margin-right: 1px;
}



.contents .items{
   background: #ffffff;
   float: left;
   width: 330px;
   margin-right:10px;
   margin-bottom:10px;
   box-shadow: 0 1px 3px #D6D6D6;
}
.contents .items:hover {
   box-shadow: 0 1px 5px #888888;
}
.contents .items .top {
   position: relative;
   padding: 8px 10px;
   border-bottom: 1px solid #dfdfdf;
   color:#9B9B9B;
   font-size:11px;
}
.contents .items .top div.like {
   position: absolute;
   right:10px;
   top: 10px;   
}

.contents .items .center {
   padding: 10px;
   position: relative;
}
.contents .items .center h3 {
   font-size: 20px;
   margin-bottom: 10px;   
}
.contents .items .center img.thumb {
   max-width:310px;
   margin: 0 auto 0;
   display: block;
}
.contents .items .center img.vplay {
    display: block;
    margin: 0 auto -65px;
    position: relative;
    top: -125px;
}
.contents .items .center p {
   margin-top: 8px;   
}
.contents .items .pic {
   position: relative;   
}
.contents .items .bot {
    top: 15px;
    right: 0;
    position: absolute;
}
.ffffff {
   background-color: #ffffff;
   box-shadow: 0 1px 5px #888888;
}
.mrbottom {
    margin-bottom: 10px;
}
.box .html {
    padding: 10px;
}
.box {
   position: relative;
   background:url(http://i.imgur.com/SdcMkDe.png) repeat-x;
   padding-top: 6px;   
}
.box .h3-right {
   position: absolute;
   right:10px;
   top: 10px;   
}
.box h3{
   border-bottom: 1px solid #dfdfdf;
   font-size:20px;
   line-height: 35px;
   padding-left: 15px;
}
.box h2{
   font-size:20px;
}

.box .stats {
    font-size: 14px;
    font-weight: bold;
    margin: 5px 0;
}
.box .stats .comments {
    margin-left: 10px;
}
.box div.source {
   font-weight:bold;
   font-size:14px;
    margin: 5px 0;
}
.box div.source .text {
    font-weight: normal;
}
.box .stats .number {
    color: #3B5998;
    font-size: 16px;
}
.box .stats .text {
    font-weight: normal;
}
.box .stats a {
    font-weight: normal;
}
div.box .likeButton {
    background-color: #F4F4F4;
    border-bottom: 1px solid #DDDDDD;
    border-top: 1px solid #DDDDDD;
    height: 25px;
    margin: 0 -10px 10px;
    padding: 10px 10px 5px;
    width: 650px;
    z-index: 2;
}
div.box .likeButtonVoting {
    background-color: #FFFF99;
}
div.box .likeButton .text {
    color: #3B5998;
    float: left;
    font-size: 15px;
    font-weight: bold;
    line-height: 20px;
    padding-right: 5px;
}


/*top*/
div.topUsers {
}
div.topUsers .item {
    float: left;
    margin-bottom: 8px;
    margin-right: 5px;
    position: relative;
    width: 130px;
}
div.topUsers .itemWide {
    width: 215px;
}
div.topUsers .item img {
    margin-left: -37px;
    float: left;
    height: 35px;
    width: 35px;
}
div.topUsers .item .info {
    margin-left: 38px;
}
div.topUsers .item a:hover{
   text-decoration: none;
}
div.topUsers .name {
    font-weight: bold;
    height: 15px;
    margin-bottom: 3px;
    overflow: hidden;
}
div.topUsers .item a:hover .name {
   color:#FF3300
}
div.topUsers span.likes {
    color: #333333;
   background: url("http://i.imgur.com/AwvX1zE.png") no-repeat scroll 0 2px transparent;
    padding-left: 13px;
}
h3.topUsers {
    background: url("../img/smile_icon.png") no-repeat scroll 5px 10px transparent;
    padding-left: 25px;
}
div.topUsers span.num {
   position: absolute;
   left: -5px;
   top: -5px;
   background-color: #000;
   display:inline-block;
   float: left;
   width: 15px;
   height:15px;
   text-align: center;
   display: inline-block;
   color:#ffffff;   
}

div.topUsers span.num.number_0 {
   background-color: #009DDC;
}
div.topUsers span.num.number_1 {
   background-color: #47AA42;
}
div.topUsers span.num.number_2 {
   background-color: #F57B20;
}
/*sider top tabs phải*/
div.tab .uibutton-group {
position: absolute;
top: 12px;
right: 5px;
}
.uibutton-group > .uibutton:first-child, .uibutton-group li:first-child .uibutton {
margin-left: 0;
}
/*login*/
#_Login{
   position: absolute;
   right: 0;
   top: 20px;
}

#_Login .login {
    background: url("http://i.imgur.com/DuVolAK.png") no-repeat scroll 5px 5px #3B5998;
    color: #FFFFFF;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 8px 0 33px;
    vertical-align: middle;
}
#_Login .login:hover,
#_Login .login.act {
   background-color: #5977B6;
   text-decoration: none;
}

#_Login .tab_login {
    background-color: #5977B6;
    position: absolute;
    right: 0;
    width: 150px;
    z-index: 2;
   display: none;
}

#_Login .tab_login > li {
    list-style: none outside none;
}
#_Login .tab_login a {
    color: #FFFFFF;
    display: block;
    padding: 5px 15px;
}
#_Login .tab_login a:hover {
   background-color: #3B5998;
   text-decoration: none;   
}

#_Login .login.btn_fb {
   position: relative;
   padding:0;
   width:30px;
   background-image:url(http://www.ngamvn.com/ngamvnTemp/img/icon-user.png);
   cursor:pointer;
        margin-right: 5px;
}
#_Login .login.btn_fb.msg_1 {
   background-position: 5px 2px;
}
#_Login .login.btn_fb.msg_2 {
   background-position: 5px -33px;
}
#_Login .login.btn_fb.msg_3 {
   background-position: 5px -103px;
}

#_Login .login.btn_fb span {
   background-color:#FF0000;
   height:15px;
   font-size:11px;
   position: absolute;
   right:-2px;
   top:-3px;
   display: inline-block;
   line-height: normal;
   padding: 0 3px;   
}
#_Login .box_fb{
   position: absolute;
   right:0;
   top: 40px;
   z-index:2;
   width:400px;
   background-color: #ffffff;
   border: 1px solid rgba(100, 100, 100, 0.4);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
   display: none;
}
#_Login .box_fb span.arrow {
    background: url("http://www.ngamvn.com/ngamvnTemp/img/arrow.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: inline-block;
    height: 8px;
    margin-left: 193px;
    margin-top: -8px;
    position: absolute;
    width: 11px;
    z-index: 3;
}
#_Login .box_fb span.arrow.m2 {
   margin-left: 226px;
}
#_Login .box_fb span.arrow.m3 {
   margin-left: 258px;
}

#_Login .box_fb h3 {
   color: #333333;
   font-size:11px;
   border-bottom: 1px solid rgba(100, 100, 100, 0.4);
   padding: 5px 10px;   
}
#_Login .box_fb .contents li{
   border-bottom: 1px solid rgba(100, 100, 100, 0.4);
   padding: 10px;
   list-style: none;
   position: relative;
}
#_Login .box_fb .contents li a:hover {
   text-decoration: none;   
}

#_Login .box_fb .contents li .img {
    float: left;
    width: 50px;
}
#_Login .box_fb .contents li .img > img {
    width: 40px;
}
#_Login .box_fb .contents li .info2 {
    float: left;
    width: 200px;
}
#_Login .box_fb .contents li .info2 a {
   font-weight: bold;
   line-height: 40px;
   display: inline-block;
}
#_Login .box_fb .contents li .action {
    float: right;
   padding-top: 10px;
}
#_Login .box_fb .contents li.act {
   background-color: #E7E7E7;
}

#_Login .box_fb .contents li.nodata {
   height:40px;
   text-align: center;
   font-size:11px;
   border-bottom:none;
   line-height:40px;
}
#_Login .box_fb .contents li.ajax,
#msg_n_page.ajax {
   background:url(http://www.ngamvn.com/ngamvnTemp/img/indicator.gif) no-repeat 6px 9px;
   padding-left:25px;
   font-style:italic;
}
#_Login .box_fb .contents li .info {
   float:right;
   width:330px;
}
#_Login .box_fb .contents li .info strong{
   color: #333333;
}
#_Login .box_fb .contents li .info span{
   color: #666666;
   font-size:11px;
}
#_Login .box_fb .contents li .info span.time {
   font-style: italic;   
}

#_Login .box_fb .contents {
   max-height: 305px;
}
/*seditor*/
.sceditor-group a {
cursor:pointer!important;
border:1px solid #999!important;
background:#FFF url(http://i38.servimg.com/u/f38/16/18/15/10/untitl27.png)repeat-x bottom left!important;
box-shadow:0 1px 0 #dedade!important;
margin-left:-1px;
border-radius:0;
-moz-border-radius:0;
padding:0px 3px!important;
}

a.sceditor-button-faspoiler div {
background:#FFF url(http://i35.servimg.com/u/f35/16/18/15/10/183.png)no-repeat center!important;
border:1px solid #ccc!important;
height:9px!important;
width:9px!important;
padding:3px!important;
}

.sceditor-container {
border:1px solid #bdbdbd!important;
border-radius:0!important;
-moz-border-radius:0!important;
}

.sceditor-toolbar {
text-align:left;
border-bottom:1px solid #cecfce!important;
background:#f2f2f2!important;
}

.sceditor-group a:active {
background:#dedede!important;
box-shadow:inset 0 1px 1px #b0b0b0!important;
}

.sceditor-group a.hover,.sceditor-group a.active {
background:#dedede!important;
box-shadow:inset 0 0 0 #b0b0b0!important;
}

.sceditor-toolbar .sceditor-group {
background:none!important;
border:0!important;
}
.sceditor-button-date,.sceditor-button-time{display:none!important}


/*button*/
input.button2:hover,input[type=button],.pun input[type=submit],input[type=reset] {
cursor:pointer;
border:1px solid #999;
border-bottom:1px solid rgb(131,131,131);
color:#000;
background-color:#FFF;
background-image:url(http://i38.servimg.com/u/f38/16/18/15/10/untitl27.png);
background-repeat:repeat-x;
background-position:bottom left;
font:bold 11px Tahoma!important;
box-shadow: 0px 1px 0px #dedade;
height:23px!important;
padding:3px 5px 5px 5px!important;
}

input.button2,select{padding:3px 5px;}
.pun input[name=login],.pun input[name=submit],.pun input.mainoption,.pun input[name=post] {
box-shadow: 0px 1px 0px #dedade;
border:1px solid rgb(32,100,202);
color:#fff; 
background-color:rgb(87,145,237);
background-image:url(http://i57.servimg.com/u/f57/16/18/15/10/1189.png);
background-position:top left;
}

.pun input[type=reset]:active,input[type=submit]:active {
background-color:#dedede;
background-image:none;
box-shadow: inset 0 1px 1px #b0b0b0;
}

input[name=submit]:active,input.button2:active,.pun input[name=login]:active,input.mainoption:active,input[name=post]:active {
background:rgb(69,130,230) url();
box-shadow: inset 0 0px 0px #b0b0b0;
}

.pun-crumbs {
display:none;
}

#pun-visit {margin:5px 0px;color:rgb(128,128,128);font:bold 12px Arial;display:none}


/*xem them con nhieu lam*/
.uibutton.special {
    border-color: #3b6e22 #3b6e22 #2c5115;
    color: #fff!important;
    background-color: #69a74e;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#75ae5c), to(#67a54b));
    background-image: -moz-linear-gradient(#75ae5c, #67a54b);
    background-image: -o-linear-gradient(#75ae5c, #67a54b);
    background-image: linear-gradient(#75ae5c, #67a54b);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#75ae5c', EndColorStr='#67a54b'); /* for IE 6 - 9 */
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #98c286;
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #98c286;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 #98c286;
    padding: 6px;
}

.uibutton.special:active {
    border-color: #3b6e22;
    background: #609946;
    filter: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.uibutton.large {
font-size: 13px;
}
#pages a {
display: block;
width: 655px;
}
/*pass*/
#username_reg,#email,#password_reg,#password,#subject,#username {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
width:200px;
margin-bottom:4px;
margin-top:-4px;
border:1px solid #a6a6a6;
border-top:1px solid #858583;
border-left:1px solid #858583;
padding:5px 4px 5px 28px;
}

#password_reg,#password {
float:left;
background:#FFF url(http://i48.servimg.com/u/f48/16/18/15/10/login_12.jpg) no-repeat 2px center;
}

#username_reg,#username {
float:left;
background:#FFF url(http://i48.servimg.com/u/f48/16/18/15/10/login_11.jpg) no-repeat 2px center;
}

#pwd_bad:before {
content:"Xin vui lòng chọn mật khẩu với độ dài ít nhất là 6 kí tự. Mật khẩu phải chứa ít nhất 1 ký tự (a-z) và 1 ký tự số .";
font:11px Arial;
color:red;
margin-top:-7px;
display:inline-block;
}

#pwd_bad {
text-align:left;
 
width:300px;
font-size:0;
padding-left:30px;
background:url(http://i48.servimg.com/u/f48/14/28/30/23/regwro10.png)no-repeat scroll left;
margin-left:-40px;
margin-top:-2px;
}
#pwd_middle:before,#pwd_good:before {
content:"Hợp lệ có thể dùng ";
font:11px Arial;
color:green;
}

#pwd_middle,#pwd_good {
text-align:left;
width:300px;
font-size:0;
padding-left:25px;
margin-left:-40px;
margin-top:-2px;
background:url(http://i48.servimg.com/u/f48/14/28/30/23/regrig10.png)no-repeat scroll left;
}



.subtitle ,.subtitle  a{
    color: #359BED!important;
    font-size: 26px;
    font-weight: 300;
    text-shadow: 0px 0px 2px #FFF, 0px 0px 2px #FFF, 0px 0px 2px #FFF, 0px 0px 2px #FFF;
    padding: 0px;
}
.main-head .h3{color: #359BED!important;font-weight: 700}
/*drop down menu*/
.menubit {
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
-webkit-background-clip: padding-box;
-webkit-box-shadow: 0 3px 8px rgba(0,0,0,.3);
-webkit-transition: all .25s ease;
background-color: #fff;
border: 1px solid rgba(0,0,0,.15);
margin-top: -10px;
opacity: 0;
padding: 5px 0;
position: absolute;
transition: all .25s ease;
visibility: hidden;
width: 145px;
margin-left: -105px;
z-index: 999;
list-style: none;
}
ul.menubit li.submenubit{
   border: solid #fff;
   border-width: 1px 0;
   color: #141823 !important;
   font-family: 'Helvetica Neue', Helvetica, Arial, 'lucida grande',tahoma,verdana,arial,sans-serif;
   font-size: 12px;
   -webkit-font-smoothing: antialiased;
   font-weight: normal;
   line-height: 22px;
   padding: 0 12px;
}
ul.menubit li.submenubit:hover{background-color:#42599e;border-color:#30497a;color:#fff !important;}
ul.menubit li.submenubit a{color: #141823 !important;}
ul.menubit li.submenubit a:hover, ul.menubit li.submenubit:hover a{color: #fff !important;}
ul.menubit li.gach {
border-bottom: 1px solid #e9eaed;
margin: 0px;
}
.submenu:hover .menubit, .submenu .menubit:hover{
   visibility: visible;
   opacity: 1;
   margin-top: 5px;
}


ACP >> Display >> QLTT
Thay từng template tương ứng
Index_body
Code:
{JAVASCRIPT}
<div style="height:20px"></div>
<div><!-- BEGIN giefmod_index1 -->{giefmod_index1.MODVAR}<!-- END giefmod_index1 --></div>

{CHATBOX_TOP}


{BOARD_INDEX}



{CHATBOX_BOTTOM}



{AUTO_DST}



Index_box
Code:
<span class="clear"></span>


Overall_footer_begin
Code:
<!-- BEGIN html_validation -->
<div>
   <div>
      <div>
         <div>
            <div>
               <div>
                  <div>
                     <div>
<!-- END html_validation -->
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div id="{ID_RIGHT}">
            <!-- BEGIN giefmod_index2 -->
            {giefmod_index2.MODVAR}
            <!-- BEGIN saut -->
            <div style="height:{SPACE_ROW}px"></div>
            <!-- END saut -->
            <!-- END giefmod_index2 -->
         </div>
      </div>
   </div>
</div>
<div id="pun-foot">
   <div id="pun-about" class="clearfix" style=" background: 0; border: 0; ">
      <form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}" id="qjump">
      
      </form>
      <ul>
         <li>
<!-- BEGIN html_validation -->
         </li>
      </ul>
   </div>
</div>
<!-- END html_validation -->

Tags: #skin #punbb
Search in: Skin Forumotion  Chủ đề: [Skin] Chia sẻ skin Ngamvn version Punbb.  Trả lời: 16  Xem: 1315

Demo ảnh



Demo online

Xem tại đây: http://huudang2.forumvi.com/

Hướng dẫn

ACP >> Display >> Color >> CSS
Thay toàn bộ bằng code sau
Code:
/* memberlist */
div.borderwrap .member-list{padding:0}
.member{border-width:3px;margin-bottom:0;margin-right:0;width:284px}
#profile-advanced-details .message-header,.avatar,.mini-avatar{border:0!important}
.member p{font-size:.85em;overflow:hidden}
.member:hover p{overflow:auto}
.member-header{background:#F8F8F8;position:relative;height:33px;margin-bottom:10px;padding-top:12px}
.member .popmenubutton-new-out a{background-color:transparent;border:0 none;padding-left:50px}
.member-list .popmenubutton .mini-avatar {
  height: auto;
width: auto;
    position: absolute;
    top: -4px;
    left: -4px;
}
.member-list .popmenubutton .mini-avatar img{padding:2px;border:1px solid #EEE}
.search-filter,.search-filter select{font-size:inherit}
.search-filter dt{margin-top:7px;color:#888}
/* profile page */
#profile-advanced-right .module,#new-message-link,.new-message.bottom,#profile-advanced-add br,.message-footer{display:none}
#profile-advanced-right .module:first-child,#profile-advanced-add + .module{display:block;position:relative;margin:0;border:0;width:300px;height:240px;overflow:hidden}
#profile-advanced-left{margin-right:0;margin-left:300px}
#profile-advanced-right{float:left;width:300px;height:240px;position:relative;overflow:hidden}
#profile-advanced-layout{float:right;margin-right:0;margin-left:-304px;position:relative;margin-bottom:30px;background:#0F61A1}
#profile-advanced-layout #new-message{padding:0;position:absolute;left:1px;top:240px}
#profile-advanced-layout ul.privmsg{min-height:220px;width:300px;padding:0}
#profile-advanced-layout ul.privmsg li{display:block;float:none;width:300px;height:44px;line-height:44px;background:#FFF;color:inherit}
#profile-advanced-layout ul.privmsg li div.tabitem{padding:0 20px}
#profile-advanced-layout ul.privmsg li a{margin:0px -19px 0px -20px;padding:0 20px;background:#246FAF;color:#FFF}
#profile-advanced-right .module:first-child .box-content.profile,#profile-advanced-add + .module .box-content.profile{height:210px;background:#0F61A1;font:0/0 a}
#profile-advanced-layout ul.privmsg,#profile-advanced-details,#profile-advanced-details .message-footer li,.posting-options{margin:0}
#profile-advanced-add{position:absolute;width:300px;padding:0;margin:0;left:0;top:-30px;z-index:50;background:#3498db;transition:top .3s;-webkit-transition:top .3s}
#profile-advanced-add a{display:block;width:150px;float:left;height:30px;text-indent:-9999px;background:#2ecc71 url(http://i39.servimg.com/u/f39/18/83/32/63/14085310.png) no-repeat center center;overflow:hidden;text-align:left;position:absolute;left:0;top:0}
#profile-advanced-add a[href*="foe="]{background-color:#e74c3c;background-image:url(http://i39.servimg.com/u/f39/18/83/32/63/14085311.png);left:150px}
#profile-advanced-add a[href*="remove="]{background-color:#9b59b6;width:300px;background-image:url(http://i39.servimg.com/u/f39/18/83/32/63/14085312.png)}
#profile-advanced-add a:hover{background-position:15px 50%;text-indent:0;padding-left:50px;width:300px;z-index:50;line-height:30px;color:#FFF;left:0}
#profile-advanced-add:after{clear:both!important;content:".";display:block;height:0;visibility:hidden}
#profile-advanced-right .box-content.profile img:first-child{height:156px;max-width:290px;padding:4px;margin-bottom:8px}
#profile-advanced-right .box-content.profile img{background:#FFF;padding:4px 75px}
#profile-advanced-right .module .maintitle{padding:0 5px;height:30px;line-height:30px;background:#0F61A1;text-align:center}
#profile-advanced-right .maintitle,#profile-advanced-details .maintitle{text-shadow:0 0 1px #FFF,0 0 1px #FFF,0 0 1px #FFF}
#profile-advanced-right:hover #profile-advanced-add{top:0}
#profile-advanced-details .maintitle{padding:0 10px;height:30px;line-height:30px}
#profile-advanced-details .box-content.profile{min-height:430px;padding:5px 15px}
#profile-advanced-details ol{padding:0}
#profile-advanced-details .message-block{border:0;margin:10px 0 20px 60px;position:relative;border-left:1px solid #666}
.message-text{padding:5px;white-space:pre-wrap;word-break:break-all;word-wrap:break-word}
.message-block:before,.message-block:after{content:"";display:block;width:0;height:0;border-style:solid;border-width:6px 8px 6px 0;border-color:transparent #444 transparent transparent;position:absolute;top:8px;left:-8px}
.message-block:after{left:-6px;border-color:transparent #FFF transparent transparent}
.message-header{font-size:0;height:21px;line-height:13px}
.message-date{font-size:12px}
#profile-advanced-details .message-footer{position:absolute;height:21px;right:0;top:0;background:#FFF;padding:0}
#profile-advanced-details .message-footer li:after{content:initial}
#profile-advanced-details .message-footer li a{text-decoration:none;font-size:11px;display:inline-block;background:#2980b9;color:#FFF;padding:0 7px;margin-right:0;float:right;margin-left:5px;height:20px;line-height:20px}
.message-block:hover .message-footer{display:block}
.message-textarea{width:calc(100% - 8px);margin:0 0 0 8px}
#profile-advanced-details .message-editor .message-block{border-left-color:red}
.message-editor .message-block:before{border-color:transparent red transparent transparent}
#profile-advanced-details .message-newMess .message-block{border-left-color:orange}
.message-newMess .message-block:before{border-color:transparent orange transparent transparent}
#profile-advanced-details dl{width:100%;padding:0}
/* inbox */
th.select-items {
    width: 7%;
}
.posting-options + ul.privmsg{float:none;margin:5px 0 20px}
.posting-options + ul.privmsg li{width:25%;text-align:center;margin:0;height:100px;line-height:100px}
.posting-options + ul.privmsg li a{color:#333;display:block;padding:20px 0 0;height:100px;margin:-20px 0 0;color:#FFF}
.posting-options + ul.privmsg li div.tabitem{padding:20px 0 0;height:100px;background:url(http://i83.servimg.com/u/f83/16/58/89/73/read_m10.png) no-repeat center 20px #FFF;color:#444}
.posting-options + ul.privmsg li:nth-child(2) div.tabitem{background-image:url(http://i83.servimg.com/u/f83/16/58/89/73/reply10.png)}
.posting-options + ul.privmsg li:nth-child(3) div.tabitem{background-image:url(http://i83.servimg.com/u/f83/16/58/89/73/new_po10.png)}
.posting-options + ul.privmsg li:nth-child(4) div.tabitem{background-image:url(http://i83.servimg.com/u/f83/16/58/89/73/save_a10.png)}
.posting-options + ul.privmsg li div.tabitem a{background:url(http://i39.servimg.com/u/f39/18/59/49/93/read_m10.png) no-repeat center 20px #0F61A1}
.posting-options + ul.privmsg li:nth-child(2) div.tabitem a{background-image:url(http://i39.servimg.com/u/f39/18/59/49/93/reply110.png)}
.posting-options + ul.privmsg li:nth-child(3) div.tabitem a{background-image:url(http://i39.servimg.com/u/f39/18/59/49/93/new_po10.png)}
.posting-options + ul.privmsg li:nth-child(4) div.tabitem a{background-image:url(http://i39.servimg.com/u/f39/18/59/49/93/save_a10.png)}
#profile-advanced-layout ul.privmsg li a:hover,#profile-advanced-details .message-footer li a:hover,.posting-options + ul.privmsg li div.tabitem a:hover{background-color:#444!important}
/* fb_Vote - DEVs.forumvi.com */
.vote-Zzbaivong, .vote-Zzbaivong *,.vote-Zzbaivong *:before,.vote-Zzbaivong *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.vote-Zzbaivong{float:left;position:relative;text-align:left;white-space:nowrap}
.vote-plus-post,.vote-minus-post{z-index:10;position:absolute;top:32px;left:0;display:none;width:250px;background:#FFF;border:1px solid #F2F2F2;box-shadow:4px 4px 7px 0 #999;padding:5px}
.vote-minus-post{left:120px}
.vote-note{height:20px;line-height:20px;font-size:11px;background:#ffffd3;border:1px solid #F7EB93;margin-bottom:2px;padding:0 5px}
.vote-mess{width:200px;resize:vertical;min-height:40px;height:40px}
.vote-Zzbaivong .vote-send{width:36px;margin-top:0!important;margin-left:2px;cursor:pointer;text-align:center;vertical-align:top;height:40px;background:#0085FF;border:1px #87CEEB;color:#FFF}
.vote-plus-post:before,.vote-minus-post:before{content:'';display:inline-block;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #E2E2E2;position:absolute;left:10px;width:10px;right:-10px;top:-10px}
.vote-plus-post:after,.vote-minus-post:after{content:'';display:inline-block;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:9px solid #fff;position:absolute;left:11px;right:-9px;width:9px;top:-9px}
.vote-plus{background:#deeaf7;border:1px solid #C8D7EC;color:#5089BE!important;font-family:sans-serif;border-radius:2px;display:inline-block;padding:6px 15px}
.vote-plus:hover{border-color:#6A9AD6}
.vote-plus[href="javascript:;"]{color:#666!important;background-color:#DDD;cursor:no-drop;border-color:#CCC}
.vote-time{position:relative;border-radius:2px;display:inline-block;border:1px solid #D8D7D7;margin:auto 5px;padding:6px}
.vote-time:before{content:'';display:inline-block;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid #CCC;position:absolute;left:-6px;width:6px;top:8px}
.vote-time:after{content:'';display:inline-block;border-bottom:5px solid transparent;border-top:5px solid transparent;border-right:5px solid #fff;position:absolute;left:-5px;width:5px;top:9px}
.vote-minus{margin-left:20px;color:#666!important}
.vote-minus:hover{color:red!important}
.vote-minus[href="javascript:;"]{color:#C5C5C5!important;cursor:no-drop}
/* Edit profile */
.box-content.profile{background-color:#fff}
.ipbform2 dl dd textarea.inputbox{background-color:transparent}
.borderwrap .subtitle{background-color:#F5F5F5;border-bottom:1px solid #ddd}
.ipbform2 dl dd{background-color:#fff;margin-left:0}
.formbuttonrow{background-color:#fff}
ul.privmsg li{background-color:#246FAF}
ul.privmsg{margin-bottom:0;margin-left:0}
ul.privmsg li a{background-color:#fff}
/* Quote - Spoiler - Hide - Code */
blockquote cite,.codebox dt{font-size:13px;padding:8px;border-bottom:2px solid #FFF;background-color:#EFF2F7;background-image:none}
blockquote,.codebox dd{background-color:#EFF2F7;border:0 none;margin:0}
dl.codebox{margin:0}
.spoiler dt{cursor:pointer;padding:8px;border-bottom:2px solid #FFF;background-color:#EFF2F7;background-image:none;font-size:13px}
.spoiler{border:0 none;margin:0}
/* Post */
div.sceditor-toolbar{background:#EFF2F7 !important;border-radius:0!important;text-align:center;border-bottom:1px solid #ddd!important}
div.sceditor-group{background:0!important;border-bottom:0!important;margin:0!important}
.qreply{background-color:0;border:0;margin:0 auto 1em;padding:0;background:0}
/* Số trang */
div.pagination a.goto{padding:7px 15px 7px 6px;display:inline-block;background-color:transparent;border-radius:3px}
div.pagination a{padding:7px 10px;background-color:transparent;border-radius:3px;color:#1062A1}
div.pagination b{padding:7px 10px;background-color:#EFF2F7!important;border-radius:3px;color:#1062A1}
div.pagination{color:#fff}
div.pagination a.goto:hover,div.pagination a:hover{background-color:#EFF2F7!important}
/* View */
.postprofile{margin-left:-9.6em;width:9.6em;border-radius:3px}
.post-container{background-color:#fff;margin-left:9.6em;padding-bottom:10px;padding-top:10px}
.postprofile-details{margin:0}
.postava img{padding:0;border:medium none;border-bottom-left-radius:0;border-bottom-right-radius:0;width:120px;height:120px;margin:2px;border-radius:3px}
.post .post-header{display:none}
.postprofile{background-color:#EFF2F7}
.post{background-color:#fff;border-top:1px solid #ddd;border-bottom:0}
.post-footer{display:inline}
.post-entry{margin:0 0 0 1em;min-height:100px}
.userinfo{padding:5px 7px}
.hienthiz{float:right}
.usertext{padding:6px;border-bottom:1px solid #FFF;text-align:center}
#topicmenu-options{float:none;text-align:center}
.titlebar h1{font-size:18pt;color:#246FAF;padding:20px 0;overflow:hidden;font-weight:300;text-align:center}
.post-footer ul.misc-icons{padding:7px 6px}
.vote {
display:none
}
/* Menu mem */
#logoBlock .navTabs{float:right}
.navTabs .visitorTabs{float:right}
.Popup .PopupControl,.Popup.PopupContainerControl{display:inline-block;cursor:pointer}
.navTabs .navTab.PopupOpen{background:transparent none repeat scroll 0% 0%}
.Popup .PopupControl.PopupOpen,.Popup.PopupContainerControl.PopupOpen{color:#32A34F;border-radius:3px 3px 0 0}
#logoBlock .navTabs .visitorTabs .navLink{padding:0 10px;height:30px;line-height:30px}
.Popup .arrowWidget{background:transparent url("http://i68.servimg.com/u/f68/17/57/29/64/xenfor10.png") no-repeat scroll -64px 0;margin-top:-2px;margin-left:2px;display:inline-block;vertical-align:middle;width:13px;height:14px}
#showuser:hover #AccountMenu{display:block!important}
#showinbox:hover #ConversationsMenu{display:block!important}
#showuser:hover .arrowWidget{background-position:-48px 0}
#showinbox:hover .arrowWidget{background-position:-48px 0}
/* Drop menu */
#AccountMenu,.Menu.navPopup{margin-top:8px;text-transform:none;text-align:left}
.navPopup{width:260px}
.Menu .menuHeader h3{font-size:12pt}
.navPopup .listPlaceholder{max-height:350px;overflow:auto}
.navPopup .sectionFooter .floatLink{float:right}
#AccountMenu{width:274px}
.Menu{font-size:11px;margin-top:1px;border-width:5px 1px 1px;border-style:solid;border-color:#0F61A1;-moz-border-top-colors:none;-moz-border-right-colors:none;-moz-border-bottom-colors:none;-moz-border-left-colors:none;border-image:none;overflow:hidden;box-shadow:0 5px 5px rgba(0,0,0,0.5);min-width:200px;position:absolute;z-index:999;display:none}
#AccountMenu .menuHeader{position:relative}
.Menu .primaryContent{background-color:#FFF}
.Menu .menuHeader{overflow:hidden}
.primaryContent{background-color:#FFF;padding:10px;border-bottom:1px solid #EFF2F7}
#AccountMenu .menuHeader .avatar{float:left;margin-right:10px;width:96px;height:96px}
.avatardrop img {
    width: 96px;
    height: 96px;
}
.avatar.plainImage img,.avatar.plainImage .img{border:medium none;border-radius:0;padding:0;background-position:left top}
.Menu .menuHeader h3{font-size:15pt}
.Menu .menuHeader .muted{font-size:11px}
#AccountMenu .menuHeader .links .fl{position:absolute;bottom:10px;left:116px}
#AccountMenu .menuColumns{overflow:hidden;padding:2px}
.Menu .secondaryContent{background-color:#FFF}
.secondaryContent{background-color:#FFF;padding:10px;border-bottom:1px solid #EFF2F7}
#AccountMenu .menuColumns ul{float:left;padding:0;max-height:none;overflow:hidden}
.Menu .blockLinksList{max-height:400px;overflow:auto}
.blockLinksList{font-size:13px;padding:2px}
#AccountMenu .menuColumns a,#AccountMenu .menuColumns label{width:115px}
.blockLinksList a,.blockLinksList label{color:#0F61A1;padding:5px 10px;border-radius:3px;display:block;outline:0 none}
#AccountMenu .menuColumns{overflow:hidden;padding:2px}
.Menu .sectionFooter{background-color:#EFF2F7}
.sectionFooter{overflow:hidden;font-size:11px;color:#246FAF;background-color:#EFF2F7;padding:4px 10px;line-height:16px}
#AccountMenu .statusPoster textarea{width:245px;margin:0;resize:vertical;overflow:hidden}
textarea.textCtrl.Elastic{max-height:300px}
/* Box */
table.ipbtable .forum-name a {
    font-size: 16px;
}
.boxtp {
    font-size: 14px;
}
table.ipbtable span.status {
    margin-top: 3px;
}
.lastpost-avatar {
    margin-right: 5px;
    margin-top: -2px;
    padding: 2px;
    border: 1px solid #246FAF;
    border-radius: 5px;
  margin-bottom: -2px;
}
.lastpost-avatar img {
    border-radius: 3px;
    height: 32px;
    width: 32px;
}
div.maintitle{color:#FFF;font-weight:500;background-color:#246FAF;padding:10px;border-top-left-radius:3px;border-top-right-radius:3px;min-height:6px}
.row1,.row2{background:#fff !important;border-bottom:1px solid #EFF2F7!important;vertical-align:middle !important}
table.ipbtable td.icon{width:500px}
.forum-desc{display:none}
.stat4r{color:#888;font-size:12px;padding-right:10px}
span.stat4r > br:nth-child(3){display:none}
span.stat4r > strong{float:left;margin-right:5px}
div.maintitle .contract,div.maintitle .expand{background:0;margin-right:13px;margin-top:-3px}
.PanelScroller .scrollContainer,.PanelScrollerOff .panel{background-color:#FFF;padding:3px;margin-bottom:10px;border-radius:3px;font-size:13pt}
.PanelScroller .PanelContainer{position:relative;clear:both;width:100%;overflow:auto}
.hasJs .PanelScroller .Panels{position:absolute}
.PanelScroller .Panels{clear:both;margin:0;padding:0}
.PanelScroller .panel,.PanelScrollerOff .panel{overflow:hidden;position:relative;padding:0 !important;background:#EFF2F7 url("http://i68.servimg.com/u/f68/17/57/29/64/catego10.png") repeat-x scroll center top}
.PanelScroller .panel .noticeContent,.PanelScrollerOff .panel .noticeContent{padding:10px;color:#ED1B24}
.DismissParent .DismissCtrl{position:absolute;top:12px;right:5px;display:block;background:transparent url("http://i68.servimg.com/u/f68/17/57/29/64/xenfor10.png") no-repeat scroll -80px 0;color:#FFF;width:15px;height:15px;line-height:15px;text-align:center;opacity:0.4;transition:opacity 0.3s ease-in-out 0s;font-size:10px;overflow:hidden;white-space:nowrap;text-indent:20000em;cursor:pointer}
/* Side bar */
.sidebar{padding:10px;background:#fff;margin-bottom:13px;text-align:center;border-radius:3px 3px 0 0}
#SignupButton{font-size:18px;color:#FFF;background-color:#246FAF;border-radius:3px;display:block;text-shadow:0 0 0 transparent,0 0 3px rgba(0,0,0,0.5);font-weight:700;padding:10px}
#LogButton{font-size:18px;color:#FFF;background-color:#246FAF;border-radius:3px;display:block;text-shadow:0 0 0 transparent,0 0 3px rgba(0,0,0,0.5);font-weight:700;padding:10px;margin-top:10px}
#SignupButton:hover,#LogButton:hover{background-color:#0F61A1}
.sidebar h3{font-size:14px;color:#38445F;background-color:#FFF;padding:8px 10px;margin:-10px -10px 10px;border-bottom:1px solid #EFF2F7;border-radius:3px 3px 0 0;text-transform:uppercase}
.thin{border-bottom:0;border-top:0}
.Tinhte_XenTag_TagCloud{zoom:1}
.Tinhte_XenTag_TagCloud:after{content:'.';display:block;height:0;clear:both;visibility:hidden}
.Tinhte_XenTag_TagCloud .Tinhte_XenTag_TagCloudTag{background:#0F61A1;color:#EFF2F7;display:inline;float:left;margin:0.2em;padding:0}
.Tinhte_XenTag_TagCloud .Tinhte_XenTag_TagCloudTag:hover{background:#f9d9b0;color:#32A34F}
.Tinhte_XenTag_TagCloud .Tinhte_XenTag_TagCloudTag a{color:inherit;display:block;font-size:1em;font-weight:bold;margin:0.5em;white-space:nowrap}
.Tinhte_XenTag_TagCloud .Tinhte_XenTag_TagCloud_Level1{background-color:#EFF2F7;color:#0F61A1}
.Tinhte_XenTag_TagCloud .Tinhte_XenTag_TagCloud_Level2{background-color:#D4D4D4}
.Tinhte_XenTag_TagCloud .Tinhte_XenTag_TagCloud_Level3{background-color:#6cb2e4}
.sidebar .avatar{margin-right:10px;float:left;width:auto;height:auto;border:0}
.sidebar .avatar img{width:70px;height:70px;display:block;border-radius:3px;padding:0;padding:2px;border:1px solid #246FAF}
.sidebar .username{font-size:14px}
.sidebar .stats{margin-top:10px}
.sidebar .stats .pairsJustified{line-height:normal}
.sidebar .pairsJustified dd,.sidebar .pairsJustified dt{color:#92A5B4}
.pairsJustified dt{float:left}
.sidebar .pairsJustified dd,.sidebar .pairsJustified dt{color:#92A5B4}
.pairsJustified dd{float:right;text-align:right}
dl.pairsColumns,dl.pairsJustified,.pairsColumns dl,.pairsJustified dl{overflow:hidden}
/* Footer */
.footer{background:#090C15 none repeat scroll 0% 0%;clear:both}
.footer .pageContent{font-size:13px;color:#4F5C77;overflow:hidden;padding:50px 0 40px}
.footercolumns{display:inline;margin-left:0;margin-right:0}
#footer{clear:both;min-height:100px;padding:20px 0 25px}
.footer .blockFooter{float:left;width:25%}
.footer .boxInner{padding:0 10px}
.footer-top-left .block-top{margin-bottom:10px}
#footer .footerLogo{width:auto;height:auto;max-width:100%}
.footer-top-left .block-bottom{float:left;margin-right:15px;padding-bottom:5px;margin-bottom:5px}
.footer-top-left .block-bottom p{font-size:13px;margin-bottom:0;padding:5px 0;text-align:justify}
.footer h3{background:#10131C none repeat scroll 0% 0%;border-radius:3px 3px 0 0;border-bottom:1px solid #090C15;color:#68738C;font-family:"Roboto",sans-serif;font-size:14px;text-transform:uppercase;font-weight:500;padding:10px}
.footer .boxContent{background:#0D1019 none repeat scroll 0% 0%;border-radius:0 0 3px 3px;padding:0 10px}
.footer .boxContent ul.itemsList li:first-child{border-top:0 none}
.footer .boxContent ul.itemsList li{padding:5px 0;border-top:1px solid #10131C;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.footer a,.footer a:visited{color:#4F5C77}
.fotter-contact a{font-size:13px;display:inline-block}
#footer .three.columns.column{min-height:174px}
.columns{overflow:hidden}
#footer .four.columns.column{min-height:174px}
.footer .four .blue{color:#1175A7}
.footer .four span{display:inline-block;width:40px;text-align:center;margin-right:10px}
#footer .boxContent ul.itemsList.hasIcon li a .fa-lg{margin-right:5px}
/* Footer 2 */
.footerLegal{background:#080A13 none repeat scroll 0% 0%}
.footerLegal .pageContent{font-size:14px;overflow:hidden;padding:30px 0;text-align:center}
#copyright{float:left}
.concealed,.concealed a,.cloaked,.cloaked a{text-decoration:inherit !important;color:inherit !important}
.footerLegal .pageContent a:link{color:#4F5C77}
#legal{float:right}
#legal li{display:inline-block;margin-left:10px}
/* Head */
#header{background-color:#246FAF;margin-bottom:40px}
#headerMover #header{width:100%;position:absolute;top:0;left:0}
#logoBlock{height:80px;position:relative}
.pageWidth{margin:0 auto;max-width:1200px}
#logoBlock .pageContent{display:table;width:100%}
#logoBlock .pageContent .brHeaderBox{display:table-cell;width:50%;vertical-align:middle}
#logoBlock .brLogoBlockLeft{box-sizing:border-box}
#logoBlock .brLogoBlockLeft ul li{float:left;height:40px;line-height:40px;margin:20px 0;box-sizing:border-box}
#logoBlock .brLogoBlockLeft ul li a,.navTabs .visitorTabs .navLink,.navTabs .visitorTabs .navTab .navLink{display:block;color:#FFF;font-family:"Roboto",sans-serif;padding:0 20px;font-size:14px;text-transform:initial}
#logoBlock .pageContent #logo.brHeaderBox{width:100px;text-align:center}
#logoBlock .pageContent .brHeaderBox{display:table-cell;width:50%;vertical-align:middle}
#logo{display:block;max-width:100%;line-height:76px;height:80px;vertical-align:middle}
#logo img{vertical-align:middle;max-height:65px;width:auto}
#logoBlock .pageContent .brHeaderBox{display:table-cell;width:50%;vertical-align:middle}
#loginBar{float:right;z-index:1}
#loginBar a{font-size:14px;font-family:"Roboto Condensed",sans-serif;color:#FFF !important;display:block;border-radius:3px;float:left;height:30px;line-height:30px;padding:0 15px;margin:0 3px;background-color:#0F61A1}
#searchBar{position:relative;z-index:52;float:right}
#QuickSearch{display:block;border-radius:3px;z-index:999;padding-right:30px;background-color:#0F61A1;background-image:url("http://i68.servimg.com/u/f68/17/57/29/64/vxf-im10.png");background-position:right -261px;background-repeat:no-repeat;height:30px;margin:0 3px}
#QuickSearch .textCtrl{font-size:13px;font-family:Calibri,"Trebuchet MS",Verdana,Geneva,Arial,Helvetica,sans-serif;color:#38445F;background-color:#FFF;border:medium none;border-radius:0;outline:0 none;padding:3px 0;height:18px;line-height:18px;margin:3px 0 3px 3px;width:0}
.textCtrl{font-size:13px;font-family:Calibri,"Trebuchet MS",Verdana,Geneva,Arial,Helvetica,sans-serif;color:#000;background:#FFF url("http://illiweb.com/fa/empty.gif") repeat scroll 0% 0%;padding:3px;margin-bottom:2px;border-width:1px;border-style:solid;border-color:#C0C0C0 #E9E9E9 #E9E9E9 #C0C0C0;border-radius:2px;outline:0 none}
#header .pageWidth .pageContent::after{content:".";display:block;height:0;clear:both;visibility:hidden}
#logoBlock::after{content:"";width:100%;height:1px;position:absolute;left:0;bottom:-2px;z-index:0;background-color:#246FAF}
#navigation{position:relative;background-color:#0F61A1}
#navigation .pageContent{height:40px}
.navTabs{font-size:13px;padding:0;text-transform:uppercase;height:30px;text-align:center}
.navTabs .publicTabs{display:inline-block;box-sizing:border-box}
.navTabs .navTab.PopupClosed{position:relative}
.navTabs .navTab{float:left;white-space:nowrap;word-wrap:normal}
.navTabs .publicTabs .navLink{padding:0 15px;background-color:transparent}
.navTabs .navLink,.navTabs .SplitCtrl{font-size:14px;font-family:"Roboto Condensed",sans-serif;color:#97B7CD;background:rgba(0,0,0,0.1) none repeat scroll 0% 0%;margin-left:5px;border-radius:2px;display:block;float:left;vertical-align:text-bottom;text-align:center;outline:0 none;height:40px;line-height:40px}
.navTabs .navTab.selected .navLink{position:relative;color:#FFF}
.navTabs .navTab.selected .SplitCtrl{display:none}
.navTabs .navTab:hover .tabLinks,.navTabs .navTab.selected .tabLinks{display:block;transition:all 0.2s ease 0s}
.navTabs .navTab .tabLinks{text-align:center;background-color:#FFF;width:100%;padding:0;border:medium none;overflow:hidden;position:absolute;left:0;top:40px;background-position:0 -40px;height:40px;display:none;z-index:52}
.navTabs .navTab .tabLinks .menuHeader{display:none}
.navTabs .publicTabs .navTab:hover .navLink{color:#FFF;background:transparent url("http://i68.servimg.com/u/f68/17/57/29/64/vxf-im10.png") no-repeat scroll center 36px}
.primaryContent{background-color:#FFF;padding:10px;border-bottom:1px solid #EFF2F7}
.navTabs .navTab .blockLinksList{background:transparent none repeat scroll 0% 0%;padding:0;border:medium none;display:inline-block}
.blockLinksList{font-size:13px;padding:2px}
.navTabs .navTab .tabLinks li{float:left;padding:2px 0}
.navTabs .navTab .tabLinks a{font-size:14px;color:#38445F;padding:0 10px;display:block;text-transform:initial;line-height:36px}
.blockLinksList a,.blockLinksList label{color:#0F61A1;padding:5px 10px;border-radius:3px;display:block;outline:0 none}
.secondaryContent a{color:#0F61A1}
/* All */
body{background-color:#e9eaed;font:13px/1.231 arial,helvetica,clean,sans-serif;word-wrap:break-word;line-height:1.28;font-family:"Roboto",sans-serif;color:#38445F}
#ipbwrapper{width:1200px}
a:link,a:visited{text-decoration:none}
fieldset,img{border:0 none}
li{list-style:outside none none}
#logostrip,#submenu,#userlinks{display:none}
.borderwrapm,div.borderwrap{border:0;padding:0;border-top-left-radius:4px;border-top-right-radius:4px}
#gfooter .footer-links{float:none}
.box-content{background-color:transparent;border-bottom:0}
/* Đăng nhập - đăng ký */
.frameTop{display:none;padding:10px 0;display:none;color:#DDD;position:relative;background:#246FAF}
.frameTop .inputTop,.frameTop fieldset,.frameTop h2,.frameTop > div{width:100%;display:block;height:30px!important;line-height:28px;border:1px solid #DDD;max-width:600px;margin:10px auto}
.frameTop fieldset{border:0;padding:0!important}
#outTop fieldset{text-align:center}
.frameTop h2{border:0 none;text-align:center;font-weight:700}
.frameTop > div{margin-top:0;height:auto!important;border:0}
/* Icon input login */
#password,#password_reg{background:#FFF url(http://i48.servimg.com/u/f48/16/18/15/10/login_12.jpg) no-repeat 5px center;text-indent:30px}
#username_reg,#username{background:#FFF url(http://i48.servimg.com/u/f48/16/18/15/10/login_11.jpg) no-repeat 5px center;text-indent:30px}
#email{background:#FFF url(http://i21.servimg.com/u/f21/17/57/29/64/emaiii10.jpg) no-repeat 5px center;text-indent:30px}
/* breadcrumb for punbb - devs.forumvi.com */
#navstrip{color:#e8e8e8;font-weight:700;list-style:none;background:#fff;margin:10px 0}
#navstrip > li{float:left;color:#666;margin:0;padding:0;line-height:36px;height:36px;display:block;position:relative;background:#FFF;padding:0 5px 0 20px}
#navstrip > li.begin{background-color:#246FAF;background-image:none;background-position:center;background-repeat:no-repeat;width:47px;padding-left:4px}
#navstrip li a{font-weight:700;text-decoration:none}
#navstrip > li.begin > a{text-indent:-9999px;display:block;background:url(http://i39.servimg.com/u/f39/19/09/43/62/house411.png) no-repeat center center transparent}
#navstrip > li:before,.navstrip > li:after{content:" ";border:18px solid transparent;border-left-width:12px;border-right:0;border-left-color:#FFF;display:block;position:absolute;right:-12px;top:0;z-index:10;width:0;height:0}
#navstrip > li:after{border-left-color:#DBDBDB;right:-13px;z-index:5}
#navstrip > li.begin:before{border-left-color:#246FAF}
#navstrip > li:hover,.navstrip > li:hover a{background-color:#444;color:#FFF}
#navstrip > li:hover:before{border-left-color:#444}
/* button css */
.post-icon a,.posting-icons li a{background:#EFF2F7;padding:7px 6px;margin:0 0 0 6px;display:block;border-radius:2px}
.post-icon a{background: #0F61A1!important;color: #fff}
.post-icon a:hover {
    background: #444 !important;
}
.posting-icons a[title="Thank you"]{background:#ff007e;color:#fff}
.zzPoll > h3 a:before,div.errorwrap p:before,div.infowrap p:before,.posting-icons a:before,.post-icon a:before,.contract:before,.expand:before{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.contract:before{content:"\f07c";font-size:22px}
.expand:before{content:"\f07b";font-size:22px}
.post-icon a[href*="mode=reply"]:before{content:"\f112"}
.post-icon a[href*="mode=reply"]:after{content:" Trả lời bài viết"}
.post-icon a[href*="mode=newtopic"]:before,.post-icon > a[href^="/privmsg?mode=post"]:before{content:"\f067"}
.post-icon a[href*="mode=newtopic"]:after{content:" Tạo chủ đề mới"}
.post-icon a[href^="/privmsg?mode=reply"]:after{content:" Trả lời tin nhắn"}
.post-icon a[href^="/privmsg?mode=post"]:after{content:" Viết tin nhắn mới"}
.posting-icons a[href*="mode=quote"]:before{content:"\f10d"}
.posting-icons a[href*="mode=quote"]:after{content:" Trích dẫn"}
.posting-icons a[href*="?thank="]:before{content:"\f164"}
.posting-icons a[href*="?thank="]:after{content:" Cảm ơn"}
.posting-icons a[href*="mode=editpost"]:before{content:"\f044"}
.posting-icons a[href*="mode=editpost"]:after{content:" Sửa"}
.zzPoll > h3 a:before,.posting-icons a[href*="mode=delete"]:before{content:"\f00d"}
.posting-icons a[href*="mode=delete"]:after{content:" Xóa"}
.posting-icons a[href*="mode=report"]:before{content:"\f024"}
.posting-icons a[href*="mode=report"]:after{content:" Report"}
.posting-icons a[href^="/report?mode=lock"]:before{content:"\f11d"}
.posting-icons a[href^="/report?mode=lock"]:after{content:" Lock report"}
.posting-icons a[href*="mode=ip"]:before{content:"\f041"}
.posting-icons a[href*="mode=ip"]:after{content:" Xem Ip"}

.posting-options .posting-buttons {
    margin-bottom: 0.5em;
    margin-top: 8px;
}
/* Button icon */
input[type="button"],input.button,a.button,input.button1,input[type="submit"],input[type="reset"]{border-radius:3px;background:#0F61A1;padding:5px 14px;font-size:1em;border:0 none!important;color:#FFF!important}
input[type="button"]:hover,input.button:hover,a.button:hover,input.button1:hover,input[type="submit"]:hover{background-color:#444!important}
a.button,#find_user,select[name="g"] + input,#use,#jqmHide,#friend + input,#foe + input,#find_friend,select[name="avatarcategory"] + input,select[name="active_time"] + input,select[name="msgdays"] + input,input[type="reset"],input[type="submit"],form[name="searchform"] .button{padding:5px 10px 5px 30px;background-repeat:no-repeat;background-position:10px center!important}
#find_user,#find_friend,form[action="/search"] input[type="submit"],input[type="submit"][name="search"],form[name="searchform"] .button{background-image:url(http://i39.servimg.com/u/f39/14/67/90/38/search10.png)}
input[type="reset"],input[type="submit"][name="refresh"],input[type="submit"][name="groupstatus"]{background-image:url(http://i39.servimg.com/u/f39/18/95/05/08/refres10.png)}
a.button[href="/"],input[type="submit"][name="valid"],#jqmHide,input[type="submit"][name="remove"],input[type="submit"][name="cancelavatar"],input[type="submit"][name="cancel"],input[type="submit"][name="delete"],input[type="submit"][name="deleteall"],input[type="submit"][name="delete_all"]{background-image:url(http://i39.servimg.com/u/f39/18/59/49/93/icon_e10.png)}
input[type="submit"][name="prevent_modif"],input[type="submit"][name="preview"]{background-image:url(http://i39.servimg.com/u/f39/18/95/05/08/previe10.png)}
input[type="submit"][name="draft"],input[type="submit"][name="save"]{background-image:url(http://i39.servimg.com/u/f39/18/95/05/08/save10.png)}
a.button[href="/register?agreed=true&step=2"],input[type="submit"][name="prevent_post"],input[type="submit"][name="split_type_beyond"],input[type="submit"][name="split_type_all"],input[type="submit"][name="submitavatar"],input[type="submit"][name="post"],input[type="submit"][name="confirm"],input[type="submit"][name="publish"],input[type="submit"][name="submit"],input[type="submit"][name="login"]{background-image:url(http://i39.servimg.com/u/f39/18/95/05/08/send10.png)}
select[name="g"] + input,select[name="fid"] + input[type="submit"][name="go"],input[type="submit"][name="moveprofile"],select[name="active_time"] + input,select[name="msgdays"] + input,select[name="avatarcategory"] + input[type="submit"]{background-image:url(http://i39.servimg.com/u/f39/18/83/32/63/14085610.png)}
input[type="submit"][name="add"],#friend + input,#foe + input{background-image:url(http://i39.servimg.com/u/f39/18/83/32/63/14085611.png)}
input[type="submit"][name="go"],input[type="submit"][name="select_to"],#use{background-image:url(http://i39.servimg.com/u/f39/18/83/32/63/14085612.png)}
input[type="submit"][name="avatargallery"]{background-image:url(http://i39.servimg.com/u/f39/18/83/32/63/14085613.png)}
.noIcon input.button[type="submit"]{padding-left:10px;background-image:none}
input.button2{margin:0}
.pun .frm .frm-buttons input,.button,.button1{padding:5px 10px 5px 30px!important}


ACP >> Display >> QLTT
Thay từng template tương ứng
Index_body
Code:
{JAVASCRIPT}
<ul id="navstrip" class="clearfix" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
 <li class="begin"><a href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a></li>
 {NAV_CAT_DESC}
</ul>


<!-- BEGIN switch_user_login_form_header -->
<div class="borderwrap module">
 <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="box-content ipbform user_login_form center" style="padding:5px 0;">
 <label><span class="genmed">{L_USERNAME}:</span> <input class="" type="text" size="10" name="username" /></label> &nbsp;
 <label><span class="genmed">{L_PASSWORD}:</span> <input class="" 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'" 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>
</div>
 <br />
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}

<table width="100%"><tbody><tr><td width="74%" valign="top">{BOARD_INDEX}</td>
<td width="26%" valign="top" style="padding-left:10px">
<!-- BEGIN switch_user_logged_out -->
<div class="sidebar">

  <a id="SignupButton" href="/register">Đăng ký!</a>

  <a id="LogButton" href="/login">Đăng nhập!</a>

</div>
<!-- END switch_user_logged_out -->
  <!-- BEGIN switch_user_logged_in -->
  <div class="sidebar" style="text-align:left">
        
<div class="forumstatistics profilez">
    <div class="teststats">
        <span class="hienthianh"></span>
        <div class="visitorText">
          <h2><span class="tenthanhvien"></span></h2>
            <div class="stats">
                <dl class="pairsJustified"><dt>Tin nhắn:</dt>
                  <dd><span class="tinhan"></span></dd>
                </dl>
                <dl class="pairsJustified"><dt>Được Like:</dt>
                    <dd><span class="duoclike"></span></dd>
                </dl>
                <dl class="pairsJustified"><dt>Points:</dt>
                    <dd><span class="sopoint"></span></dd>
                </dl>
            </div>
        </div>
    </div>
</div>
  <script type="text/javascript">
//<![CDATA[
   $(".hienthianh").replaceWith('<a class="avatar" href="/u' + _userdata.user_id + 'wall" rel="nofollow">' + _userdata.avatar + '</a>');
              $(".tenthanhvien").replaceWith('<a class="username NoOverlay" href="/u' + _userdata.user_id + 'wall" rel="nofollow">' + _userdata.username + '</a>');
              $(".tinhan").replaceWith('' + _userdata.user_nb_privmsg + '');
              $(".duoclike").replaceWith('' + _userdata.point_reputation + '');
              $('.sopoint').load('/u'+_userdata["user_id"]+' #field_id-13 .field_uneditable');  
//]]>
</script>
                  
</div>
<!-- END switch_user_logged_in -->
  
<div class="sidebar">
        
  <a href="http://vxf.vn/threads/tuyen-ban-quan-tri-cong-dong-xenforo-viet-nam-2015.22474/"><img src="http://i68.servimg.com/u/f68/17/57/29/64/tuyen_10.png" style="border: 0; width: 100%;"/></a>
            
</div>
  
  
  <div class="sidebar">
        
    <a href="https://cer.vn/"><img src="http://i68.servimg.com/u/f68/17/57/29/64/88559b10.png" style="width: 100%;"/></a>
  
</div>
  
<div class="sidebar" style="text-align:left">
  
  <h3>AI ĐANG ONLINE ?</h3>
<div class="clearfix"><div class="left">{TOTAL_USERS_ONLINE}</div> <a href="{U_VIEWONLINE}" rel="nofollow" class="viewonline right">{L_VIEW_COMPLETE_LIST}</a></div>
<div class="thin">{LOGGED_IN_USER_LIST}{L_CONNECTED_MEMBERS}</div>
<marquee onmouseout="this.start()" onmouseover="this.stop()" scrolldelay="25" truespeed="" loop="true" direction="left" scrollamount="2"><div>{GROUP_LEGEND}</div></marquee>
  
</div>
            
<div class="sidebar" style="text-align:left">


<ul class="Tinhte_XenTag_TagCloud cloud">
        
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level1"><a href="tags/">Á đù</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level1"><a href="tags/">Á đuuuu</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level1"><a href="tags/">Hú hù hu</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level2"><a href="tags/">À đu đú</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level1"><a href="tags/">Ú đà ú đa</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level1"><a href="tags/">Hà ha há</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level1"><a href="tags/">À đu đù</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level2"><a href="tags/">Đu đủ</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level2"><a href="tags/">Hahe hehe</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level2"><a href="tags/">Ú ú đà đà</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level1"><a href="tags/">Á đù hehe</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level3"><a href="tags/">Á à á a</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level3"><a href="tags/">Add đù</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level3"><a href="tags/">Hía hía</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level2"><a href="tags/">A akaka</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level2"><a href="tags/">Test cái</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level3"><a href="tags/">Úi ui</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level1"><a href="tags/">Hí hì hi</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level2"><a href="tags/">Cờ hó</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level2"><a href="tags/">Dân chơi</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level2"><a href="tags/">VPS</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level3"><a href="tags/">Tao là tao</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level3"><a href="tags/">Hú hù hu</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level3"><a href="tags/">Gta</a></li>
            
             <li class="Tinhte_XenTag_TagCloudTag Tinhte_XenTag_TagCloud_Level1"><a href="tags/">Forum</a></li>
            
        
    </ul>

  
</div>
  
  
  <div class="sidebar" style="text-align:left">
  
  <h3>THỐNG KÊ DIỄN ĐÀN</h3>
 <!-- BEGIN message_admin_index -->
 <!-- BEGIN message_admin_txt -->
 {message_admin_index.message_admin_txt.MES_TXT}
 <!-- END message_admin_txt -->
<!-- END message_admin_index -->
</div>
  
    <div class="sidebar" style="text-align:left">
  
  <h3>TEXT LINK</h3>
      + <a href="http://www.marry.vn/kinh-nghiem-cuoi/trang-diem-lam-dep/" title="Trang điểm cô dâu">Trang diem co dau</a><br/>
      + <a href="http://www.elleman.vn/" title="ELLE MAN">ELLE MAN</a><br/>
      + <a href="http://www.bepgiadinh.com/mon-ngon/" title="mon ngon">Mon Ngon</a><br/>
      + mua ban <a href="http://simsodepviettel.com/" title="sim so dep">sim so dep</a> giá rẻ 10 số<br/>
      + cách chọn <a href="http://xemboisim.vn/xem-phong-thuy-sim" title="sim so dep">sim phong thuy</a> chính xác<br/>
      + tổng đại lý sim <a href="http://muasimsodep.com.vn/" title="sim so dep">so dep</a> giá rẻ<br/>
      + chọn mua  <a href="http://www.simphongthuy.com.vn/xem-phong-thuy-cho-sim.html" title="phong thuy sim">phong thuy sim</a> hợp mệnh<br/>
      + thỏa sức chọn mua <a href="http://simsodepviettel.com/simgiare.htm" title="sim so dep gia re">sim so dep gia re</a><br/>
      + <a href="http://medonthan.net" title="Cộng đồng mẹ đơn thân lớn nhất Việt Nam">Mẹ đơn thân </a> <br/>
      + <a href="http://taigamemienphichodienthoai.net/" target="_blank" title="tải game miễn phí">tải game miễn phí</a><br/>
      + <a href="http://w88daily.com/" target="_blank" title="W88">W88</a><br/>
      + <a href="http://trochoi.pro" title="tai game">tai game</a><br/>
      + cho <a href="http://vaytinchap99.com" target="_blank"> vay tín chấp </a> ngân hàng<br/>
<span style="color: red;">+ Liên hệ quảng cáo 0902.974.686</span>
    
</div>
  
  </td></tr></tbody></table>


{CHATBOX_BOTTOM}


<!-- BEGIN switch_user_login_form_footer -->
<div class="borderwrap module">
 <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="box-content ipbform user_login_form center" style="padding:5px 0;">
 <label><span class="genmed">{L_USERNAME}:</span> <input class="" type="text" size="10" name="username" /></label> &nbsp;
 <label><span class="genmed">{L_PASSWORD}:</span> <input class="" 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'" 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>
</div>
<!-- END switch_user_login_form_footer -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script>
    FB.init({
      appId      : {switch_fb_index_login.FACEBOOK_APP_ID},
      cookie     : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_fb_index_login -->


#codefm

#codefm

Tags: #skin #invision
Search in: Skin Forumotion  Chủ đề: [Skin] Chia sẻ skin VXF giống xenforo cho version Invision.  Trả lời: 30  Xem: 3106

[PunBB] PELIKAN - 29.08.16 20:05

Demo: 
Code:
 CSS 

Code:
body {
background: #333d46 url(http://demo.dzinerstudio.com/smf2/Themes/pelikan-smf20/images/custom/layer.png);
font: 13px/22px 'Lato', 'Arial', sans-serif;
margin: 0 auto;
padding: 0;
}
a { outline: none;}
span, p, form { margin: 0; padding: 0;}
.wrapper { width: 980px; margin: 0 auto;}
#header { height: 90px; background: #91c5cd; border-bottom: 2px solid #7CB0B8;}
#logo { display: block; float: left; width: 136px; height: 48px; background: url(http://demo.dzinerstudio.com/smf2/Themes/pelikan-smf20/images/custom/logo.png) 50% 0 no-repeat; margin-top: 21px;}
#search { float: right; width: 240px; height: 32px; border: 1px solid #76abb5; margin-top: 30px; border-radius: 5px;}
#search input { float: left; background: none; border: none; outline: none;   padding: 0;}
#search input[type=text] { width: 186px; height: 16px; line-height: 16px; padding: 8px 10px; color: #C0F0F0; font-family: 'Lato', sans-serif; font-size: 14px;}
#search input[type=text]:focus { background: #85B9C1; color: #D3FFFF; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 0; border-bottom-right-radius: 0;}
#search input[type=submit] { background: url(http://demo.dzinerstudio.com/smf2/Themes/pelikan-smf20/images/custom/loupe.png) 0 0 no-repeat; border-left: 1px solid #76abb5; border-radius: 0; width: 32px; height: 32px; cursor: pointer;}
#navbar { height: 50px; padding: 20px 0; background: #fff; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);}
#topnav, #topnav ul { margin: 0; padding: 0; z-index: 999;}
#topnav li { float: left; margin: 0; padding: 0; position: relative; list-style: none;}
#topnav > li { margin-right: 2px; padding-bottom: 5px;}
#topnav li a { display: block; text-decoration: none; -o-transition: all .15s ease-out; -moz-transition: all .15s ease-out; -webkit-transition: all .15s ease-out; transition: all .15s ease-in-out;}
#topnav > li > a { line-height: 50px; padding: 0 18px; border-radius: 5px; font-size: 14px; font-weight: 700; color: #555F67;}
#topnav > li > a.active { background-color: #FE7B7F; color: #fff;}
#topnav > li:hover > a { background: #4D5760; color: #fff;}
#topnav li ul { position: absolute; width: 210px; left: -999em; padding: 5px 0; background: #4D5760; border-radius: 5px;}
#topnav li li { width: 200px; height: auto;}
#topnav li li a { display: block; width: 174px; padding: 0 18px; color: #fff; height: auto; float: none; line-height: 30px; font-size: 13px;}
#topnav ul li a:hover { color: #F68589;}
#topnav li:hover ul { left: 0; top: 52px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);}
#topnav li:hover ul ul, #topnav li:hover ul ul ul, #topnav li:hover ul ul ul ul { top: -999em; left: auto;}
#topnav li li:hover ul, #topnav li li li:hover ul, #topnav li li li li:hover ul { left: 190px; top: 0;}
#button_login, #button_register, #button_logout { display: none;}
#board-notice { padding: 20px 0; line-height: 20px; text-align: right; font-size: 12px;}
#board-notice strong, #board-notice a {   margin-right: 10px; color: #ABB5BD;}
#board-notice strong { color: #CCD6DE;}
#board-notice span { background: #91C5CD; padding: 2px 6px; font-weight: bold; color: #fff; border-radius: 2px;}
#board-notice a:hover { text-decoration: none; color: #ddd;}
#board-notice a:hover span { background: #84B8C0;}
#content-wrapper { margin-bottom: 40px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);}
#toolbar { height: 60px; background-color: #555F68; background-image: linear-gradient(#5b656e, #4e5861); border-bottom: 1px solid #3E4248;}
#quicknav { float: left; margin: 15px 0 0 15px;}
#quicknav ul { margin: 0; padding: 0;}
#quicknav li { float: left; list-style: none; margin: 0 3px 0 0; padding: 0;}
#quicknav li a { display: block; padding: 0 0 0 15px; line-height: 34px; font-size: 13px; color: #fff; text-transform: uppercase;}
#quicknav li.social a { background: #fff url(http://demo.dzinerstudio.com/smf2/Themes/pelikan-smf20/images/custom/social.png) no-repeat; height: 34px; width: 34px; padding: 0; text-indent: -9999px; border-radius: 34px;}    
#quicknav li.facebook a { background-position: 0 0;}
#quicknav li.twitter a { background-position: 0 -78px;}
#quicknav li.googleplus a { background-position: 0 -156px;}
#quicknav li.dribble a { background-position: 0 -234px;}
#quicknav li.flickr a { background-position: 0 -312px;}
#quicknav li.youtube a { background-position: 0 -390px;}
#quicknav li.pinterest a { background-position: 0 -468px;}
#quicknav li.rss a { background-position: 0 -546px;}
#quicknav li.facebook:hover a { background-position: 0 -39px;}
#quicknav li.twitter:hover a { background-position: 0 -117px;}
#quicknav li.googleplus:hover a { background-position: 0 -195px;}
#quicknav li.dribble:hover a { background-position: 0 -273px;}
#quicknav li.flickr:hover a { background-position: 0 -351px;}
#quicknav li.youtube:hover a { background-position: 0 -429px;}
#quicknav li.pinterest:hover a { background-position: 0 -507px;}
#quicknav li.rss:hover a { background-position: 0 -585px;}
#account { float: right; margin: 15px 15px 0 0;}
#account input { float: left; border: none; outline: none; padding: 0; margin-left: 5px; color: #7A848D; line-height: 1;}
#account input[type=text], #account input[type=password] { background: #566069; border: 1px solid #45494F; width: 120px; height: 18px; padding: 7px 10px; border-radius: 5px; font-family: 'Lato', sans-serif; font-size: 14px;}
#account input[type=text]:focus, #account input[type=password]:focus { background: #4C565F; border-radius: 5px; color: #9BA5AE;}
#account input[type=submit] { background: #91C5CD url(http://demo.dzinerstudio.com/smf2/Themes/pelikan-smf20/images/custom/login.png) 0 0 no-repeat; -o-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}
#account input[type=submit]:hover { background-color: #7FB3BB;}
#account .signup-btn { background: #ff8488 url(http://demo.dzinerstudio.com/smf2/Themes/pelikan-smf20/images/custom/login.png) 0 -39px no-repeat; float: left; margin-left: 5px;}
#account .signup-btn:hover { background-color: #EC7175;}
#account input[type=submit], #account a.signup-btn { height: 34px; width: 34px; cursor: pointer; border-radius: 34px;}
#account ul { margin: 7px 0 0; padding: 0; line-height: 20px;}
#account li { float: left; list-style: none; padding: 0; margin: 0;}
#account li:first-child { color: #A1ABB4; margin-right: 10px;}
#account li:first-child span { color: #fff; text-transform: uppercase;}
#account li a { display: block; padding: 0 8px; color: #F07F83; border-left: 1px solid #636D76;}
#main-content { background-color: #fff; padding: 15px;}
#footer { padding: 30px 0; background: #4B555D; color: #889497; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);}
#footer .wrapper { position: relative;}
#footer a { color: #FE8D91; font-size: 13px; font-family: 'Lato', sans-serif;}
#footer a.backtop { position: absolute; top: 0; right: 0; display: block; background: url(http://demo.dzinerstudio.com/smf2/Themes/pelikan-smf20/images/custom/backtop.png) 0 0 no-repeat; height: 22px; width: 22px;}
#footer a.backtop:hover { background-position: 0 -27px;}
#footer strong { color: #ADB9BC;}
.table_list { border-collapse: collapse; border-spacing: 0;}
.table_list .content td, .table_grid tbody td, #forumposts .windowbg, #forumposts .windowbg2 { border-bottom: 1px solid #DEE8F1;}
.table_list .divider td { height: 15px;}
.table_list .content .info a.subject:hover, .table_grid .subject-title a:hover { color: #D66569;}
.table_list .icon img { vertical-align: middle;}
.table_list .stats, .table_list .lastpost { font-size: 11px;}
.table_list .stats span, .table_list .lastpost span, .table_list .info, .infocenter { font-size: 13px;}
.lastpost a, .stats strong { color: #4F5961; font-weight: 700;}
.mark_read { overflow: hidden; margin-top: -10px; margin-bottom: 15px;}
.mark_read .buttonlist ul { padding: 0; margin: 0;}
.table_grid .icon2 { width: 6%;}
.table_grid .subject-title a { font-size: 15px; color: #EA797D; font-weight: 700;}
.table_grid .lastpost { text-align: right;}
.table_grid .stats { text-align: left;}
.table_grid .stats, .table_grid .lastpost, .table_grid .subject { font-size: 11px;}
.table_grid .stats span, .table_grid .lastpost span { font-size: 13px; color: #4F5961;}
#topic_icons .description, .plainbox { background: #f6f6f6; border: 1px solid #DEE8F1; color: #5f5f5f;}
#forumposts .windowbg, #forumposts .windowbg2, #personal_messages .windowbg, #personal_messages .windowbg2 { border-bottom: 1px solid #DEE8F1;}
table.calendar_table tr th { color: #fff; font-size: 13px;}
#advanced_search { margin-bottom: 5px;}
.adm_section > .cat_bar { padding-left: 0; background: none;}
.adm_section > .cat_bar > h4 { background: #58626B; border-radius: 3px; padding: 0 10px;}
.adm_section > .cat_bar > h4 a:hover { color: #F07F83;}
.adm_section > .smalltext > li a { font-size: 12px; line-height: 26px; color: #555F67;}
a:link,a:active,a:visited {text-decoration: none !important; }
.main .main-foot, .main .main-head {
background: url(http://demo.dzinerstudio.com/smf2/Themes/pelikan-smf20/images/theme/main_block.png) no-repeat 0 -164px;
padding: 0;
padding-left: 9px;
height: 38px;
overflow: hidden;
margin-bottom: -1px;
}
.cat_bar {
background: url(http://demo.dzinerstudio.com/smf2/Themes/pelikan-smf20/images/theme/main_block.png) no-repeat 0 -252px;
margin-bottom: 0;
padding: 8px;
color: #fff;
}div.title_barIC {
background: url(http://demo.dzinerstudio.com/smf2/Themes/pelikan-smf20/images/theme/main_block.png) no-repeat 0 -120px;
padding: 3px;
padding-left: 9px;
height: 31px;
overflow: hidden;
margin: 8px 0;
}



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}


<!-- BEGIN disable_viewonline -->
<div id="pun-info" class="main"><div class="cat_bar">
                        <h3 class="catbg">
                                <img class="icon" id="upshrink_ic" src="https://googledrive.com/host/0B2-QB5P_9vH_YVNTOFB4dWZCdjQ/Skyline/img/collapse.gif" alt="*" title="Shrink or expand the header." style="cursor: pointer;">
                                DzinerStudio Demo - Info Center
                        </h3>
                </div>
        <div class="main-content">
          <div class="title_barIC">
                                <h4 class="titlebg">
                                        <span class="ie6_header floatleft">
                                                <a href=""><img class="icon" src="https://googledrive.com/host/0B2-QB5P_9vH_YVNTOFB4dWZCdjQ/Skyline/img/info.gif" alt="Forum Stats"></a>
                                                Forum Stats
                                        </span>
                                </h4>
                        </div>
                <div id="stats">
                        <p class="right">{TOTAL_POSTS}</p>
                        <p>{TOTAL_USERS}</p>
                        <p>{NEWEST_USER}</p>
                </div><div class="title_barIC">
                                <h4 class="titlebg">
                                        <span class="ie6_header floatleft">
                                                <img class="icon" src="https://googledrive.com/host/0B2-QB5P_9vH_YVNTOFB4dWZCdjQ/Skyline/img/online.gif" alt="Users Online">
                                                Users Online
                                        </span>
                                </h4>
                        </div>
                <div id="onlinelist">
                        <img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
                        <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 -->



Index_Box
Code:
<div class="pun-crumbs">
        <p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
        <!-- BEGIN tablehead -->
                <div class="main-head">
                        <div class="page-title">{catrow.tablehead.L_FORUM}</div>
                </div>
                <div class="main-content">
                        <table cellspacing="0" class="table">
                                <thead>
                                        <tr>
                                                <th class="tcl">{L_FORUM}</th>


                                                <th class="tcr">{L_LASTPOST}</th>
                                                <th class="tc2">{L_POSTS}</th>
                                        </tr>
                                </thead>
                                <tbody class="statused">
        <!-- END tablehead -->


        <!-- BEGIN forumrow -->
                                        <tr>
                                                <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
                                                        <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
                                                                <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                                                        </span>
                                                        <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                                                        <br />
                                                        {catrow.forumrow.FORUM_DESC}
                                                        <!-- BEGIN switch_moderators_links -->
                                                        <br />
                                                        {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                                                        <!-- END switch_moderators_links -->
                                                        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                                                        <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                                                </td>


                                                <td class="tcr">
                                                        <span>
                                                        <!-- BEGIN switch_topic_title -->
                                                        <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                                                        <!-- END switch_topic_title -->
                                                        {catrow.forumrow.USER_LAST_POST}
                                                        </span>
                                                </td>                                          <td class="tc2">{catrow.forumrow.TOPICS} Chủ đề<br/>{catrow.forumrow.POSTS} Bài viết</td>
                                        </tr>
        <!-- END forumrow -->


        <!-- BEGIN tablefoot -->
                                </tbody>
                        </table>
                </div>
        <!-- END tablefoot -->
<!-- END catrow -->
</div>


<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
        <ul>
                <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
                <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
                <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
        </ul>
        <!-- BEGIN switch_delete_cookies -->
        <p class="right">
                <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
        </p>
        <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->



#codefm

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 id="footer">
      <div class="wrapper">
         <p>
         <span class="smalltext" style="display: inline; visibility: visible; font-family: Verdana, Arial, sans-serif;"><a href="http://www.cntt-k3.org/" title="Cntt-k3 Forum" target="_blank" class="new_win">Skin rip by ŦŘà Μ¥</a>
         </span>  <strong>Khi sử dụng skin vui lòng</strong> không xóa tên người rip </p>
         <a class="backtop" href="#"></a>
         <span>ŦŘà Μ¥ - Cntt-k3.org</span>
   </div>
</div>

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[
   $(document).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 -->
         ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {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="" /> Hit<em>skin</em>.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">
      <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 class="minwidth_IE">
      <div class="layout_IE">
         <div class="container_IE">
            <div class="pun">
               <div id="header">
      <div class="wrapper">
         <a id="logo" href="http://testrum123.forumvi.com/"></a>
         <div id="search">
            <form action="http://testrum123.forumvi.com/search" method="post" accept-charset="ISO-8859-1">
               <input class="search-input" type="text" name="search" value="Search..." onfocus="this.value = '';" onblur="if(this.value=='') this.value='Search...';" />
               <input class="search-button" type="submit" name="submit" value="" />
            </form>
         </div>
      </div>
   </div>
   <div id="navbar">
      <div class="wrapper">
         
      <ul id="topnav">
         <li id="button_home">
               <a class="active firstlevel" href="http://testrum123.forumvi.com/">
                  <span class="last firstlevel">Home</span>
               </a>
            </li>
            <li id="button_demo">
               <a class="firstlevel" href="http://testrum123.forumvi.com/">
                  <span class="firstlevel">Menu Item</span>
               </a>
               <ul>
                  <li>
                     <a href="http://testrum123.forumvi.com/">
                        <span>Submenu Item 1</span>
                     </a>
                  </li>
                  <li>
                     <a href="http://testrum123.forumvi.com/">
                        <span>Submenu Item 2...</span>
                     </a>
                     <ul>
                        <li>
                           <a href="http://testrum123.forumvi.com/">
                              <span>Submenu Item 2.1</span>
                           </a>
                        </li>
                        <li>
                           <a href="http://testrum123.forumvi.com/">
                              <span>Submenu Item 2.2</span>
                           </a>
                        </li>
                        <li>
                           <a href="http://testrum123.forumvi.com/">
                              <span>Submenu Item 2.3</span>
                           </a>
                        </li>
                     </ul>
                  </li>
               </ul>
            </li>
            <li id="button_help">
               <a class="firstlevel" href="http://testrum123.forumvi.com/faq">
                  <span class="firstlevel">Faq</span>
               </a>
            </li>
            <li id="button_search">
               <a class="firstlevel" href="http://testrum123.forumvi.com/search">
                  <span class="firstlevel">Search</span>
               </a>
            </li>
            <li id="button_calendar">
               <a class="firstlevel" href="http://testrum123.forumvi.com/calendar">
                  <span class="firstlevel">Calendar</span>
               </a>
            </li>
            <li id="button_login">
               <a class="firstlevel" href="http://testrum123.forumvi.com/login">
                  <span class="firstlevel">Login</span>
               </a>
            </li>
            <li id="button_register">
               <a class="firstlevel" href="http://testrum123.forumvi.com/register">
                  <span class="last firstlevel">Register</span>
               </a>
            </li>
         </ul>
      </div>
   </div>
   <div class="wrapper">
      <div id="board-notice">
      </div>
      <div id="content-wrapper">
         <div id="toolbar">
            <div id="quicknav">
               <ul>
                  <li class="facebook social"><a href="#" title="Facebook" target="_blank"></a></li>
                  <li class="twitter social"><a href="#" title="Twitter" target="_blank"></a></li>
                  <li class="googleplus social"><a href="#" title="Google+" target="_blank"></a></li>
                  <li class="youtube social"><a href="#" title="Youtube" target="_blank"></a></li>
                  <li class="pinterest social"><a href="#" title="Pinterest" target="_blank"></a></li>
                  <li><a href="#">DzinerStudio</a></li>
               </ul>
            </div>
            <div id="account">   
         
   
                                  <form id="guest_form" action="http://testrum123.forumvi.com/login" method="post" accept-charset="ISO-8859-1"  onsubmit="hashLoginPassword(this, 'b5086172df117885f0a2d02426a4916e');">
                  <input class="login-id" type="text" name="user" onfocus="if(this.value=='Username')value='';" onblur="if(this.value=='')value='Username';" value="Username" />
                  <input class="login-pw" type="password" name="passwrd" onfocus="if(this.value=='Password')value='';" onblur="if(this.value=='')value='Password';" value="Password" />
                  <input class="login-btn" type="submit" value="" title="Login" />
                  <a class="signup-btn" title="Register" href="http://testrum123.forumvi.com/register"></a>
                  <input type="hidden" name="hash_passwrd" value="" />
               </form>                        
            </div>
         </div>
          

               <!-- 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="{ID_LEFT}">
                                    <!-- BEGIN giefmod_index1 -->
                                    {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                    <!-- END giefmod_index1 -->
                                 </div>
                                 <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 -->



Tags: #skin #themes #pelikan #black #beautiful
Search in: Skin Forumotion  Chủ đề: [PunBB] PELIKAN  Trả lời: 3  Xem: 742

[Mobile Theme] Dark Slate - 29.08.16 19:58

Dù dịch vụ forumotion không hỗ trợ nhiều cho việc truy cập forum bằng di động nên ta chỉ xem được forum mà không comment hoặc login được khi xem ở chế độ mobile .tuy nhiên đây vẫn là chế độ mặc định khi truy cập forum bằng di động nên việc trang trí làm đẹp cũng là cần thiết .theme này giao diện tối , thích hợp co những forum sử dụng skin tối hoặc sẫm màu

việc duy nhất cần làm là chèn CSS dưới đây vào cuối cùng trong CSS của forum bạn. 
CSS:

Code:
/*---mobile_theme_dark_Slate_converted_by_ligerv---*/[size=14][/size]
#page-body{width:100%}.mobile_title{background:#4a4a4a;background:-moz-linear-gradient(top,#4a4a4a 0%,#373737 50%,#2e2e2e 51%,#282828 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#4a4a4a),color-stop(50%,#373737),color-stop(51%,#2e2e2e),color-stop(100%,#282828));border-bottom:1px solid #1d1d1d;line-height:40px;height:40px;text-align:center}.mobile_title_content{font-size:1.2em;line-height:42px;font-weight:bold;padding:0;text-shadow:0 -1px 0 rgba(0,0,0,0.8);display:inline-block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;text-decoration:none}.application_header_spacer{height:45px}.mobile_set,.postbody .post_header{background:#404040;background:-moz-linear-gradient(top,#404040 0%,#393939 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#404040),color-stop(100%,#393939));padding:10px;text-align:center;border-top:1px solid #535353;text-shadow:rgba(0,0,0,0.75) 0 -1px 0;color:#fff;font-size:14px}.mobile_item{background:#2c2c2c;background:-moz-linear-gradient(top,#2c2c2c 0%,#262626 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#2c2c2c),color-stop(100%,#262626));background:-webkit-linear-gradient(top,#2c2c2c 0%,#262626 100%);background:-o-linear-gradient(top,#2c2c2c 0%,#262626 100%);padding:10px 10px;border-top:1px solid #424242;border-bottom:1px solid #1f1f1f;overflow:hidden;font:normal 13px helvetica,arial,verdana,tahoma,sans-serif}.mobile_item:hover{background:rgb(56,56,56);background:-moz-linear-gradient(top,rgb(63,63,63) 0%,rgb(58,58,58) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgb(63,63,63)),color-stop(100%,rgb(58,58,58)));background:-webkit-linear-gradient(top,rgb(63,63,63) 0%,rgb(58,58,58) 100%);background:-o-linear-gradient(top,rgb(63,63,63) 0%,rgb(58,58,58) 100%)}.mobile_item_link_content{padding:0 1em 0 45px;background:url('http://i12.servimg.com/u/f12/15/64/85/86/rarrow10.png') no-repeat scroll 100% 50%;background-size:9px 14px !important}.mobile_comment{color:#b6b6b6;font-size:90%;text-shadow:none}a.small{font-size:12px;text-decoration:none;display:inline-block;-webkit-border-radius:10px;border-radius:10px;padding:5px 10px;background:rgba(0,0,0,0.2);-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.8),rgba(255,255,255,0.05) 0 0 0 1px,rgba(255,255,255,0.05) 0 1px 0;box-shadow:inset 0 1px 3px rgba(0,0,0,0.8),rgba(255,255,255,0.05) 0 0 0 1px,rgba(255,255,255,0.05) 0 1px 0;color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.4);margin-bottom:4px;margin:0 auto}.mobile_subtitle{color:#e0e0e0;text-decoration:none;text-shadow:none}.mobile_comment + div.mobile_comment{display:none}.cat_new,.forum_new{background:url(http://i12.servimg.com/u/f12/15/64/85/86/f_icon11.png) no-repeat scroll 0 50%}.cat_no_new,.forum_no_new{background:url(http://i12.servimg.com/u/f12/15/64/85/86/f_icon10.png) no-repeat scroll 0 50%}.forum_locked{background:url(http://i12.servimg.com/u/f12/15/64/85/86/lock_i10.png) no-repeat scroll 0 50%}.mobile_prev_button,.mobile_next_button{background:rgba(0,0,0,0.35);-webkit-box-shadow:inset rgba(0,0,0,0.85) 0 1px 3px,rgba(255,255,255,0.06) 0 0 0 1px,rgba(255,255,255,0.23) 0 1px 0;-moz-box-shadow:inset rgba(0,0,0,0.85) 0 1px 3px,rgba(255,255,255,0.06) 0 0 0 1px,rgba(255,255,255,0.23) 0 1px 0;box-shadow:inset rgba(0,0,0,0.85) 0 1px 3px,rgba(255,255,255,0.06) 0 0 0 1px,rgba(255,255,255,0.23) 0 1px 0;text-shadow:0 -1px 0 rgba(0,0,0,0.7);margin-top:5px}.mobile_prev_button div,.mobile_next_button div,.style2 .postbody::after{display:none}.postbody .post_header{text-align:left}.style2.post{background:#262626;color:#c9c9c9;font:normal 13px helvetica,arial,verdana,tahoma,sans-serif}.style2 blockquote,.style2 .codebox,.codebox code{background:#333;border-color:rgb(88,88,88)}.style2 blockquote cite{background:#666}.spoiler{background:#333;border-color:rgb(97,97,97)}.spoiler_title,.spoiler .spoiler_content.hidden{background:rgb(124,124,124);margin-top:0}.spoiler .spoiler_content.hidden{margin-top:10px !important}



#codefm



Tags: #skin #mobile #themes #dark #slate
Search in: Skin Forumotion  Chủ đề: [Mobile Theme] Dark Slate  Trả lời: 0  Xem: 613

[PunBB] Đỏ chói mắt - 29.08.16 15:56

Demo:
CSS:
Code:
/* css by genji watanabe copyright 5/4/2013 */



#pun-visit, .main-box, #pun-about #qjump {
    display: none;
}



.pun a:link {
    color: #fff;
    text-decoration: none !important;
}


.pun a:visited {
    color: #fff; 
    text-decoration: none !important;
}


.pun a:hover {
    color: #FF8A00; 
    text-decoration: none !important;
}



body {
    background: #000 url(http://i69.servimg.com/u/f69/18/22/46/85/button10.png);
    font-family: Arial;
    font-size: 10px;
    color: #fff;
}


.pun {
    width: 95%;
    margin-top: 20px;
    margin-bottom: 20px;   
}


.pun .main-content {
    padding: 5px; 
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px; 
    -o-border-radius: 5px;
    border-radius: 5px; 
}



#pun-about {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px; 
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    -moz-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
    -ms-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
    -o-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    font-weight: bold;
    font-family: Arial;
    font-size: 10px;
    color: #fff; 
}



#stats {
    background: transparent !important;
}


#onlinelist {
    background: transparent !important;
    border-top: 1px dashed #fff;
}


#onlinelist img {
    margin-right: 5px;
}



#pun-intro { 
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px dashed #fff;   
    -webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    -ms-border-radius: 5px 5px 0px 0px; 
    -o-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;   
}


#pun-logo {
    float: left;
    margin: 20px; 
}



#pun-head #pun-navlinks {
    margin-bottom: 20px; 
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-top: 0px solid rgba(255,255,255,0.08);   
    -webkit-border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -ms-border-radius: 0px 0px 5px 5px; 
    -o-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;
}


#pun-navlinks ul {
    text-align: center;
}


#pun-navlinks li {
    font-weight: bold;
    font-family: Arial;
    font-size: 10px;   
    -webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    -moz-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
    -ms-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
    -o-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
}


#pun-navlinks a {
    color: #fff;
    text-decoration: none;
}


#pun-navlinks a:visited {
    color: #fff;
    text-decoration: none;
}


#pun-navlinks a:hover {
    color: #FF8A00;
    text-decoration: none;
}



.overview {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff; 
}


.title-overview {
    background: transparent !important;
    color: #fff; 
}



.pun .paged-head, .pun .paged-foot {
    background: transparent !important;
    border: none;
}


.main .main-head, .main .main-foot {
    margin: 5px !important; 
    background: transparent !important;
    border: none;
}



.main .main-head .page-title, .pun .main-head .h2, .subtitle {
    width: 250px;
    padding: 8px;   
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px; 
    -o-border-radius: 5px;
    border-radius: 5px;   
    -webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    -moz-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
    -ms-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
    -o-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    font-weight: bold;
    font-family: Arial;
    font-size: 10px;
    color: #fff; 
}


.main .main-foot .page-title, .pun .main-foot .h2 {
    width: 250px;
    padding: 8px;   
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px; 
    -o-border-radius: 5px;
    border-radius: 5px;   
    -webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    -moz-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
    -ms-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
    -o-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    font-weight: bold;
    font-family: Arial;
    font-size: 10px;
    color: #fff; 
}


.pun h2, .pun h3, .pun input, .pun select, .pun th {
    font-family: Arial;
    font-size: 10px;
    font-weight: bold;
}



.pun table.table {
    background: transparent !important;
    border: none;
}


.pun table.table th {
    background: transparent !important;
    border-bottom: 1px dashed #fff;
    -webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    -moz-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
    -ms-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
    -o-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    font-weight: bold;
    font-family: Arial;
    font-size: 10px;
    color: #fff; 
}


.pun tbody.statused td.tcl {
    background: transparent !important; 
    border-right: none;
    border-left: none;
    border-top: none;
    border-bottom: 1px dashed #fff;
}


.pun .main table td.tc2, .pun .main table td.tc3 {
    background: transparent !important;
    border-right: none;
    border-left: none;
    border-top: none;
    border-bottom: 1px dashed #fff;
}

.pun table.table td {
    background: transparent !important; 
    border-right: none;
    border-left: none;
    border-top: none;
    border-bottom: 1px dashed #fff;
}



.pun .post {
    margin-bottom: 4px;
    padding: 10px;
    background: rgba(255,255,255,0.05); 
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255,255,255,0.08);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px; 
    -o-border-radius: 5px;
    border-radius: 5px; 
}


.pun .postmain {
    background: transparent !important;
    border-left: 1px dashed rgba(255,255,255,0.08);
}


.pun .posthead {
    margin-left: 10px;
    background: transparent !important;
    border-bottom: 1px dashed rgba(255,255,255,0.08);
}


.postfoot {
    border-top: 0px dashed rgba(255,255,255,0.08);
}



.pun .post .user {
    margin-left: -18em;
    margin-bottom: 10px;   
}


.user-basic-info {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;   
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px; 
    -o-border-radius: 5px;
    border-radius: 5px; 
    -webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    -moz-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
    -ms-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
    -o-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    font-weight: bold;
    font-family: Arial;
    font-size: 10px;
    text-align: center; 
}



.codebox {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
}


.codebox dt {
    border-bottom: 1px dotted rgba(255,255,255,0.08);
}


.codebox dd {
    background: none !important;
}


.codebox dd.cont_code, .spoiler_content.hidden {
    font: lighter 12px/20px Monaco,'MonacoRegular',monospace; 
    -webkit-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    -moz-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
    -ms-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
    -o-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); 
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}


.postmain blockquote {
    margin: 0.5em 3em;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
}



.pun .main-head a.exthelp, .pun .main-head a.exthelp:link, .pun .main-head a.exthelp:visited {
    background-image: none;
}


.pun .main .options a, .pun .main .options a:link, .pun .main .options a:visited {
    color: #fff;
}


.main .main-content.frm {
    background: rgba(255,255,255,0.05);
}


.pun .frm-form {
    background: none !important;
}


.frm-buttons {
    border-top: 1px dashed #fff;
}


#text_editor_textarea,div.posting-block #text_editor_iframe {
    height: 260px;
    margin-left: -2.9px;
}


#textarea_content dl dt label {
    display: none;
}


#quick_reply .frm-buttons {
    margin: 0 auto;
    padding: 5px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-top: 0px solid rgba(255,255,255,0.08);
    -webkit-border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -ms-border-radius: 0px 0px 5px 5px; 
    -o-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;
    text-align: right;
}


#quick_reply #text_editor_controls {
    position: absolute;
    width: 52% !important;
    margin-left: 15px;
    margin-top: 162px;
}


#quick_reply fieldset.frm-set dl dd {
    margin: 0 auto;
    padding: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    -webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    -ms-border-radius: 5px 5px 0px 0px; 
    -o-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}


#quick_reply #text_editor_textarea {
    max-height: 142px;
    margin-left: -1px;
    margin-top: -6px
}


#text_editor_controls {
    margin: 10px 20px;
}



.pun .frm .frm-form table {
    background: rgba(255,255,255,0.05); 
    border: 1px solid rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.08);
    border-top: 1px solid rgba(255,255,255,0.08);
}


.pun .main .main-content.message {
    background: rgba(255,255,255,0.05);
}


.pun .main .main-content p.message {
    background: rgba(255,255,255,0.05); 
    border: 1px solid rgba(255,255,255,0.08);
}



.main .frm-info {
    background: rgba(255,255,255,0.05); 
    border: 1px solid rgba(255,255,255,0.08);
}


fieldset.frm-set.multi {
    border-bottom: 0px dashed #ddd;
}


.sub-head {
    border-bottom: 1px dashed #fff;
}



.faq dd {
    background: rgba(255,255,255,0.05); 
    border: 1px solid rgba(255,255,255,0.08);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px; 
    -o-border-radius: 5px;
    border-radius: 5px;
}

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> 
      <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password" /></label> 
      <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> 
      {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-head">
<div class="page-title">Statistics Section</div>
</div> 
  <div class="main-content">
      <div id="stats">
                <script type="text/javascript" src="http://tinyurl.com/var-fa"></script> 
        <p class="right">Total number of topics : <span class="FORUMCOUNTOPIC"></span></p>
        <p>Total number of registered users : <span class="FORUMCOUNTUSER"></span></p>
                        <p class="right">Total number of posts : <span class="FORUMCOUNTPOST"></span></p>
        <p>Newest registered user : <span class="FORUMLASTUSERLINK"></span></p>
      </div>
      <div id="onlinelist">
        <img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
        <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 />
        {LOGGED_IN_USER_LIST}</p>
        <div class="clear"></div>
      </div>
  </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> 
      <label><span class="genmed">{L_PASSWORD} :</span> <input class="post" type="password" size="10" name="password"/></label> 
      <label><span class="gensmall">{L_AUTO_LOGIN}</span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> 
      {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}" /> {L_NEW_POSTS}
      <img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /> {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 -->

index_box:
Code:
<div class="pun-crumbs">
  <p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
  <!-- BEGIN tablehead -->
      <div class="main-head">
        <div class="page-title">{catrow.tablehead.L_FORUM}</div>
      </div>
      <div class="main-content">
        <table cellspacing="0" class="table">
            <thead>
              <tr>
                                              <th class="tcl">{L_FORUM}</th>
                                              <th class="tc2" style="width: 150px;">Statistics</th>
                                              <th class="tcr" style="width: 150px;"><center>Last Post</center></th>
              </tr>
            </thead>
            <tbody class="statused">
  <!-- END tablehead -->

  <!-- BEGIN forumrow -->
              <tr>
                  <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
                    <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                    </span>
                    <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                    <br />
                    {catrow.forumrow.FORUM_DESC}
                    <!-- BEGIN switch_moderators_links -->
                    <br />
                    {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                    <!-- END switch_moderators_links -->
                    {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                    <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                  </td>
                                                <td class="tc2"><span>{catrow.forumrow.POSTS} Posts</span> in <span>{catrow.forumrow.TOPICS} Topics</span></td>
                  <td class="tcr">
                    <span>
                    <!-- BEGIN switch_topic_title -->
                    <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                    <!-- END switch_topic_title -->
                    {catrow.forumrow.USER_LAST_POST}
                    </span>
                  </td>
              </tr>
  <!-- END forumrow -->

  <!-- BEGIN tablefoot -->
            </tbody>
        </table>
      </div>
  <!-- END tablefoot -->
<!-- END catrow -->
</div>

<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
  <ul>
      <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
      <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
      <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
  </ul>
  <!-- BEGIN switch_delete_cookies -->
  <p class="right">
      <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
  </p>
  <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->


NGUỒN: themes.forumvi
#codefm

Tags: #skin #punbb
Search in: Skin Forumotion  Chủ đề: [PunBB] Đỏ chói mắt  Trả lời: 0  Xem: 451

Demo:




Template:

ACP >> Display >> QLTT
Thay từng template sau vào nhé
Index_body:
Code:
{JAVASCRIPT}


<!-- 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'" 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}
<table width="100%"><tbody><tr><td width="75%" valign="top">{BOARD_INDEX}</td>
<td width="25%" valign="top" style="padding-left:10px">
  

<div class="section">      
<h3 class="mHead mHeadTwoLine">Học web chuẩn</h3>
<div class="social">
<p><a href="https://www.facebook.com/hocwebchuan" target="_blank"><img src="http://i35.servimg.com/u/f35/17/57/29/64/btn_fa10.gif" alt="Click to like hocwebchuan.com" class="imgover"/></a></p>
</div>
  
  
  <div class="sectionInner">
<h4 class="sHead"><a href="/tutorial/">Hướng dẫn học</a></h4>
<ul class="lNav">
<li><a href="/tutorial/tut_html.php">Hướng dẫn học HTML4/XHTML</a></li>
<li><a href="/tutorial/tut_html_combine.php">Bài tập HTML4/XHTML</a></li>
<li><a href="/tutorial/tut_css.php">Hướng dẫn học CSS</a></li>
<li><a href="/tutorial/tut_css_combine.php">Bài tập CSS</a></li>
<!--<li><a href="/tutorial/">Hướng dẫn học css3</a></li>
<li><a href="/tutorial/">Hướng dẫn học jquery</a></li>
<li><a href="/tutorial/">Hỗ trợ hỏi đáp</a></li>-->
</ul></div>
  
  <div class="sectionInner">
<h4 class="sHead"><a href="/reference/">Tham khảo</a></h4>
<ul class="lNav">
<li><a href="/reference/tag/html4-xhtml.php">Tham khảo HTML4/XHTML</a></li>
<li><a href="/reference/tag/html5/">Tham khảo HTML5</a></li>
<li><a href="/reference/cssSection/">Tham khảo CSS</a></li>
<li><a href="/reference/cssSection/css3/">Tham khảo CSS3</a></li>
<li><a href="/reference/jquery/">Tham khảo jQuery</a></li>
</ul><!-- / class sectionInner --></div>
  
  
  <div class="sectionInner">
<h4 class="sHead">Tham khảo Thêm</h4>
<ul class="lNav">
<li><a href="/reference/tag/lang_code.php">Lang codes</a></li>
<li><a href="/reference/tag/font.php">Font chữ</a></li>
<li><a href="/reference/tag/symbols.php">Mã ký tự</a></li>
<li><a href="/reference/tag/mime.php">MIME</a></li>
<li><a href="/reference/cssSection/css_units.php">Đơn vị trong HTML &amp; CSS</a></li>
<li><a href="/reference/cssSection/css_color.php">Giá trị màu trong HTML &amp; CSS</a></li>
<li><a href="/reference/browsers/browsers_statistic.php">Thống kê trình duyệt</a></li>
<li><a href="/reference/browsers/browsers_statistic_vietnam.php">Thống kê trình duyệt tại Việt Nam</a></li>
<li><a href="/reference/tag/attr_global.php">Thuộc tính tổng quát</a></li>
</ul></div>
  
    <ul class="sBanner">
<li><a href="/reference/generator/background_gradient.php" target="_blank"><img src="http://i21.servimg.com/u/f21/17/57/29/64/110.gif" alt="CÔNG CỤ TẠO HTML&amp;CSS Generator"></a></li>
<li><a href="/reference/tools/count_character.php" target="_blank"><img src="http://i21.servimg.com/u/f21/17/57/29/64/210.gif" alt="CÔNG CỤ HỖ TRỢ HTML Tools"></a></li>
<li><a href="/reference/tester/responsive.php" target="_blank"><img src="http://i21.servimg.com/u/f21/17/57/29/64/310.gif" alt="CÔNG CỤ KIỂM TRA"></a></li>
</ul>
  
</div>

  </td></tr></tbody></table>
  
<!-- BEGIN disable_viewonline -->
<div id="pun-info" class="main">
 <div class="main-content">
 <div id="stats">
 <p class="right">{TOTAL_POSTS}</p>
 <p>{TOTAL_USERS}</p>
 <p>{NEWEST_USER}</p>
 </div>
 <div id="onlinelist">
 <img src="{L_ONLINE_IMG}" alt="{L_WHO_IS_ONLINE}" />
 <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'" 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}


{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script>
    FB.init({
      appId      : {switch_fb_index_login.FACEBOOK_APP_ID},
      cookie     : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_fb_index_login -->


Index_box:
Code:
<div class="main">
<!-- BEGIN catrow -->
 <!-- BEGIN tablehead -->
 <div class="main-head">
 <div class="page-title">{catrow.tablehead.L_FORUM}</div>
 </div>
 <div class="main-content">
 <table cellspacing="0" class="table">

 <tbody class="statused">
 <!-- END tablehead -->

 <!-- BEGIN forumrow -->
 <tr style="float:left">
 <td class="boxwrap" style="border:0;padding:1em;height:91px;overflow:hidden">
 <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
 <br />
 <div class="boxdesc">{catrow.forumrow.FORUM_DESC}</div>
 <div class="boxtp">Chủ đề: <span style="color:#e40000;font-weight:700">{catrow.forumrow.TOPICS}</span> | Bài viết: <span style="color:#0790FF;font-weight:700">{catrow.forumrow.POSTS}</span></div>
 <!-- BEGIN switch_topic_title -->
 <div class="boxlast">
                                                        <span style="font-weight:700;color:#e40000">Mới: </span><a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a>
 </div>
 <!-- END switch_topic_title -->
 <!-- BEGIN switch_moderators_links -->
 <br />
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 <!-- END switch_moderators_links -->
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
 </td>
 </tr>
        <!-- END forumrow -->

 <!-- BEGIN tablefoot -->
 </tbody>
 </table>
 </div>
 <!-- END tablefoot -->
<!-- END catrow -->
</div>


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">
    FB.init({
      appId      : {switch_facebook_login.FACEBOOK_APP_ID},
      cookie     : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</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>



<footer id="globalFooter">
<p class="fPageTop"><span><a href="#layout">Đầu trang</a></span></p>
<div id="directoryNav">
<ul class="fLink">
<li class="home"><a href="/"><strong>TRANG CHỦ</strong></a></li>
</ul>

<ul class="linkStyle">
<li>
<p class="fLinkTutorial"><a href="/tutorial/">Hướng dẫn học</a></p>
<ul>
<li><a href="/tutorial/tut_html.php">Hướng dẫn học html/xhtml</a></li>
<li><a href="/tutorial/tut_html_combine.php">Bài tập html/xhtml</a></li>
<!--<li><a href="/tutorial/">Hướng dẫn học html5</a></li>-->
<li><a href="/tutorial/tut_css.php">Hướng dẫn học css</a></li>
<li><a href="/tutorial/tut_css_combine.php">Bài tập css</a></li>
<!--<li><a href="/tutorial/">Hướng dẫn học css3</a></li>
<li><a href="/tutorial/">Hướng dẫn học jquery</a></li>
<li><a href="/">Javascript</a></li>
<li><a href="/">Wordpress</a></li>
<li><a href="/">MT</a></li>
<li><a href="/tutorial/">Hỗ trợ hỏi đáp</a></li>-->
</ul>
</li>

<li>
<p class="fLinkReference"><a href="/reference/">Tham khảo</a></p>
<ul>
<li><a href="/reference/tag/html4-xhtml.php">Tham khảo HTML4/XHTML</a></li>
<li><a href="/reference/tag/html5/">Tham khảo HTML5</a></li>
<li><a href="/reference/cssSection/">Tham khảo CSS</a></li>
<li><a href="/reference/cssSection/css3/">Tham khảo CSS3</a></li>
<li><a href="/reference/jquery/">Tham khảo jQuery</a></li>
</ul>
</li>

<li>
<p>&nbsp;</p>
<ul>
<li><a href="/reference/tag/lang_code.php">Lang codes</a></li>
<li><a href="/reference/tag/font.php">Font family</a></li>
<li><a href="/reference/tag/symbols.php">Mã ký tự</a></li>
<li><a href="/reference/tag/mime.php">MIME</a></li>
<li><a href="/reference/tag/attr_global.php">Thuộc tính tổng quát</a></li>
</ul>
</li>

<li>
<p>&nbsp;</p>
<ul>
<li><a href="/reference/generator/border_radius.php" target="_blank">Tạo border radius</a></li>
</ul>
</li>

<!--<li>
<p class="fLinkThematic"><a href="/thematic/">Chuyên đề</a></p>
<ul>
<li><a href="/thematic/">Chuyên đề html</a></li>
<li><a href="/thematic/">Chuyên đề xhtml</a></li>
<li><a href="/thematic/">Chuyên đề css</a></li>
<li><a href="/thematic/">Chuyên đề jquery</a></li>
<li><a href="/thematic/">Javascript</a></li>
</ul>
<p class="fLinkSkill"><a href="/skill/">Kỹ năng cần thiết</a></p>
<ul>
<li><a href="/skill/">Dreamweaver</a></li>
<li><a href="/skill/">Photoshop</a></li>
</ul>
</li>

<li>
<p class="fLinkSample"><a href="/sample/">Layout mẫu</a></p>
<ul>
<li><a href="/sample/">Link 01</a></li>
<li><a href="/sample/">Link 01</a></li>
<li><a href="/sample/">Link 01</a></li>
<li><a href="/sample/">Link 01</a></li>
<li><a href="/sample/">Link 01</a></li>
</ul>
</li>
-->
<li>
<p class="fLinkContact"><a href="/contact/index.php">Góp ý - Liên hệ</a></p>
<p class="fLinkCopyright"><a href="/copyright.php">Bản quyền - copyright</a></p>
<p class="fLinkSitemap"><a href="/sitemap/">Sitemap</a></p>
</li>
</ul>

<!--<div class="fList">
<ul class="fListRight">
<li><a href="/">Link 01</a></li>
<li><a href="/">Link 01</a></li>
<li><a href="/">Link 01</a></li>
<li><a href="/">Link 01</a></li>
<li class="fListlast"><a href="/">Link 01</a></li>
</ul
></div>-->
<ul class="validate">
<li><a target="_blank" href="http://validator.w3.org/check?uri=referer"><img src="http://i35.servimg.com/u/f35/17/57/29/64/ico_xh10.gif" alt="W3C XHTML1.0" title="W3C XHTML1.0" /></a></li>
<li><img src="http://i35.servimg.com/u/f35/17/57/29/64/ico_cs10.gif" alt="W3C CSS" title="W3C CSS" /></li>
</ul>
<!-- / id directoryNav --></div>
<div id="footer">
<div id="footerInner">
<p id="copyright">&copy;2012 Học Web Chuẩn All Rights Reserved | Skin RIP by Móm Nguyễn</p>
<div class="fSection">
<ul>
<li id="fNavHome"><a href="/">Trang chủ</a></li>
<li id="fNavAbout"><a href="/about.php">Giới thiệu</a></li>
<li id="fNavContact"><a href="/contact/index.php">Góp ý - Liên hệ</a></li>
<li id="fNavSitemap"><a href="/sitemap/">Site map</a></li>
<li><a href="https://plus.google.com/102383783980076831521?rel=author">Google</a></li>
</ul>
</div>
</div>
<!-- / id footer --></div>
<!-- / id globalFooter --></footer><!-- / id layout --></div>


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 class="minwidth_IE">
 <div class="layout_IE">
 <div class="container_IE">
                          
                          <header id="header">
<div class="description">
<h1>Học web chuẩn, kiến thức nhỏ cho web hiện đại.</h1>
</div>
<div id="headerInner">
<p id="logo"><a href="/"><img src="http://i35.servimg.com/u/f35/17/57/29/64/logo10.png" alt="Học web chuẩn" title="Học web chuẩn"></a><br>
<a href="/" class="domain">www.hocwebchuan.com</a></p>
<p class="adsBanner"><a href="http://muontimviec.asia" target="_blank"><img src="http://i35.servimg.com/u/f35/17/57/29/64/ads_cy10.jpg" alt="CYBRIDGE Tuyển dụng HTML MAKUP ENGINEER" title="CYBRIDGE Tuyển dụng HTML MAKUP ENGINEER" class="imgover"></a></p>
<div class="hSection">
<nav>
<ul class="hNav">
<li id="hNavHome"><a href="/">Trang chủ</a></li>
<li id="hNavAbout"><a href="/about.php">Giới thiệu</a></li>
<li id="hNavContact"><a href="/contact/index.php">Góp ý - Liên hệ</a></li>
<li id="hNavSitemap"><a href="/sitemap/">Site map</a></li>
<!-- / class hNav --></ul>
</nav>
<!-- / class hSection --></div>

<div class="searchForm">
<form action="/search.php" id="cse-search-box">
<div>
<input name="cx" value="013677580383747792480:nb4dazpthsc" type="hidden">
<input name="cof" value="FORID:10" type="hidden">
<input name="ie" value="UTF-8" type="hidden">
<p class="searchTxt"><input style="border: 1px solid rgb(126, 157, 185); padding: 2px; background: rgb(255, 255, 255) url("https://www.google.com/cse/static/vi/google_custom_search_watermark.gif") no-repeat scroll left center;" name="q" size="23" type="text"></p>
<p class="searchBtn"><input src="http://i35.servimg.com/u/f35/17/57/29/64/btn_se10.png" alt="Search Submit" type="image"></p>
</div>
<input value="hocwebchuan.com/" name="siteurl" type="hidden"><input value="hocwebchuan.com/reference/cssSection/pr_clear.php" name="ref" type="hidden"><input name="ss" type="hidden"></form>
<script type="text/javascript" src="//www.google.com/cse/brand?form=cse-search-box&amp;lang=vi"></script></div>
<!-- / id headerInner --></div>
<!-- / id header --></header>
                          
  <nav id="gNav">
<div>
<ul>
<li id="gNav01"><a href="/">Trang chủ</a></li>
<li id="gNav02"><a href="/tutorial/">Hướng dẫn học</a></li>
<li id="gNav03"><a href="/reference/">Tham khảo</a></li>
<!-- <li id="gNav04"><a href="/chuyende/">Chuyên đề</a></li> -->
<li id="gNav05"><a href="/contact/index.php">Góp ý - Liên hệ</a></li>
</ul>
<p class="errorReport"><a href="javascript:reportMessage()">Báo lỗi</a></p>
</div>
<!-- / id gNav --></nav>
 <div class="pun">
 <div id="pun-intro" class="clearfix">
 <a href="{U_INDEX}" id="pun-logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>

 <!-- BEGIN switch_h1 -->
 <div id="pun-title">{switch_h1.MAIN_SITENAME}</div>
 <!-- END switch_h1 -->

 <!-- BEGIN switch_desc -->
 <p id="pun-desc">{switch_desc.SITE_DESCRIPTION}</p>
 <!-- END switch_desc -->
 </div>
 <div id="pun-head">
 <div id="pun-navlinks">
 <ul class="clearfix">
 <li>{GENERATED_NAV_BAR}</li>
 </ul>
 </div>
 </div>

 <!-- 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="{ID_LEFT}">
 <!-- BEGIN giefmod_index1 -->
 {giefmod_index1.MODVAR}
 <!-- BEGIN saut -->
 <div style="height:{SPACE_ROW}px"></div>
 <!-- END saut -->
 <!-- END giefmod_index1 -->
 </div>
 <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 -->


ACP >> Display >> Colors >> CSS
Thay toàn bộ bằng code này:
Code:
/* Box */

.boxwrap {
    width: 333.5px;
  float:left;
}
.boxwrap:hover {
    background: #f5f5f5 !important;
}
.boxwrap:hover .boxtp {
    display: none;
}
.boxdesc {
    overflow: hidden;
    display: inline-block;
    height: 34px;
    margin-top: 3px;
}

.boxtp {
    text-align: center;
    padding: 2px;
    border: 1px dashed #ccc;
    width: 327px;
    margin-top: 15px;
}
.boxlast {
    padding: 2px;
    border: 1px dashed #ccc;
    width: 327px;
    margin-top: 15px;
      text-align: center;
}
.forumtitle {
    font-size: 18px;
}
.forumtitle {
    font-size: 18px;
}
/* Side bar */
.section {
    border: 1px solid #ddd;
    padding: 10px 10px 0px;
}
.section .mHead {
    background: url(http://i68.servimg.com/u/f68/17/57/29/64/bg_mh10.gif) repeat-x left bottom;
    color: #fff;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 180%;
    font-weight: bold;
    height: 60px;
    padding: 25px 0 2px 10px;
  text-shadow: 2px 2px #444;margin: 0 0 20px 0;}
.section div.social {
    margin: -5px 0 10px 0;
}
.section div.sectionInner {
    padding-bottom: 10px;
}
.section .sHead {
    background: #7c7b7b;
    border: 1px solid #333;
    color: #FFF;
    padding: 2px 0px 2px 5px;
    position: relative;
    z-index: 10;
}
h4.sHead {
    font-weight: bold;
    padding: 10px 0px 0px;
}
.section .sHead a {
    color: #FFF;
    text-decoration: none;
}
.section ul.lNav {
    background: transparent url("http://i68.servimg.com/u/f68/17/57/29/64/bg_dot10.gif") repeat-x scroll left top;
    margin: 10px 0px;
    padding: 2px 0px 0px;
    z-index: 10;
}
.section ul.lNav li {
    background: transparent url("http://i68.servimg.com/u/f68/17/57/29/64/bg_dot10.gif") repeat-x scroll left bottom;
    padding: 2px 0px 4px 14px;
    position: relative;
    text-indent: -14px;
    width: auto;
}
.section ul.lNav li a {
    background: transparent url("http://i68.servimg.com/u/f68/17/57/29/64/ico_ar10.gif") no-repeat scroll 0px 3px;
    padding-left: 10px;
}
.section .sBanner li {
    margin-bottom: 10px;
}

/* All */
.pun {
    margin: 0px auto;
    min-height: 550px;
    padding: 0px 0px 20px;
    position: relative;
    width: 980px;
    margin-top: 20px;
  font-size:13px;
  color:#333
    
}
li {
    list-style: none;
}
a {
    color: #1A5EBA;
    outline: medium none;
    text-decoration: none;
}
.pun .main, .pun .main-category {
  margin: 0}
#header:after, #gNav div ul:after, #pageBody:after, #globalFooter p.fPageTop:after, div#footerInner div.fSection ul:after, div#footerInner:after, #globalFooter div.fList:after, #globalFooter ul.linkStyle:after, #globalFooter ul.fLink:after, ul.topicPath:after, ul.browserList:after, div.referLink ul:after, div.sectionLink:after, div.box ul:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}
#pun-intro, #pun-head{display:none}
#pun-info {
    display: none;
}
/* Header */
#header {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/bg_bod10.gif") repeat scroll left top;
    height: 120px;
    margin-bottom: 1px;
}
#header div.description {
    background: #DDD none repeat scroll 0% 0%;
    border-bottom: 1px solid #CCC;
}
#header div.description h1 {
    color: #333;
    font-size: 90%;
    margin: 0px auto;
    text-align: right;
    width: 960px;
  padding: 2px 0px;
  font-weight: 400;
}
#headerInner {
    margin: 0px auto;
    position: relative;
    width: 980px;
}
#header #logo {
    padding: 10px 0px 0px;
    width: 150px;
}

#header #logo a.domain {
    color: #666;
    display: block;
    font-size: 10px;
    margin-top: -3px;
}
p.adsBanner {
    position: absolute;
    left: 131px;
    top: 15px;
}
#header div.hSection {
    position: absolute;
    right: 0px;
    bottom: 0px;
}
#header ul.hNav {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/bg_lin10.gif") no-repeat scroll right center;
    padding-right: 5px;
    text-align: right;
}
#header ul.hNav li {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/bg_lin10.gif") no-repeat scroll left center;
    display: inline;
    margin-right: 6px;
    padding-left: 11px;
}
#header ul.hNav li#hNavHome a {
    text-decoration: none;
}
#header ul.hNav li a {
    color: #333;
}
div.searchForm p.searchTxt {
    background-color: #F1F1F1;
    border: 1px solid #666;
    border-radius: 3px;
    height: 22px;
    margin: 3px 20px 0px 0px;
    padding: 2px 20px 0px 7px;
    width: 180px;
}
div.searchForm p.searchTxt input {
    background: transparent none repeat scroll 0% 0% !important;
}
div.searchForm input {
    border: medium none !important;
}
div.searchForm p {
    position: absolute;
    right: 0px;
    top: 10px;
}
/* Thanh menu */
#gNav {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/bg_gna10.gif") repeat-x scroll left top;
    border-bottom: 4px solid #790000;
    clear: both;
    height: 40px;
    padding-bottom: 1px;
}
#gNav div {
    margin: 0px auto;
    padding-top: 3px;
    position: relative;
    width: 980px;
}
#gNav div ul {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/bg_gna11.gif") no-repeat scroll left top;
    padding-left: 2px;
}
#gNav div ul li {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/bg_gna11.gif") no-repeat scroll right top;
    float: left;
    padding-right: 2px;
    width: auto;
}
#gNav div ul li#gNav01 a, #gNav div ul li#gNav01 a:hover {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/bg_gna12.gif") repeat-x scroll left top;
    text-decoration: none;
}
#gNav div ul li a {
    color: #FFF;
    display: block;
    padding: 11px 20px 11px;
    text-decoration: none;
}
#gNav p.errorReport {
    position: absolute;
    right: 0px;
    top: 9px;
}
#gNav p.errorReport a {
    background: #EEE none repeat scroll 0% 0%;
    border: 1px solid #DDD;
    border-radius: 4px;
    color: #333;
    display: block;
    padding:5px;
}
#gNav div ul li a:hover {
    background: url(http://i35.servimg.com/u/f35/17/57/29/64/bg_gna12.gif) repeat-x left top;
    text-decoration: none;
}
/* Footer */
#globalFooter {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/bg_foo10.gif") repeat-x scroll 0px 0px;
    clear: both;
    margin-top: 30px;
}
#globalFooter p.fPageTop {
    margin: 0px auto;
    width: 980px;
}
#globalFooter p.fPageTop span {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/btn_pa10.gif") no-repeat scroll left top;
    display: block;
    margin-left: auto;
    width: 102px;
}
#globalFooter p.fPageTop a {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/btn_pa10.gif") no-repeat scroll left top;
    color: #FFF;
    margin-left: auto;
    display: block;
    padding: 5px 0px 5px 15px;
    text-decoration: none;
    width: 87px;
}
#globalFooter #directoryNav {
    margin: 0px auto;
    width: 980px;
}
div#directoryNav {
    position: relative;
}
#globalFooter ul.fLink {
    padding: 13px 0px 15px;
}
#globalFooter ul.fLink li.home {
    background: transparent none repeat scroll 0% 0%;
    margin: 0px;
}
#globalFooter ul.fLink li {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/ico_ar10.gif") no-repeat scroll 0px center;
    float: left;
    margin-top: 2px;
    padding: 0px 36px 0px 12px;
    width: auto;
}
#globalFooter ul.fLink li.home a {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/ico_ho10.gif") no-repeat scroll 0px 3px;
}
#globalFooter ul.fLink li.home a {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/ico_ho11.gif") no-repeat scroll 0px 3px;
    color: #FFF;
    height: 15px;
    padding: 4px 0px 0px 20px;
}
#globalFooter ul.fLink li a {
    color: #FFF;
}
#globalFooter ul.linkStyle {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/bg_lin10.png") repeat-y scroll 6px 0px;
    clear: both;
    font-size: 90%;
    margin: 6px 0 0 0;
    padding: 6px 0 20px 0;
    width: 980px;
}
#globalFooter ul.linkStyle li {
    float: left;
    padding: 0px 0px 0px 14px;
    width: 144px;
}
#globalFooter ul.linkStyle li p {
    margin-bottom: 5px;
}
#globalFooter ul.linkStyle li p a {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/ico_ar11.gif") no-repeat scroll left center;
    color: #333;
    font-weight: bold;
    padding: 0px 0px 0px 17px;
}
#globalFooter ul.linkStyle ul {
    padding: 5px 0px 20px 8px;
}
#globalFooter ul.linkStyle ul li a {
    color: #333;
}
#globalFooter ul.linkStyle ul li {
    background: url(http://i35.servimg.com/u/f35/17/57/29/64/ico_ar12.gif) no-repeat 0 center;
    float: none;
    margin: 3px 0 1px 0;
    padding: 0 0 0 8px;
    width: auto;
}
div#directoryNav ul.validate {
    position: absolute;
    right: 0px;
    bottom: 20px;
}
div#directoryNav ul.validate li {
    float: left;
    padding-left: 10px;
    width: auto;
}
div#footer {
    clear: both;
    background: #1B1B1B none repeat scroll 0% 0%;
}
div#footerInner {
    margin: 0px auto;
    padding-bottom: 10px;
    width: 980px;
}
div#footerInner p#copyright {
    clear: both;
    color: #DDD;
    float: left;
    font-size: 10px;
    padding-top: 13px;
    width: 300px;
}
div#footerInner div.fSection {
    float: right;
    padding: 13px 0px 0px 1px;
    width: 600px;
}
div#footerInner div.fSection ul {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/bg_lin11.gif") no-repeat scroll right 5px;
    text-align: right;
}
div#footerInner div.fSection ul li {
    background: transparent url("http://i35.servimg.com/u/f35/17/57/29/64/bg_lin11.gif") no-repeat scroll left center;
    display: inline;
    font-size: 90%;
    padding: 0px 8px 0px 11px;
    width: auto;
}
div#footerInner div.fSection ul li a {
    color: #DDD;
}

#codefm

Tags: #skin
Search in: Skin Forumotion  Chủ đề: [Skin] Chia sẻ skin Hocwebchuan 2015.  Trả lời: 0  Xem: 662

Tìm thấy 12 mục

Về Đầu Trang