chickIT
New Member
Demo: http://skinvbb.net
Hướng dẫn:
Vào admincp > Styles & Teamples > Styles Manager > Chọn skin cần sửa > CSS Teample >additional.css thêm vào cuối:
Vào vbulletin-chrome.css thay toàn bộ bằng:
Phần header thay bằng:
nguồn skinvbb.net
Hướng dẫn:
Vào admincp > Styles & Teamples > Styles Manager > Chọn skin cần sửa > CSS Teample >additional.css thêm vào cuối:
Code:
[/B][/B][/B][/B][/B][/B][/B][LEFT][COLOR=#333333][FONT=monospace]/* Css header by huynhtoan.ck */.searchMS { float:left; margin-left:416px;}.attachments .postcontent { padding:0;}#loginms { background-image:url(images/misc/black_downward_arrow.png); background-position:right center; background-repeat:no-repeat; padding:8px 18px 8px 8px; _padding-right:25px;}#avatar { background-image:url(images/misc/black_downward_arrow.png); background-position:right center; background-repeat:no-repeat; padding-right:18px; _padding-right:25px;}#avatar .pic {background-color: #F8F8F8;background-image: -webkit-gradient(linear,left top,left bottom,from(#F8F8F8),to(#ECECEC));background-image: -webkit-linear-gradient(top,#F8F8F8,#ECECEC);background-image: -moz-linear-gradient(top,#F8F8F8,#ECECEC);background-image: -ms-linear-gradient(top,#F8F8F8,#ECECEC);background-image: -o-linear-gradient(top,#F8F8F8,#ECECEC);background-image: linear-gradient(top,#F8F8F8,#ECECEC);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8f8f8',EndColorStr='#ececec');border: 1px solid #C6C6C6;display: block;-moz-border-radius: 2px;-o-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;}[/FONT][/COLOR][/LEFT][B][B][B][B][B][B][B]Vào vbulletin-chrome.css thay toàn bộ bằng:
Code:
[/B][LEFT][COLOR=#333333][FONT=monospace]@charset "UTF-8";/* CSS Document *//*** CHROME: HEADER, NAVBAR, BREADCRUMB, FOOTER*//*************************************************//* HEADER */.above_body { background:#F1F1F1 none repeat scroll; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); padding: 0px 0px 0px 0px; position: fixed; width: 100%; z-index: 100;}.above_h { background:#F1F1F1 none repeat scroll; margin: 0px auto 10px auto; padding-top: 30px; width: 100%; z-index: 100;}.doc_header { border:1px solid #E5E5E5; color:#CCC; font:normal normal normal 14px Arial,sans-serif; position:relative; min-height:37px;}.doc_header a { color:#CCC; }.doc_header a:hover { color:#fff; }.doc_header hr { display: none; }.logo-image { float: left; clear: right; min-height: 2em; height: auto !important; padding: 0px 0px 0px 28px;}.toplinks { position:absolute; right:30px; top:1px; color:#666; font: normal normal normal 14px Arial,sans-serif; text-align:right; background: none ;}.toplinks ul.isuser li#fb_headerbox.hidden,.toplinks ul.nouser li#fb_headerbox.hidden { display: none;}.toplinks ul.isuser li#fb_headerbox a,.toplinks ul.nouser li#fb_headerbox a { padding-top: 0; background: none; cursor: pointer;} li#fb_headerbox a#fb_link { position: relative; } li#fb_headerbox a#fb_link #fb_squarepic{ position:absolute; right:-6px; top:5px; z-index:1; border:1px solid #B3CCE7; padding:1px; } li#fb_headerbox a#fb_link #fb_icon{ position:absolute; right:10px; top:1px; z-index:2; }.toplinks ul.isuser, .toplinks ul.nouser { display:block; float: right; clear: left; list-style: none;}.toplinks ul.isuser li { display:inline; position: relative; color: #CCC; float: right; clear: left; padding-right: 10px; background:;}.toplinks ul.isuser .popupbody li { display:block; float: none; clear: none; padding:0; margin:0;}.toplinks ul.isuser li.welcomelink { display: block; float: right; clear: left; padding-top: 3px; padding-bottom: 3px; padding-left: 4px; padding-right: 4px; color: #666;}.toplinks ul.isuser li.logoutlink { top: 0;}.toplinks ul.isuser li a { display: block; padding-top: 3px; padding-bottom: 3px; padding-left: 4px; padding-right: 4px;/* font-weight:bold; */ color:#666; line-height: 30px;}.toplinks ul.isuser li li a { float: none; margin-left: 0;}.toplinks ul.isuser li.welcomelink a { display:inline; float: none; clear: none; margin-left: 0;}.toplinks ul.isuser li a:hover { padding-top: 3px; padding-bottom: 3px; padding-left: 4px; padding-right: 4px; background: transparent; color:#666;}.toplinks ul.nouser li { display:inline;}.toplinks ul.nouser li a { display: block; float: right; clear: left; color:#666; position: relative;/* padding: 6px 10px 0 10px; */ padding:8px; background: transparent; -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px; -moz-border-radius-bottomright:0px; -webkit-border-bottom-right-radius:0px; border-bottom-right-radius:0px; height:20px; font-weight:bold; font-size:14px; margin-right: 10px;}.toplinks ul.nouser li a:hover { background: transparent; color:#666;}.toplinks ul.isuser li.popupmenu, .toplinks ul.isuser .notifications, .toplinks ul.isuser .nonotifications { color: #000000; position: relative; font-size:15px;}.toplinks ul.isuser li.popupmenu ul li { position: relative; top: 0; margin: 0; text-align: left;}.toplinks ul.isuser .notifications .popupbody { background: #F1F1F1 none ; border: 1px solid #E1E1E1; /* makes it look consistent with the popup background */}.toplinks ul.isuser .notifications .popupbody li a{ color: #000000; background:#FFFFFF none ; padding: 0 5px; font-weight: normal; text-align: left; padding-left: 30px; line-height: 26px;}.toplinks ul.isuser .notifications .popupbody li a span { position: absolute; line-height: 26px; left: 5px;}.toplinks ul.isuser .notifications .popupbody li a:hover { color: #000000; background:#FFEB90 none ; text-decoration: underline;}.toplinks form { min-width: 255px; display:block; text-align: left; float: right; clear: left; }.toplinks .logindetails { padding: 10px; padding-top:5px; background: #fff; -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px; -moz-border-radius-bottomright:0px; -webkit-border-bottom-right-radius:0px; border-bottom-right-radius:0px;}.toplinks form input { margin: 3px 0 0; vertical-align: baseline; font-size: 13px; border: 0;}.toplinks form input.textbox { color: #666;}.toplinks form input.default-value {/* color: #777777; */ font-size: 15px; -webkit-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.1); border: 1px solid #E5E5E5; border-top: 1px solid #A0A0A0;}.toplinks .remember { margin-left: 10px; font-size: 11px; color: #666;}.toplinks .remember input { vertical-align: baseline;}.toplinks ul.isuser .notifications .popupbody li{ }.cb_cookieuser_navbar{ position: relative; }.notifications a.popupctrl:link, .notifications a.popupctrl:visited,.toplinks a:link, .toplinks a:visited { color: #666; text-decoration:none;}.notifications>a:link, .notifications>a:visited { /* ie6 hack: broke this rule out on its own: the > selector makes ie6 ignore rule entirely. */ color: #666; text-decoration:none;}.notifications > a:hover,.notifications a.popupctrl:hover { color: #666;}.notifications { font-size:11px; color: #666; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;}.notifications a { text-decoration:none;}.notifications .popupbody { color:#000000; background: #FFFFFF none ;}.header hr,.header h2 { display:none;}/*************************************************//* NAVBAR */.navbar { position:relative;/* height: 56px; */ background:#2f4456 none ; margin:0px 0px 0px 0px; color:rgb(255, 255, 255); font: 13px Arial,sans-serif; border:0px solid rgb(255, 255, 255); -moz-border-radius-bottomleft:0px; -moz-border-radius-bottomright:0px; -webkit-border-bottom-left-radius:0px; -webkit-border-bottom-right-radius:0px; border-bottom-left-radius:0px; border-bottom-right-radius:0px;}.navbar a { color:#CCC; }.navbar a:hover { color:rgb(255, 255, 255);}.navtabs { background:#2D2D2D none repeat-x ; padding: 0px 0px 0px 20px; height: 30px;}.navtabs li:first-child { border-left: 0px solid #5a7f97;}.navtabs ul {/* height: 26px; */ position:absolute; top:30px; left:0px; width:100%; border-top:0px solid #5a7f97; -moz-border-radius-bottomleft:0px; -moz-border-radius-bottomright:0px; -webkit-border-bottom-left-radius:0px; -webkit-border-bottom-right-radius:0px; border-bottom-left-radius:0px; border-bottom-right-radius:0px; margin-right:-80px;/* This is to fix RTL menu issue under Opera */ direction:ltr;}.navtabs li { float:left; border-right: 0px solid #5a7f97;}.navtabs ul li:first-child { margin-left: 20px; border-left: 0;}#navtabs .popupmenu ul li:first-child { margin-left: 0px;}.navtabs ul li { border-right: 0; position: relative;}.navtabs li a { height:30px; line-height:30px; padding:0 10px;}.navtabs li a.navtab { border-top: 0px solid #Cedfeb; border-left: 0px solid #Cedfeb; display:block; background:#2D2D2D none repeat-x ; min-width:60px; width:auto !important; width:60px; text-align:center; color: #CCC; font: bold 13px Arial,sans-serif; text-decoration:none; line-height:30px;}.navtabs li a.navtab:hover { background:transparent none repeat-x 0 -4px; color:rgb(255, 255, 255);}.navtabs li.selected { height:30px; color:rgb(255, 255, 255);}.navtabs li.selected a.navtab { color:rgb(255, 255, 255); background:transparent none repeat-x ; position:relative; top:-4px; padding-top:4px; z-index:10;}.navtabs li.selected li a,.navbar_advanced_search li a { text-decoration:none; font: 13px Arial,sans-serif; line-height: 26px;}.navtabs li.selected li a { color:#CCC; padding:2px 5px;}.navtabs li.selected ul.popupbody a { line-height: 26px;}.navbar_advanced_search li { height: 30px; display:block; clear:both;}.navbar_advanced_search li a { color:#CCC;}.navbar_advanced_search li a:hover { color:rgb(255, 255, 255); text-decoration:underline;}.navtabs li.selected li a:hover { color:rgb(255, 255, 255); text-decoration:underline;}.navtabs li.selected .popupbody li a { text-indent: 0; color: #000000; background: #FFFFFF none ; padding:0px 10px;}.navtabs li.selected .popupbody li a:hover { color: #000000; background: #FFEB90 none ;}.navtabs li.selected li a.popupctrl { -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; border:solid 0px transparent; background:transparent url(images/misc/arrow.png) no-repeat right center; padding-right:15px; color: #CCC;}.toplinks .notifications a.popupctrl { padding-top: 3px; padding-bottom: 3px; padding-left: 4px; padding-right: 15px; background: transparent url(images/misc/arrow.png) right center no-repeat ; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius:0px; -webkit-border-bottom-left-radius: 0px; border-bottom-right-radius:0px; border-bottom-left-radius: 0px;}.toplinks .nonotifications a.popupctrl { padding-top: 3px; padding-bottom: 3px; padding-left: 4px; padding-right: 15px;/* background: transparent url(images/misc/arrow.png) no-repeat right center; */}.toplinks .notifications a.popupctrl:hover, .toplinks .nonotifications a.popupctrl:hover, .toplinks .nonotifications a.popupctrl.active , .toplinks .notifications a.popupctrl.active{ padding-top: 3px; padding-bottom: 3px; padding-left: 4px; padding-right: 15px; background: transparent url(images/misc/arrow.png) no-repeat right center;}.toplinks .notifications a.popupctrl:hover { padding-top: 3px;}.navtabs li.selected li:hover a.popupctrl { border-color:#2f4456; background-color:#2D2D2D; text-decoration:none;}.navtabs li.selected li:hover a.popupctrl.active,.navtabs li.selected li a.popupctrl.active { border-color:#2D2D2D; background-color:#2D2D2D; color:#CCC; border-radius: 3px 3px 0px 0px; text-decoration:none;}.navtabs .popupbody { border: 1px solid #2D2D2D; background: #2D2D2D; width: auto;}.navtabs .popupbody li { float:none; border-top: 1px solid #2D2D2D;}#navtabs .popupmenu ul, #navtabs .popupmenu ul li a { height: auto;}.nonotifications div.popupbody { min-width: 170px; width: auto !important; width: 170px; background: #2D2D2D; border: 1px solid #2D2D2D;}.nonotifications .popupbody p { color: #000000; background: #FFFFFF none ; text-align: left; border-top: 1px solid #2D2D2D; padding: 0; text-indent: 5px; line-height: 30px; display:block;}.toplinks .nonotifications .popupbody a { color: #000000; background: #FFFFFF none ; float: none; clear: none; padding: 0 5px; margin-left: 0; text-align: left; line-height: 26px;}.toplinks .nonotifications .popupbody a:hover { color: #000000; background:#FFEB90 none ; text-decoration: underline; padding: 0 5px;}.globalsearch { position:absolute; right: 20px; top: 0px; float: right; clear: left; text-align:right; line-height: 30px; display:block;}.globalsearch li { float: left; padding-right:5px; padding-left:5px;}.globalsearch li:hover { color:rgb(255, 255, 255);background: #565555; }.globalsearch li a:hover {text-decoration:none}.navbar_search { position:relative; width: 179px; right: -21px; display:block;}.navbar_search input { font-size: 11px; vertical-align:middle; padding: 1px; border:1px solid #CCC;}.globalsearch .textboxcontainer { height: 30px; border-left:0px solid #5a7f97; display:inline-block; float: left; text-align:center;}.globalsearch .textboxcontainer span { border-top: 0px solid #Cedfeb; border-left: 0px solid #Cedfeb; display: inline-block; height: 26px; padding-left: 2px; padding-right: 2px; padding-top: 3px; margin-bottom: 1px; width: 147px;}.globalsearch input.textbox { width: 120px;}.toplinks form input.loginbutton { cursor: pointer; font-size: 14px; padding: 0 5px; border:solid 1px #999;}.globalsearch .buttoncontainer { height: 30px; border-left:0px solid #5a7f97; display:inline-block; border-right:0px solid #5a7f97; width: 25px; overflow: hidden; float: right;}.globalsearch .buttoncontainer span{ border-top: 0px solid #Cedfeb; border-left: 0px solid #Cedfeb; height: 27px; padding-left: 4px; padding-top: 4.5px; display:inline-block;}.globalsearch .searchbutton { border: 0; padding: 0; width: 22px; margin-top: -2px; margin-left: -2px;}/*************************************************//* BREADCRUMB */.breadcrumb .navbit { float:left; background-image:url(images/misc/navbit-arrow-right.png); background-position:right center; background-repeat:no-repeat; padding-right:10px; padding-left:3px;}.breadcrumb .navbit:first-child { padding-left:0;}.breadcrumb .navbit.lastnavbit { background: transparent;}.breadcrumb .navbit.lastnavbit span { float:left; background: transparent; padding-right:10px; padding-left:3px;}.breadcrumb .navbit > a, .breadcrumb .lastnavbit > span { display:block; padding:2px 4px; float:left; background-color:transparent; border:1px solid transparent; -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px; }.breadcrumb .navbit a { text-decoration:none;}.breadcrumb hr { display:none;}/*************************************************//* PAGE TITLE */ #pagetitle { padding:0px 10px 5px 10px; clear:both; padding-top: 5px; background: none ; border: ;}#pagetitle a { color:; }#pagetitle a:hover { color:; }#pagetitle h1 { color: inherit; font:normal normal bold 14px Tahoma, Calibri, Verdana, Geneva, sans-serif;}#pagetitle .description { color: inherit; font-size: 11.05px;}/*************************************************//* NEW CONTENT LINK */.newcontent_textcontrol { background: #4D90FE none repeat-x left top; _background-image: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; font: normal 14px Arial, sans-serif; color: rgb(255, 255, 255); padding: 2px 15px 3px 15px; border: 0 ; display:block; float: left; clear: right;}.newcontent_textcontrol span { font: normal 14px Arial, sans-serif; font-size:15px; font-weight:bold; display:inline;}.newcontent_textcontrol:hover { background: #4D90FE none repeat-x left top; color: rgb(255, 255, 255); text-decoration: none;}/*************************************************//* FOOTER */.footer { clear:both; margin-top:15px; text-align:right; display:block; /*width: 100%; VBIV-10173*/ background:rgb(255, 255, 255) none ; padding:5px 0px 5px 0px; border-top:1px solid #C6C6C6; color:gray; font: normal 13px Tahoma, Calibri, Verdana, Geneva, sans-serif;}.footer a { color:#3B5998; }.footer a:hover { color:#3B5998; }.footer_copyright,.footer_morecopyright { padding-bottom:5px; color:rgb(102, 102, 102); font: normal 11px Tahoma, Calibri, Verdana, Geneva, sans-serif; margin-top: 10px; text-align:center; display:block;}.footer_time { color:rgb(102, 102, 102); font: normal 11px Tahoma, Calibri, Verdana, Geneva, sans-serif; padding-top:10px; text-align:center;}.footer_select { float:left; text-align:left; margin-left: 10px; margin-top: 0;}.footer_links { margin-right: 10px; margin-top: 2px;}.footer_links li { display:inline; margin-left:5px;}.below_body .time { color: #666;}.notices { background: rgb(255, 255, 255); margin: 5px 0;}.notices li { background: #F9EDBE none ; font-size: 12px; color: #3e3e3e; padding:5px 10px; margin-bottom:5px; text-align: left; clear:both; border: 1px solid #F0C36D; border-radius: 2px 2px 2px 2px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);}.breadcrumb .navbithome { float: left; padding: 3.5px 0;}/* end styles for template: navbar *//*************************************************//* ADS GLOBAL */.ad_global_header {}#ad_global_header1 { float:left; clear:right; padding:0 0 0 0; margin:0 0 0 0;}#ad_global_header2 { float:left; padding:0 0 0 0; margin:0 0 0 0;}#ad_global_below_navbar { width:100%; padding:0 0 0 0; margin:0 0 0 0;}#ad_global_above_footer { width:100%; padding:0 0 0 0; margin:0 0 0 0; text-align:left; clear:both;}#ad_board_below_whats_going_on { width:100%; padding:0 0 0 0; margin:0 0 0 0; text-align:left;}#ad_thread_first_post_content { float:right; margin:0 0 0 0;}#ad_thread_last_post_content { float:right; margin:0 0 0 0; z-index: 1000;}.google_adsense_footer { clear:both;}[/FONT][/COLOR][/LEFT][B]Phần header thay bằng:
Code:
[/B][LEFT][COLOR=#333333][FONT=monospace]<script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript" src="google/gas.js"></script><link rel="stylesheet" type="text/css" href="http://skinvbb.net/google/gas.css" /><script type="text/javascript" src="http://skinvbb.net/vinavb/docs/docs.js"></script><script type="text/javascript" src="http://skinvbb.net/vinavb/docs/jquery-1.5.min.js"></script><script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'vi'}</script><div id="fb-root"></div><script>(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/vi_VN/all.js#xfbml=1&appId=185840618182441"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>[/FONT][/COLOR][/LEFT][B]nguồn skinvbb.net
