Lúc trước khi FM vừa cập nhật giao diện mới, mình thấy toolbar mặc định ở đó cũng đẹp nên có 'RIP' về để dùng, thấy nó cũng được nên share cho anh em. Chỉ dùng CSS và một đoạn JavaScript nhỏ thôi
Demo ảnh:
Kích hoạt FM Toolbar => ACP => Modules => Toolbar => Cấu hình diễn đàn => Activate the toolbar : Chọn 'Có' => Fix the toolbar: 'Có' sau đó cho đoạn sau vào CSS
Lần thứ 2 rip có thể sẽ có sai sót ạ. Mong mọi người thông cảm
Demo ảnh:
Kích hoạt FM Toolbar => ACP => Modules => Toolbar => Cấu hình diễn đàn => Activate the toolbar : Chọn 'Có' => Fix the toolbar: 'Có' sau đó cho đoạn sau vào CSS
- Code:
/* FM toolbar - rip by KTV2 */
a[href*="/login"] { width: 100px; text-align: center; }a[href*="/register"] { width: 100px; text-align: center; }
#fa_welcome:hover,#fa_right #fa_notifications:hover,#fa_right a.rightHeaderLink:hover,#fa_right.welcome #fa_menu #fa_welcome,#fa_toolbar > #fa_right.notification > #fa_notifications{background-color:#39C!important;color:#FFF!important}
#fa_right #fa_hide{background-color:transparent!important;margin-top:0!important;padding:0!important}
#fa_share a{background:url(http://i18.servimg.com/u/f18/18/45/41/65/fa_sha10.png) no-repeat 0 0 #FFF!important;border-radius:25px;height:25px!important;margin:-2px 3px 0!important;width:25px!important}
#fa_share a:hover{background-color:#39C!important}
a#fa_fb{background-position:-50px 0!important}
a#fa_fb:hover{background-position:-75px 0!important}
a#fa_twitter{background-position:0 0!important}
a#fa_twitter:hover{background-position:-25px 0!important}
a#fa_gp{background-position:-98px 0!important}
a#fa_gp:hover{background-position:-123px 0!important}
a#fa_mail{background-position:-150px 0!important}
a#fa_mail:hover{background-position:-175px 0!important}
a#fa_rss{background-position:-199px 0!important}
a#fa_rss:hover{background-position:-224px 0!important}
#fa_search{position:relative}
#fa_search #fa_magnifier{background:url(http://i18.servimg.com/u/f18/18/45/41/65/fa_sea10.png) no-repeat 0 0 #EEE!important;border:1px solid #DDD;border-left:none;border-radius:0 3px 3px 0;height:22px!important;right:0;top:3px;width:22px!important}
#fa_search #fa_magnifier:hover{background-color:#39C!important;background-position:-22px 0!important;border-color:#39C}
#fa_search #fa_textarea{background:#FFF!important;border:1px solid #DDD!important;border-radius:3px 0 0 3px!important;cursor:text;font-size:12px!important;height:16px!important;margin-right:23px!important;padding:3px!important;text-indent:0!important;width:150px!important}
#fa_search #fa_textarea:focus{border-color:#39C!important;outline:none}
#fa_menulist,#fa_toolbar #fa_right #notif_list{background:#FFF!important;border:1px solid #DDD!important;border-radius:3px;box-shadow:0 6px 12px rgba(0,0,0,0.175);color:#FFF!important;margin-top:18px!important}
#fa_menulist:before,#fa_toolbar #fa_right #notif_list:before{content:url('http://i18.servimg.com/u/f18/18/21/41/30/arrow11.png');position:absolute;right:10%;top:-10px}
#fa_toolbar #fa_right #notif_list li.see_all{background:#39C!important}
#fa_toolbar #live_notif .fa_notification{background:#FFF!important;border:1px solid #DDD;border-bottom-width:2px;border-radius:3px!important;box-shadow:0 3px 12px rgba(0,0,0,0.175);margin-top:5px;opacity:1!important}
#fa_toolbar #live_notif .fa_notification .content{background-image:url(http://i18.servimg.com/u/f18/16/89/96/68/notifi10.png)!important;color:#333!important}
#fa_toolbar #live_notif .fa_notification a{color:#39C!important}
#fa_toolbar #live_notif .fa_notification a:hover{color:#333!important}
#notif_unread{color:#F93;font-weight:700}
#fa_notifications:hover #notif_unread,#fa_toolbar > #fa_right.notification > #fa_notifications #notif_unread{color:#FFF}
#fa_hide,#fa_show{background:url(http://i18.servimg.com/u/f18/18/45/41/65/fa_arr10.png) no-repeat 0 0 transparent!important}
#fa_hide:hover{background-position:-30px 0!important}
#fa_show{background-position:-60px 0!important}
#fa_show:hover{background-position:-90px 0!important}
.fa_avatar img{width:25px;height:25px;margin-right:5px;margin-bottom:-7px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
#fa_icon{background-image:url(http://i18.servimg.com/u/f18/18/21/41/30/pa11.png)!important}
#fa_right #fa_menu #fa_welcome,#fa_right.notification #fa_menu #fa_welcome{text-decoration:none}
#fa_welcome,#fa_right #fa_notifications{line-height:30px;padding:0 5px;color:#FFF;text-decoration:none}
- Code:
$(function(){$(function(){$('#fa_welcome').prepend('<span class="fa_avatar">'+_userdata.avatar+'</span>')})});
Lần thứ 2 rip có thể sẽ có sai sót ạ. Mong mọi người thông cảm