The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Personalize the entire toolbar with CSS

The forum of the forums :: About Forumotion ::   :: Tips & Tricks

Go down

Tutorial Personalize the entire toolbar with CSS

Post by Ange Tuteur November 28th 2014, 6:08 am

Personalize the entire toolbar with CSS

The following tutorial will help you know the different CSS selectors used on the toolbar of your Forumotion forum. This will allow you to personalize your toolbar's appearance, so it fits with the rest of the forum.

All codes are added in :
Administration Panel > Display > Colors > CSS stylesheet



Toolbar - Personalize the entire toolbar with CSS 09615110 Toolbar selectors

#fa_toolbarEntire toolbar
#fa_search / #fa_textareaToolbar - Personalize the entire toolbar with CSS Captur19
#fa_magnifierToolbar - Personalize the entire toolbar with CSS Captur43
#fa_shareToolbar - Personalize the entire toolbar with CSS Captur20
#fa_share_textToolbar - Personalize the entire toolbar with CSS Captur21
#fa_fbToolbar - Personalize the entire toolbar with CSS Captur22
#fa_twitterToolbar - Personalize the entire toolbar with CSS Captur23
#fa_gpToolbar - Personalize the entire toolbar with CSS Captur24
#fa_mailToolbar - Personalize the entire toolbar with CSS Captur25
#fa_rssToolbar - Personalize the entire toolbar with CSS Captur26
#fa_rightToolbar - Personalize the entire toolbar with CSS Captur27
#fa_welcomeToolbar - Personalize the entire toolbar with CSS Captur28
#fa_notificationsToolbar - Personalize the entire toolbar with CSS Captur30
#notif_unreadToolbar - Personalize the entire toolbar with CSS Captur29
#fa_hideToolbar - Personalize the entire toolbar with CSS Captur31
#fa_showToolbar - Personalize the entire toolbar with CSS Captur32
#fa_menulistToolbar - Personalize the entire toolbar with CSS Captur33
#fa_usermenuToolbar - Personalize the entire toolbar with CSS Captur41
#fa_ranktitleToolbar - Personalize the entire toolbar with CSS Captur42
#notif_listToolbar - Personalize the entire toolbar with CSS Captur34
li.see_allToolbar - Personalize the entire toolbar with CSS Captur35
li.unreadToolbar - Personalize the entire toolbar with CSS Captur36
#notif_list li .contentTextToolbar - Personalize the entire toolbar with CSS Captur39
#notif_list li a.deleteToolbar - Personalize the entire toolbar with CSS Captur40
div.fa_notificationToolbar - Personalize the entire toolbar with CSS Captur37
div.fa_notification .contentToolbar - Personalize the entire toolbar with CSS Captur38



Toolbar - Personalize the entire toolbar with CSS 09615110 Trick : removal of elements

Remove the search bar :
Code:
#fa_search { display:none !important }

Remove the share buttons :
Code:
#fa_share { display:none !important }

Remove the link "Welcome Guest" :
Code:
#fa_welcome { display:none !important }

Remove the button "Hide toolbar" :
Code:
#fa_hide { display:none !important }



Toolbar - Personalize the entire toolbar with CSS 09615110 Self service

Copy / paste any of the following codes to install the toolbar of your choice on your forum :
Administration Panel > Display > Colors > CSS stylesheet
The colors were chosen at random and can be changed easily !

Self service 1
Toolbar - Personalize the entire toolbar with CSS 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 */
}

Self service 2
Toolbar - Personalize the entire toolbar with CSS 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 */
}

Self service 3
Toolbar - Personalize the entire toolbar with CSS 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 */
}

Self service 4
Toolbar - Personalize the entire toolbar with CSS 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 */
}


Self service 5
Thanks to _Twisted_Mods_
Toolbar - Personalize the entire toolbar with CSS 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 }

Want to propose another toolbar for self service? Do not hesitate to send it to us by PM !  Toolbar - Personalize the entire toolbar with CSS 1852325475



This tutorial was written by Matriochka and Tech of the French Support,
Translated to English by Ange Tuteur.


Last edited by APE on September 17th 2018, 11:20 pm; edited 4 times in total (Reason for editing : Typo)
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

TonnyKamper and faerycharmjulie like this post

Back to top Go down

Back to top

- Similar topics

The forum of the forums :: About Forumotion ::   :: Tips & Tricks

 
Permissions in this forum:
You cannot reply to topics in this forum