Current date/time is December 11th 2018, 11:41 am

Search found 3 matches for fa_menulist

Can't change the Toolbar color in administration panel.

Now I see the problem Smile the codes are great and working
but not for that which I was looking for, I'm looking for changing the #fa_menulist
The background of the window when you click on "welcome (username)"
Like in the picture which I linked to in the first comment :3
because when my whole site is in black and dark colours, it seems kind of odd that the menulist's background colour is white ^^

So maybe the other codes did work but because the toolbar itself is darkgrey and I was only looking at the changes in the menulist's colour(which did not change because the codes code for the toolbar ifself not the menulist) then I did not see the changes of the toolbar's colour. Smile
by medusa
on January 11th 2015, 5:37 am
 
Search in: Design & Appearance Problems Archives
Topic: Can't change the Toolbar color in administration panel.
Replies: 14
Views: 564

Can't change the Toolbar color in administration panel.

Hallo everyone.

I really love the toolbar but my main problem is that even though I have changed the colour for
Editor background color (Toolbar)

Then it changes nothing!
I really want to change the colour of the #fa_menulist
but I do not know how to do it Smile

Here is a picture so you can see that the menulist' colour doesn't quite fit to the color of the site.
https://i.servimg.com/u/f38/17/54/90/51/new_bi12.jpg


and a little extra thing if you know how to remove the #fa_share .... plz do tell me! Smile

yours
Medusa
by medusa
on January 11th 2015, 1:35 am
 
Search in: Design & Appearance Problems Archives
Topic: Can't change the Toolbar color in administration panel.
Replies: 14
Views: 564

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



Toolbar selectors

#fa_toolbarEntire toolbar
#fa_search / #fa_textarea
#fa_magnifier
#fa_share
#fa_share_text
#fa_fb
#fa_twitter
#fa_gp
#fa_mail
#fa_rss
#fa_right
#fa_welcome
#fa_notifications
#notif_unread
#fa_hide
#fa_show
#fa_menulist
#fa_usermenu
#fa_ranktitle
#notif_list
li.see_all
li.unread
#notif_list li .contentText
#notif_list li a.delete
div.fa_notification
div.fa_notification .content




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 !  




by Ange Tuteur
on November 27th 2014, 11:08 pm
 
Search in: Tips & Tricks
Topic: Personalize the entire toolbar with CSS
Replies: 0
Views: 6585

Back to top

Jump to: