DownTophomehome




Diễn Đàn » Lưu Trữ » Code Forumotion

 
Đăng Nhập / Đăng Ký

[ Code Forumotion ] Tùy chỉnh thanh toolbar


Like hoặc chia sẻ nếu bạn thích bài viết





  Thông điệp [ Trang 1 trong tổng số 1 trang ]

1
[ Code Forumotion ] Tùy chỉnh thanh toolbar Empty Fri 13 May 2016 - 3:48
Tử Thần

Tử Thần

Ban Truyền Thông
1 . Đôi khi các chi tiết thừa của thanh Toolbar mặc định làm bạn khó chịu , bạn có thể dùng các đoạn mã CSS sau đây để lọai bỏ các chi tiết thừa đó .


#fa_toolbartoàn bộ thanh công cụ
#fa_search / #fa_textarea[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur19
#fa_magnifier[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur43
#fa_share[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur20
#fa_share_text[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur21
#fa_fb[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur22
#fa_twitter[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur23
#fa_gp[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur24
#fa_mail[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur25
#fa_rss[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur26
#fa_right[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur27
#fa_welcome[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur28
#fa_notifications[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur30
#notif_unread[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur29
#fa_hide[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur31
#fa_show[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur32
#fa_menulist[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur33
#fa_usermenu[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur41
#fa_ranktitle[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur42
#notif_list
Phóng to hình ảnh này
[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur34
li.see_all[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur35
li.unread[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur36
#notif_list li .contentText[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur39
#notif_list li a.delete[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur40
div.fa_notification[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur37
div.fa_notification .content[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur38
Gỡ bỏ thanh Search Bar Administration Panel > Display > Colors > CSS stylesheet
Code:
#fa_search { display:none !important }

Gỡ bỏ Share Buttons
Code:
#fa_share { display:none !important }


Các bạn có thể tham khảo các đoạn mã ở trên và tùy chính để loại bỏ các chi tiết thừa trong thanh Toolbar .

2 . Cài đặt giao diện thanh toolbar Administration Panel > Display > Colors > CSS stylesheet

Demo :
[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur44

Code:
div#fa_toolbar {
  background-color: #24384c;  /* Background color */
  border-radius: 0 0 50px 50px;  /* Rounds borders of the toolbar */
  box-shadow: 0 0 5px #000000;  /* Displays a shadow */
  margin: auto;  /* Center the toolbar */
  width: 98%;  /* Width of the toolbar */
}
 
div#fa_toolbar div, div#fa_toolbar span {
  margin: 0 15px;  /* Reposition the toolbar contents */
}

Giao diện 2

Demo :
[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur45

Code:
div#fa_toolbar {
    background-color: #657488;  /* Background color */
    border: 2px solid white;  /* Add a white border */
    border-radius: 50px;  /* Rounds borders of the toolbar */
    margin: auto;  /* Center the toolbar */
    top: 10px;  /* Space above the toolbar */
    width: 98%;  /* Width of the toolbar */
}
 
a#fa_hide {
    display: none!important;  /* Remove the hide button */
}
 
div#fa_toolbar div, div#fa_toolbar span {
    margin: 0 15px;  /* Reposition the toolbar contents */
}

Giao diện 3

Demo :
[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur46

Code:
#fa_toolbar {
    background-color: transparent !important;  /* Make the main toolbar bg transparent */
}
#fa_right {
    background-color: #000000;  /* Background color */
    border-radius: 0 0 40px 40px;  /* Border roundness */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
    position: relative;  /* Position of the toolbar */
    right: 20px;  /* Décale la toolbar de la droite */
}
 
#fa_left {
    background-color: #000000;  /* Background color */
    border-radius: 0 0 0 40px;  /* Border roundness */
    position: relative;  /* Position of the toolbar */
    left: 20px;  /* Spacing to the left of the toolbar */
    margin-top: -1px;  /* Small -1px correction : may depend on your forum (can be changed) */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
}
 
#fa_search {
    background-color: #000000;  /* Background color */
    margin-top: -1px;  /* Small -1px correction : may depend on your forum (can be changed) */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
}
 
#fa_share {
    background-color: #000000;  /* Background color */
    border-radius: 0 0 40px;  /* Border roundness */
    position: relative;  /* Position of the toolbar */
    left: -20px;  /* Spacing to the left of the toolbar */
    margin-top: -1px;  /* Small -1px correction : may depend on your forum (can be changed) */
    padding-left: 10px;  /*Left padding */
    padding-right: 10px;  /* Right padding */
}

Giao diện 4

Demo:
[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur47

Code:
#fa_toolbar {
    background-color: transparent !important;  /* Make the main toolbar bg transparent */
}
 
#fa_right {
    background-color: #b3b3b3;  /* Background color */
    border-radius: 0 0 0 40px;  /* Border roundness */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
}
 
#fa_left {
    background-color: #b3b3b3;  /* Background color */
    margin-top: -1px;  /* Small -1px correction : may depend on your forum (can be changed) */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
}
 
#fa_search {
    background-color: #b3b3b3;  /* Background color */
    margin-top: -1px;  /* Small -1px correction : may depend on your forum (can be changed) */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
    position: relative;  /* Position of the toolbar */
    left: -20px;  /* Spacing to the left of the toolbar */
}
 
#fa_share {
    background-color: #b3b3b3;  /* Background color */
    border-radius: 0 0 40px;  /* Border roundness */
    left: -40px;  /* Spacing to the left of the toolbar */
    margin-top: -1px;  /* Small -1px correction : may depend on your forum (can be changed) */
    padding-left: 10px;  /* Left padding */
    padding-right: 10px;  /* Right padding */
    position: relative;  /* Position of the toolbar */
}

Giao diện 5

Demo :
[ Code Forumotion ] Tùy chỉnh thanh toolbar Captur99

Code:
   #fa_share:after{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-right: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-3px!important;
    }
    #fa_share:before{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      left:-29px !important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-left: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-3px !important;
    }
    #fa_share{
      margin-left:450px!important;
      background-color: rgba(0,0,0, 0.5)!important;
      position:absolute!important;
      border-radius: 0px 0px 2px 2px!important;
    }
 
    #fa_search:after{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-right: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-5px!important;
    }
    #fa_left:before{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      left:-30px !important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-left: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-5px !important;
    }
    #fa_search{
      margin-left:151px!important;
      background-color: rgba(0,0,0, 0.5)!important;
      position:absolute!important;
    }
    #fa_left{
      margin-left:40px!important;
      background-color: rgba(0,0,0, 0.5)!important;
      position:absolute !important;
    }
    #fa_toolbar{
      background-color:transparent!important;
    }
    #fa_right:after{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-right: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-5px!important;
    }
    #fa_right:before{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      left:-30px !important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-left: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-5px !important;
    }
    #fa_right{
      margin-left:780px!important;
      background-color: rgba(0,0,0, 0.5) !important;
      position:absolute !important;
      border-radius: 0px 0px 2px 2px!important;
    }
#fa_toolbar_hidden:after{
  border-radius: 0px 0px 5px 5px!important;
  content:""!important;
  position:absolute!important;
  border-top: 35px solid  rgba(0,0,0, 0.5)!important;
  border-right: 30px solid transparent!important;
  display:inline-block!important;
  margin-top:-5px!important;
}
    #fa_toolbar_hidden:before{
      border-radius: 0px 0px 5px 5px!important;
      content:"";left:-30px !important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-left: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-5px !important;
    }
    #fa_toolbar_hidden{
      margin-right:30px!important;
      background-color: rgba(0,0,0, 0.5)!important;
      border-radius: 0px 0px 2px 2px!important;
    }
 
    #fa_menulist{
      float:right!important;
      margin-left: -210px !important;
      background-color: rgba(0,0,0, 0.5)!important;
      position: absolute !important;
      border-radius: 0px 0px 2px 2px!important;
      border:none;
    }
    #fa_toolbar #fa_right #notif_list li.see_all {
      color:white !important;
      background-color: rgba(0,0,0, 0.5)!important;
    }
    #fa_menulist:after{
      content:""!important;
      position:absolute!important;
      top:-2px!important;
      border-bottom: 270px solid  rgba(0,0,0, 0.5) !important;
      right:-20px!important;
      border-right: 20px solid transparent!important;
      display:inline-block!important;
      margin-top:-0px!important;
    }
    #fa_menulist:before{
      content:""!important;
      left:-20px !important;
      position:absolute!important;
      border-top: 270px solid  rgba(0,0,0, 0.5)!important;
      border-left: 20px solid transparent!important;
      display:inline-block!important;
      margin-top:6!important!;
    }
    #fa_welcome,#fa_toolbar #fa_right #notif_list,#fa_notifications,
#fa_toolbar #fa_menulist li a,#fa_menulist #fa_ranktitle,#fa_menulist td{
  background-color:transparent !important;
  color:white !important;
}
#notif_list li { background:#CCC !important }

Nguồn : http://help.forumotion.com/t137076-personalize-the-entire-toolbar-with-css

+1

Thông điệp  [ Trang 1 trong tổng số 1 trang ]


  


   Bình Luận Facebook

Permissions in this forum:
Bạn không có quyền trả lời bài viết