Current date/time is March 29th 2024, 8:57 am

Search found 1 match for fa_ranktitle

Personalize the entire toolbar with CSS

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



Topics tagged under fa_ranktitle on The forum of the forums 09615110 Toolbar selectors

#fa_toolbarEntire toolbar
#fa_search / #fa_textareaTopics tagged under fa_ranktitle on The forum of the forums Captur19
#fa_magnifierTopics tagged under fa_ranktitle on The forum of the forums Captur43
#fa_shareTopics tagged under fa_ranktitle on The forum of the forums Captur20
#fa_share_textTopics tagged under fa_ranktitle on The forum of the forums Captur21
#fa_fbTopics tagged under fa_ranktitle on The forum of the forums Captur22
#fa_twitterTopics tagged under fa_ranktitle on The forum of the forums Captur23
#fa_gpTopics tagged under fa_ranktitle on The forum of the forums Captur24
#fa_mailTopics tagged under fa_ranktitle on The forum of the forums Captur25
#fa_rssTopics tagged under fa_ranktitle on The forum of the forums Captur26
#fa_rightTopics tagged under fa_ranktitle on The forum of the forums Captur27
#fa_welcomeTopics tagged under fa_ranktitle on The forum of the forums Captur28
#fa_notificationsTopics tagged under fa_ranktitle on The forum of the forums Captur30
#notif_unreadTopics tagged under fa_ranktitle on The forum of the forums Captur29
#fa_hideTopics tagged under fa_ranktitle on The forum of the forums Captur31
#fa_showTopics tagged under fa_ranktitle on The forum of the forums Captur32
#fa_menulistTopics tagged under fa_ranktitle on The forum of the forums Captur33
#fa_usermenuTopics tagged under fa_ranktitle on The forum of the forums Captur41
#fa_ranktitleTopics tagged under fa_ranktitle on The forum of the forums Captur42
#notif_listTopics tagged under fa_ranktitle on The forum of the forums Captur34
li.see_allTopics tagged under fa_ranktitle on The forum of the forums Captur35
li.unreadTopics tagged under fa_ranktitle on The forum of the forums Captur36
#notif_list li .contentTextTopics tagged under fa_ranktitle on The forum of the forums Captur39
#notif_list li a.deleteTopics tagged under fa_ranktitle on The forum of the forums Captur40
div.fa_notificationTopics tagged under fa_ranktitle on The forum of the forums Captur37
div.fa_notification .contentTopics tagged under fa_ranktitle on The forum of the forums Captur38




Topics tagged under fa_ranktitle on The forum of the forums 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 }




Topics tagged under fa_ranktitle on The forum of the forums 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
Topics tagged under fa_ranktitle on The forum of the forums 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
Topics tagged under fa_ranktitle on The forum of the forums 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
Topics tagged under fa_ranktitle on The forum of the forums 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
Topics tagged under fa_ranktitle on The forum of the forums 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_
Topics tagged under fa_ranktitle on The forum of the forums 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 !  Topics tagged under fa_ranktitle on The forum of the forums 1852325475




by Ange Tuteur
on November 28th 2014, 6:08 am
 
Search in: Tips & Tricks
Topic: Personalize the entire toolbar with CSS
Replies: 0
Views: 11077

Back to top

Jump to: