[Đóng góp] Trang trí toolbar mặc định của FM bằng CSS

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

hàng hot ờ nha :)) tem + phong bì ròi nhé bạn ^^~ mà không biết có skin nào phù hợp với style này không nữa T.T

@Kelvin_Kingleon skin nào màu chủ đạo là xanh dương í bạn
Mình quên mất cái đoạn này trong CSS

Code:

a[href*="/login"] {....}

Đoạn đó có thể bị xung đột width (chiều rộng) của link đăng xuất ở forum bạn thì link đăng xuất là ...../login?logout.... nên ai dùng bị xung đột thì chèn đoạn này vào CSS nhé

Code:

a[href="/login?logout"] {width: chiều rộng bạn tự chọn để phù hợp với forum nhé}

Còn pro nào giúp được thì giúp dùm mình đoạn đó nhé

Forum của mình sao ko còn hiện cái đó nữa, là sao vậy bạn
Demo: http://studymore.forumvi.com/

Chưa kích hoạt Toolbar thì hiện bằng niềm tin à?

xài rất tốt :)) cảm ơn

Cảm ơn bằng hành động đi chứ. Để có sức mốt share tiếp cho :D :caulikevai:

@ktv2: mình tín dụng đầu tiên ròi mừ :"> thích thì like này, like này :))