Trang trí toolbar mặc định của FM bằng CSS

[subin217]

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

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}

Cho vào JavaScript

Code:

$(function(){$(function(){$('#fa_welcome').prepend('<span class="fa_avatar">'+_userdata.avatar+'</span>')})});

Mình đã rút gọn CSS lại rồi, mỗi cái một dòng cho gọn. Bây giờ FM nó làm cái mới rồi nên sẽ không thể thấy cái này nên nếu muốn xem demo thì vào forum của mình nhé: http://fmcodesvn.forumvi.com/
Lần thứ 2 rip có thể sẽ có sai sót ạ. Mong mọi người thông cảm