Đầu tiên :
Fm nay đã có thêm thanh Toolbar với các chức năng khá ngon
và chúng ta chỉ cần kích hoạt nó trong ACP là sẽ có thanh Toolbar này .
Nhưng ! có lẽ với mình và các bạn nó hơi xấu và có những thứ ko cần thiết cần loại bỏ
Vậy nên mình lập topic này chia sẻ cho các bạn cách làm nó đẹp hơn và loại bỏ những thứ ko cần thiết
Chỉ dùng vài css là chúng ta đã có thể ẩn những thứ ko cần thiết ví dụ như : chữ bản quyền Forumoton , các nút share lên các trang mạng
vew Id của những thứ cần loại bỏ và
dùng css để ẩn chúng
- Code:
display: none !important;
và thay vào đó ta thêm những thứ cần thiết cho forum của chúng ta
Túm lại mình share luôn thanh Toolbar mà forum Cntt-k3 đang dùng
Cách làm : [ Nội dung đã bị ẩn - Vui lòng trả lời để thấy ]
[Bài viết không bị Ẩn]
Bước 1 :
Kích hoạt Toolbar mặc định của diễn đàn :
Các bạn vào ACP >> MODULES >> Toolbar >> Cấu hình diễn đàn
làm như hình dưới
và ấn Chấp nhận
Bước 2 :
Cho đoạn này vào CSS
- Code:
#soloinvitadostopde32 {
position: fixed;
top: 1px;
z-index: 99999999!important;
margin-left: -150px;
}
#soloinvitadostopde32 a {
cursor: pointer;
display: inline-block;
height: 16px;
line-height: 26px;
margin: 0 6px;
font-size: 20pt;
font-family: 'Monotype Corsiva';
font-weight: bold;
color: #fff;
}
#soloinvitadostopde32 a#fa_notifications1 {
background-repeat: no-repeat;
background-image: url('http://cdn1.iconfinder.com/data/icons/crystalproject/32x32/filesystems/Globe.png');
background-size: 30px;
width: 30px;
height: 27px;}
#str {
display: block;
overflow: hidden;
padding: 20px 10px;
}#str label {
display: block;
}
#str input {
background-color: #424242;
border: 1px solid #000;
color: #5C5E61;
font-family: Arial, sans-serif;
font-size: 14px;
margin-bottom: 5px;
width: 250px;
}
input[type="password"], input[type="text"], textarea {
-webkit-border-radius: 3px;
background-color: #fff;
border: 1px solid #CCC;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
color: #515151;
cursor: text;
display: inline-block;
line-height: 18px;
padding: 4px;
}
#login_remember_p {
font-family: helvetica;
font-size: 11px;
font-style: normal;
font-variant: normal;
font-weight: normal;
}
#str .login_remember_p {
display: inline-block;
position: relative;
width: auto!important;
}
#buttonlogin input.mainoption {
background: -moz-linear-gradient(top,#97C92F,#71A00E);
border: 4px solid #000;
box-shadow: none;
color: #000;
display: block;
margin-top: 10px;
padding: 10px 0;
width: 100%;
}
#fa_search {
position: fixed;
z-index: 99999!important;
top: 1px;
margin-left: 150px!important;
}
#fa_icon {
display: none !important;
}
#fa_service {
display: none !important;
}
#soloinvitadostopde {
position: fixed;
right: 20px;
top: 1px;
z-index: 99999999!important;
}
#soloinvitadostopde a {
background: #EAEAEA;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
color: #000!important;
cursor: pointer;
display: inline-block;
height: 16px;
line-height: 16px;
margin: 0 3px;
padding: 7px 10px;
}
#soloinvitadostopde a#fa_notifications {
background: #badcf3;
}
.sutlogin {
background: rgb(223, 223, 223);
border: 1px solid #242424;
border-radius: 0 0 3px 3px;
color: #606364;
font-family: arial;
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: bold;
margin-top: 7px;
padding: 0;
position: absolute;
right: 110px;
top: 30px;
width: 291px;
z-index: 999;
}
body #fa_toolbar #live_notif .fa_notification {
background: -moz-linear-gradient(top,rgba(0, 163, 255, 0.74) ,rgba(0, 153, 255, 0.77))!important;}
body #fa_toolbar #live_notif {
position: fixed!important;
bottom: 10px!important;
left: 10px!important;
}
body #fa_toolbar #live_notif .fa_notification {
background: -webkit-linear-gradient(top, rgba(0, 163, 255, 0.74), rgba(0, 153, 255, 0.77))!important;
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.31);
opacity: 1!important;
border: 1px solid #017FBB;
}body #fa_toolbar #fa_menu:hover :visited{
background: transparent!important;
}
html body #fa_right a#fa_notifications.rightHeaderLink {
background: rgb(186, 220, 243);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
color: #000!important;
display: inline-block!important;
height: 16px;
line-height: 16px;
padding: 7px 5px;
}
body #fa_toolbar_hidden {
display: none!important;
}
body #fa_hide {
display: none!important;
}
body #fa_menu,body #fa_notifications {
border-left: 1px solid #333;
}
body #fa_toolbar {
position: fixed;
border-top: 1px solid #333;
box-shadow: 0 1px #000, 0 2px 1px rgba(0, 0, 0, .4);
background-color: #222;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
font-style: normal;
padding: 0px;
border-bottom: 7px solid #EAEAEA;
background: #35353e;
}
body #fa_magnifier {
display: none!important;
}
body #fa_search #fa_textarea {
color: #ddd;
outline: none;
background-image: url("http://i.imgur.com/nVk5EZS.png");
background-repeat: no-repeat;
background-position: 4px center;
width: 150px;
line-height: 0px;
text-indent: 0px !important;
padding-left: 24px!important;
background-color: rgb(17, 17, 17);
border-left: 4px solid rgb(84, 90, 99);
margin: 0px;
height: 32px;
border-right: 1px solid #333;
-webkit-transition: 0.5s;
-moz-transition-duration: 0.5s;
-htm-transition-duration: 0.5s;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
border-radius: 0px;
top: -2px;
position: relative;
}
body #fa_search #fa_textarea:focus {
width: 220px;
background-image: url("http://i.imgur.com/1jpriTU.png");
background-color: white;
color: rgb(40, 44, 49);
}
body #fa_toolbar #fa_right a.rightHeaderLink ,body #fa_share {
display: none!important;
}
#fa_toolbar #fa_menulist {
padding: 0px;
background: #EAEAEA;
border-radius: 0 0 3px 3px;
min-width: 340px;
margin-top: 7px;}
#fa_toolbar #fa_menulist li {
display: block;
background-color: transparent;
border: none;
height: 42px;
line-height: 42px;
padding-left: 20px;
margin-left: 150px;
}
#fa_toolbar #fa_menulist li:hover {
padding-left: 14px;
border-left: 6px solid #3995cd;
color: #fff;
background: #3a3a3a;
}
#fa_toolbar #fa_right .fa_separator {
display: none!important;
}
#fa_toolbar #fa_menulist :link, #fa_toolbar #fa_menulist :visited {
color: #999!important;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
font-style: normal;
display: block!important;}
#fa_toolbar #fa_menulist :hover:link, #fa_toolbar #fa_menulist :hover:visited {
background: none!important;
color: white!important;
}
#fa_toolbar #fa_right.notification #notif_list {
right: 0px!important;
}
body #fa_right.welcome #fa_menu #fa_welcome {
background: -ms-linear-gradient(top,#77AC0B,#71a00e);
background: -o-linear-gradient(top,#77AC0B,#71a00e);
background: linear-gradient(top,#77AC0B,#71a00e);
background: -webkit-linear-gradient(top, rgb(119, 172, 11) 0%,#71a00e 100%);
background: -moz-linear-gradient(top,#77AC0B,#71a00e);}
body #fa_toolbar #fa_welcome {
background: #EAEAEA;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
color: #000!important;
}
body #fa_toolbar > #fa_right.notification > #fa_notifications {
background: -webkit-linear-gradient(top, rgb(221, 110, 8) 0%,#ff811f 100%);
background: -moz-linear-gradient(top,#DD6E08 ,#ff811f);
background: -ms-linear-gradient(top,#DD6E08 ,#ff811f);
background: -o-linear-gradient(top,#DD6E08 ,#ff811f);
background: linear-gradient(top,#DD6E08 ,#ff811f);}
body #fa_toolbar #fa_right #notif_list li {
border-top: 1px solid #faf9f9!important;
border-bottom: 1px solid #cbcbcb!important;
position: relative;
background-image: -webkit-linear-gradient(top,#f1f0f1,#e4e4e4);
background-image: -moz-linear-gradient(#f1f0f1,#e4e4e4);
background-image: -ms-linear-gradient(top,#f1f0f1,#e4e4e4);
background-image: -o-linear-gradient(top,#f1f0f1,#e4e4e4);
background-image: linear-gradient(top,#f1f0f1,#e4e4e4);}
body #fa_toolbar #fa_right #notif_list li.see_all {
background: black;
border: 1px solid black!important;
text-align: center;
}
body #fa_toolbar #fa_right #notif_list li hr {
border: none;
}
body #fa_toolbar #fa_right #notif_list li .contentText a {
color: #1E79A4!important;
text-decoration: none!important;
}
body #fa_toolbar #fa_right #notif_list li .contentText a:hover {
color: #d85724!important;
}
#fa_right {
float: right;
font-size: 14px;
margin-right: 20px;
}
Bước 3 : Vào overall_header tìm code
- Code:
<div id="page-body">
- Code:
<span id="soloinvitadostopde32">
<a id="fa_welcome1" href="/forum">Cntt-k3</a>
</span>
<!-- BEGIN switch_user_logged_out -->
<span id="soloinvitadostopde">
<a id="fa_welcome" onclick="showhide(document.getElementById('boxloginhf')); return false;">Đăng nhập</a>
<a href="/register" id="fa_notifications" class="rightHeaderLink">Đăng ký</a>
<div id="boxloginhf" style="top: 23px; left: 1118px; display: none;">
<div class="sutlogin">
<form action="/login?redirect=/" method="post" name="form_login" id="signin">
<span id="str"> <label>Username:</label><input class="username" type="text" size="10" name="username"><label>Password:</label>
<input class="password" type="password" size="10" name="password"><p id="login_remember_p">
<input title="auto conectarse" class="login_remember_p" type="checkbox" name="autologin" checked="checked">Remember me on this computer</p>
<p id="buttonlogin"><input class="mainoption" type="submit" name="login" value="Đăng nhập"></p></span></form>
<script type="text/javascript">//<![CDATA[
$(function(){$('#signin').attr('action','/login?redirect='+this.location.pathname);});//]]></script>
</div></div></span>
<!-- END switch_user_logged_out -->
Thế là xong ^^ ! , bây giờ các bạn đã có 1 thanh Toolbar đẹp
[/Bài viết không bị Ẩn]