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 selectors
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 }
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
- 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
- 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
- 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
- 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_
- 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 ! 
|
Hitskin.com
by Ange Tuteur Thu 27 Nov - 23:08
Toolbar selectors
Facebook
Twitter
Pinterest
Youtube
