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

  Bài viết hay nhất1
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
  Bài viết hay nhất2
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
  Bài viết hay nhất3
@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 dài) 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 dài 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é
  Bài viết hay nhất4
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/
  Bài viết hay nhất5
Chưa kích hoạt Toolbar thì hiện bằng niềm tin à?
  Bài viết hay nhất6
xài rất tốt :)) cảm ơn
  Bài viết hay nhất7
Cảm ơn bằng hành động đi chứ. Để có sức mốt share tiếp cho :D :caulikevai:
  Bài viết hay nhất8
@ktv2: mình tín dụng đầu tiên ròi mừ :"> thích thì like này, like này :))
You cannot reply to topics in this forum