Không biết post vào đâu, thôi thì post vô đây ==" Làm thanh header của Kist.vn Demo online: http://4rum.kist.vn Không có demo ảnh Cách làm: Tạo 2 template, 1 tên Topbar, 1 tên topbar.css Nội dung: Topbar : Mã: <xen:require css="topbar.css" /> <fieldset id="topbar"> <script> $(document).ready(function(){ $("#login_but").mouseover(function(){ $("#login_form").toggle(1000); }); }); </script> <div id="headbar-wrap"> <div id="head-bar"> <h1> <a class="logo" href="http://ss-f.net/">SSF</a> </h1> <ul class="main-menu" style="overflow:visible"> <li> <a class="current" href="http://ss-f.net">DIỄN ĐÀN</a> </li> <li> <a href="http://ss-f.net">Update...</a> </li> <li> <a href="http://ss-f.net">Update...</a> </li> <li> <a href="http://ss-f.net">Update...</a> </li> <script> (function() { var cx = '014228640608180323602:ba9bgjltwu0'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })(); </script> </ul> <ul class="main-2-menu"> <xen:if is="!{$visitor.user_id}"> <li> <a href="{xen:link register}">Đăng ký</a> </li> <li> <a id="login_but" href="{xen:link login}">Đăng nhập</a> </li> <div id="login_form" class="form_login" style="width:220px;" > <form id="pageLogin" method="post" action="{xen:link 'login/login'}"> <input type="hidden" name="cookie_check" value="1" /> <input type="hidden" name="redirect" value="{$requestPaths.requestUri}" /> <input type="hidden" name="_xfToken" value="{$visitor.csrf_token_page}" /> <table width="100%" border="0" cellpadding="0" cellspacing="5" style="border-collapse: separate; border-spacing: 5px;"> <tr><dt style="font-weight: bold;"><center>Tài khoản</center></dt><dd><input id="ctrl_pageLogin_login" class="input_login" type="text" value="" name="login" style="background-attachment: scroll;background-clip: border-box;background-color: #FFFFFF;background-origin: padding-box;background-position: 0px 0px;background-repeat: no-repeat;background-size: 100% auto;border: 0px none currentColor; color: #747862;height: 20px;margin-bottom: 0px;padding: 4px 8px;width: 200px;"></dd></tr> <tr><dt style="font-weight: bold;"><center>Mật khẩu</center></dt><dd><input class="input_login" type="password" value="" style="background-attachment: scroll;background-clip: border-box;background-color: #FFFFFF;background-origin: padding-box;background-position: 0px 0px;background-repeat: no-repeat;background-size: 100% auto;border: 0px none currentColor; color: #747862;height: 20px;margin-bottom: 0px;padding: 4px 8px;width: 200px;" input id="ctrl_pageLogin_password" name="password" /></dd></tr> <tr><td colspan="2"><center><input type="checkbox" name="remember" checked="" id="ctrl_pageLogin_remember"/> Ghi nhớ </center></td></tr> <tr><td colspan="2" class="login_bottom_boxy"><input class="loginButton" tabindex="104" value="Đăng nhập" type="submit" style="width: 75px"/></td></tr> </table> </form> </div> </div> </xen:if> <xen:if is="{$visitor.user_id}"> <li> <a href="{xen:link 'credits'}" >REP: {xen:helper brc_currencyformat, {$visitor.credits},true}</a> </li> <!-- conversations popup --> <li style="background:none;" class="navTab inbox Popup PopupControl PopupClosed"> <a href="{xen:link conversations}" rel="Menu" class="navLink NoPopupGadget"><img src="styles/ssf/inbox.png" style="vertical-align: middle;"> <strong class="itemCount {xen:if {$visitor.conversations_unread}, '', 'Zero'}" id="ConversationsMenu_Counter" data-text="{xen:phrase you_have_x_new_unread_conversations}"> <span class="Total">{xen:number $visitor.conversations_unread}</span> <!-- <span class="arrow"></span> --> </strong> </a> <div class="Menu JsOnly navPopup" id="ConversationsMenu" data-contentSrc="{xen:link 'conversations/popup'}" data-contentDest="#ConversationsMenu .listPlaceholder"> <div class="menuHeader primaryContent"> <h3> <span class="Progress InProgress"></span> <a href="{xen:link conversations}" class="concealed">{xen:phrase conversations}</a> </h3> </div> <div class="listPlaceholder"></div> <div class="sectionFooter"> <xen:if is="{$canStartConversation}"><a href="{xen:link conversations/add}" class="floatLink">{xen:phrase start_new_conversation}</a></xen:if> <a href="{xen:link conversations}">{xen:phrase show_all}...</a> </div> </div> </li> <xen:hook name="navigation_visitor_tabs_middle" /> <!-- alerts popup --> <li style="background:none;" class="navTab alerts Popup PopupControl PopupClosed"> <a href="{xen:link account/alerts}" rel="Menu" class="navLink NoPopupGadget"><img src="styles/ssf/alert.png" style="vertical-align: middle;"> <strong class="itemCount {xen:if {$visitor.alerts_unread}, '', 'Zero'}" id="AlertsMenu_Counter" data-text="{xen:phrase you_have_x_new_alerts}"> <span class="Total">{xen:number $visitor.alerts_unread}</span> <!-- <span class="arrow"></span> --> </strong> </a> <div class="Menu JsOnly navPopup" id="AlertsMenu" data-contentSrc="{xen:link 'account/alerts-popup'}" data-contentDest="#AlertsMenu .listPlaceholder" data-removeCounter="#AlertsMenu_Counter"> <div class="menuHeader primaryContent"> <h3> <span class="Progress InProgress"></span> <a href="{xen:link account/alerts}" class="concealed">{xen:phrase alerts}</a> </h3> </div> <div class="listPlaceholder"></div> <div class="sectionFooter"> <a href="{xen:link account/alert-preferences}" class="floatLink">{xen:phrase alert_preferences}</a> <a href="{xen:link account/alerts}">{xen:phrase show_all}...</a> </div> </div> </li> <li onmouseover="$('#jsid-channel-menu').removeClass('hide');" onmouseout="$('#jsid-channel-menu').addClass('hide');" ><h3><a href="{xen:link members, $visitor}" title="{xen:phrase view_your_profile}">{$visitor.username}▼</a></h3><div class="channel-menu hide" id="jsid-channel-menu"> <div class="kist_profilemenu_user"> <div class="overlap"></div> <div class="kist_profilemenu_contain"> <div class="kist_avatar_user"> <div id="aw-avatar"> <xen:avatar size="m" user="$visitor" title="{xen:phrase view_your_profile}" /> </div> </div> <ul class="acc_user_menu"> <li> <a href="{xen:link account/personal-details}">Trang cá nhân</a> </li> <li> <a href="{xen:link account/preferences}">Quản lý tài khoản</a> </li> <li> <a href="credits/transfer">Chuyển REP</a> </li> <li> <a href="{xen:link logout, '', '_xfToken={$visitor.csrf_token_page}'}" class="LogOut">Đăng xuất</a> </li> </ul> </div> </div> </div></li></xen:if> </ul> </div> </div> <xen:hook name="topbar" /> <span class="helper"></span> </div> </div> </fieldset> topbar.css Mã: * { outline: none; } body { color: #222; font: 11px "Helvetica Neue",Helvetica,Arial,sans-serif; } a { color: #00a5f0; text-decoration: none; -webkit-transition: color .2s linear; -moz-transition: color .2s linear; } a:hover { color: #24bbff; } a:active { color: #0082bd; } a img { border: none; } ::-moz-selection{ background:#E92C6C; color:#fff; text-shadow: 0 1px rgba(0, 0, 0, .2); } ::selection{ background:#E92C6C; color:#fff; text-shadow: 0 1px rgba(0, 0, 0, .2); } #headbar-wrap { background-color: #222; padding: 0; min-width: 800px; border-bottom: 1px solid #333; border-top: 1px solid #333; box-shadow: 0 1px #000, 0 2px 1px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px #000, 0 2px 1px rgba(0, 0, 0, .4); -webkit-box-shadow: 0 1px #000, 0 2px 1px rgba(0, 0, 0, .4); position: fixed; width: 100%; z-index: 1000; top: 0; } #head-bar { height: 50px; max-width: 1060px; margin: 0 auto; position: relative; } #head-bar a { -webkit-transition: color .2s linear; -moz-transition: color .2s linear; } #head-bar a:hover { color: #00a5f0; text-decoration:none; } #head-bar h1 { width: 113px; margin: 0; float: left; border-right: 1px solid #333; box-shadow: -1px 0 #000 inset; -moz-box-shadow: -1px 0 #000 inset; -webkit-box-shadow: -1px 0 #000 inset; } #head-bar h1 .header-fb-like { margin-top: 9px; } #head-bar h1 .header-twitter-follow { margin-top: 14px; } #head-bar h1 a.logo { display: block; padding: 16px 18px 14px 0; height: 20px; line-height: 20px; font-size: 18px; width: 90px; text-indent: -9999px; overflow: hidden; background: url(http://img.kist.vn/k03_logo.png) no-repeat; float: left; } #head-bar h1 a.logo:hover { background: url(http://img.kist.vn/k03_logo_hover.png) no-repeat; } #head-bar h1 a.logo:active { background: url(http://img.kist.vn/k03_logo_hover.png) no-repeat; } #head-bar ul { margin: 0; padding: 0; list-style-type: none; overflow: hidden; } #head-bar ul.main-menu { float: left; } #head-bar ul.main-menu li, #head-bar ul.secondary-menu li { float: left; } #head-bar ul.main-menu li a { color: #c1c1c1; display: block; font-weight: bold; font-size: 13px; line-height: 10px; padding: 20px; border-right: 1px solid #333; box-shadow: -1px 0 #000 inset; -moz-box-shadow: -1px 0 #000 inset; -webkit-box-shadow: -1px 0 #000 inset; text-shadow: 0 -1px #000; height: 10px; } #head-bar ul.main-menu li a:hover, #head-bar a.post-button:hover, #head-bar ul.main-menu li a.current, #head-bar ul.main-menu li a.add-post.current { color: #fff; text-shadow: 0 1px #000; } #head-bar ul.main-menu li a:active { padding: 21px 20px 19px; } #head-bar ul.main-menu li a.add-post:hover, #head-bar ul.main-menu li a.add-post.current { background: url(../img/sprite_v13.png) -460px -384px no-repeat; } #head-bar ul.main-menu li a.add-post:active { padding: 21px 20px 19px 48px; background: url(../img/sprite_v13.png) -460px -383px no-repeat; } #head-bar ul.main-menu li a.current, #head-bar ul.main-menu li a.add-post.current { background-color: #111; } #head-bar ul.main-menu li a.current { background-color: #000; } #head-bar a.post-button:active { padding: 16px 20px 14px; color: #0082bd; } #head-bar ul.secondary-menu { float: right; margin: 13px 10px 0 0; } #head-bar ul.main-2-menu { float: right; margin-right:50px; overflow: visible; border-left: 1px solid #000; border-right: 1px solid #333; } #head-bar ul.main-2-menu li { float: left; } #head-bar ul.secondary-menu li a { font-size: 11px; line-height: 14px; font-weight: bold; padding: 5px 10px; background-color: #444; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; display: block; margin-left: 10px; color: #fff; text-shadow: 0 -1px rgba(0, 0, 0, .2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset; -moz-box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset; -webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset; border: 1px solid #000; } #head-bar ul.secondary-menu li a:active { margin: 1px 0 0 10px; } #head-bar ul.secondary-menu li .signup { background-color: #E15F4E; box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset; -moz-box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset; -webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, .4) inset; } #head-bar a.shuffle-button, #head-bar a.search-button { display: block; width: 60px; height: 50px; text-indent: -9999px; overflow: hidden; } #head-bar a.shuffle-button strong, #head-bar a.search-button strong { display: block; height: 50px; background: #222 url(../img/sprite_v13.png) -120px -324px no-repeat; -webkit-transition: background-color .2s linear; } #head-bar a.search-button strong { background: #222 url(../img/sprite_v13.png) -180px -324px no-repeat; } #head-bar a.shuffle-button strong:hover { background: url(../img/sprite_v13.png) -120px -384px no-repeat; } #head-bar a.search-button strong:hover { background: url(../img/sprite_v13.png) -180px -384px no-repeat; } #head-bar a.shuffle-button strong:active, #head-bar a.search-button strong:active { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; background: url(../img/sprite_v13.png) -120px -383px no-repeat #111; } #head-bar a.search-button strong:active { background: url(../img/sprite_v13.png) -180px -383px no-repeat #111; } #head-bar a.social-toggle { display: block; width: 140px; height: 50px; overflow: hidden; color: #fff; text-indent: 0; position: relative; } #head-bar a.social-toggle span.text { display: block; font-size: 13px; font-weight: bold; text-shadow: 0 -1px 0 #000; color: #999; position: absolute; top: 18px; left: 15px; } #head-bar a.social-toggle span.toggle { width: 26px; height: 14px; display: block; background: url(../img/vertical-toggle.png) -25px 0 no-repeat; position: absolute; right: 15px; top: 19px; } #head-bar a.social-toggle span.toggle.current { background: url(../img/vertical-toggle.png) 0 0 no-repeat; } .main-2-menu a.button, .main-2-menu a.bookmark-button, .main-2-menu a.signup-button, .profile-menu a.profile-button { color: #fff; font-size: 11px; line-height: 14px; font-weight: bold; padding: 5px 10px; margin: 13px 9px 0; background-color: #444; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; display: block; text-shadow: 0 -1px rgba(0, 0, 0, .2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset; -moz-box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset; -webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset; border: 1px solid #000; } .main-2-menu a.signup-button.red { -webkit-animation: glow 2s infinite; -moz-animation: glow 2s infinite; } .main-2-menu a.signup-button.facebook { background: url("../img/sprite_v13.png") no-repeat scroll 10px -2164px #3b5998; padding-left: 36px; } .main-2-menu a.signup-button.facebook:hover { background-color: #2c57a5; } .main-2-menu a.signup-button.green { background-color: #399A35; -webkit-animation: green-glow 2s infinite; -moz-animation: green-glow 2s infinite; } .main-2-menu a.signup-button.blue { background-color: #00a5f0; -webkit-animation: blue-glow 2s infinite; -moz-animation: blue-glow 2s infinite; } .profile-menu a.profile-button { width: 132px; background: #444 url(../img/sprite_v13.png) no-repeat 124px -539px; } .profile-menu a.profile-button:hover, .profile-menu a.profile-button.hover { background-color: #000; color: #00a5f0; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; } .main-2-menu a.signup-button:hover, .main-2-menu a.button:hover, .main-2-menu a.bookmark-button:hover { background-color: #555; color: #fff !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset, 0 1px 2px #111; -moz-box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset, 0 1px 2px #111; -webkit-box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset, 0 1px 2px #111; } .main-2-menu a.signup-button:hover { background-color: #f96655; } .main-2-menu a.signup-button:active, .main-2-menu a.button:active, .main-2-menu a.bookmark-button:active { margin-top: 14px; } #head-bar .profile-menu ul { background-color: #000; border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; position: absolute; padding-bottom: 5px; font-size: 11px; display: none; z-index: 999; width: 154px; margin-left: 9px; } #head-bar .profile-menu ul li { height: auto; border: none; } #head-bar .profile-menu:hover ul { display: block; cursor: pointer; } #head-bar .profile-menu ul a { display: block; padding: 5px 10px; width: 134px; color: #999; -webkit-transition: color .2s linear; -moz-transition: color .2s linear; } #head-bar .profile-menu ul a:hover { color: #fff; } #headbar-signup-button { display: none; } .channel-menu { border-radius: 0 0 5px 5px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); margin-left: -250px; position: absolute; top: 52px; } .hide { display: none !important; } .channel-menu ul { float:left; background-color: #fff; border-radius: 0 0 2px 2px; font-size: 13px !important; list-style-type: none; margin: 0; padding: 0; } .channel-menu ul li { background-color:#fff; float: none !important; height:35px; width: auto; !important; } .channel-menu ul li:hover { background-color:#F6F2F2; } .channel-menu ul li a { -moz-transition: none .3s ease .2s; border-right: medium none !important; box-shadow: none !important; color: #000000 !important; cursor: pointer; display: block; font-weight: normal !important; height: auto !important; line-height: 18px !important; padding: 5px 15px !important; text-shadow: none !important; width: 150px; } #head-bar ul.main-2-menu li a { color: #c1c1c1; display: block; font-weight: bold; font-size: 13px; line-height: 10px; padding: 20px; /* border-right: 1px solid #333;*/ box-shadow: -1px 0 #000 inset; -moz-box-shadow: -1px 0 #000 inset; -webkit-box-shadow: -1px 0 #000 inset; text-shadow: 0 -1px #000; height: 10px; } #head-bar ul.main-2-menu li a:hover { color:#ffffff; } .kist_avatar_user { float:left; margin-right:10px; } .kist_profilemenu_user { background: none repeat scroll 0 0 #FFFFFF; border: 2px solid #222222; line-height: 16px; margin-top: -2px; position: relative; text-align: left; } .overlap { background: none repeat scroll 0 0 #FFFFFF; height: 2px; line-height: 2px; overflow: hidden; position: absolute; right: 0; top: -2px; z-index: 600; } .kist_profilemenu_contain { overflow: hidden; padding: 10px; width:320px; } .acc_user_menu { float: left; list-style: none outside none; margin-top: -3px; } body { padding-top: -25px; } .form_login { background:#222; border:1px solid #333; padding:15px; width:auto; color:#fff; font-weight:bold; text-align:center; box-shadow:0 1px #000000, 0 2px 1px rgba(0, 0, 0, 0.4); } .form_login a{ font-weight:bold; font-color:#fff; } .button { border:medium none; } .loginButton { -moz-box-shadow:inset 0px 0px 0px 0px #bbdaf7; -webkit-box-shadow:inset 0px 0px 0px 0px #bbdaf7; box-shadow:inset 0px 0px 0px 0px #bbdaf7; background-color:#97c2ed; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:1px; border:1px solid #84bbf3; display:inline-block; color:#ffffff; font-family:arial; font-size:11px; font-weight:bold; padding:6px 12px; text-decoration:none; text-shadow:1px 1px 0px #528ecc; width:auto; }.loginButton:hover { background-color:#378de5; }.loginButton:active { position:relative; top:1px; } #login_form{ position: absolute; top: 52px; display: none; margin-right: 220px;} .channel-menu { border-radius: 0px 0px 5px 5px; box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.196); margin-left: -250px; position: absolute; top: 52px; } .hide{display:none; !important} #aw-avatar{transition: none !important;box-shadow: none !important;color: none !important;height: auto !important;line-height: 0px !important;padding: 0px !important;text-shadow: 0px !important;} #aw-avatar a{padding:0px !important;box-shadow: none !important;} Vào template Page_Container Tìm: Mã: <xen:elseif is="!{$visitor.user_id} && !{$hideLoginBar}" /> <xen:include template="login_bar" /> </xen:if> Thêm bên dưới Mã: <xen:include template="Topbar" /> Cho chắc, vào xenforo.css tìm Mã: body Thêm vào giữa 2 dấu "{" và "}" đoạn này: Mã: margin-top:55px; Save rồi tận hưởng
