Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

bookmarks toolbar customization

  • 6 replies
  • 4 have this problem
  • 2 views
  • Last reply by cor-el

more options

I need to change the hover background color for the Bookmarks Toolbar. How?

I need to change the hover background color for the Bookmarks Toolbar. How?

Chosen solution

There might be an add-on or theme that offers this feature, among others. I haven't searched for one.

Generally speaking, there are two other approaches to customizing the browser's chrome: (1) style rules in the userChrome.css file, or (2) style rules in the Stylish add-on.

I can write a style that is partially successful: it bolds the text of the buttons when hovered. However, the background color doesn't change as specified:


toolbarbutton.bookmark-item:hover { font-weight:bold !important; background-color:green !important; }

Someone else will need to chime in on whether there is a secret to this or whether it's futile.

Read this answer in context 👍 1

All Replies (6)

more options

Chosen Solution

There might be an add-on or theme that offers this feature, among others. I haven't searched for one.

Generally speaking, there are two other approaches to customizing the browser's chrome: (1) style rules in the userChrome.css file, or (2) style rules in the Stylish add-on.

I can write a style that is partially successful: it bolds the text of the buttons when hovered. However, the background color doesn't change as specified:


toolbarbutton.bookmark-item:hover { font-weight:bold !important; background-color:green !important; }

Someone else will need to chime in on whether there is a secret to this or whether it's futile.

more options

Thanks. Yes, I'm looking for the specific CSS to use in the userChrome.css. Couldn't find a complete CSS list of rules or more detailed info on the Bookmarks Toolbar. For myself, the current rules add too much padding and too much rounding on the corners.

more options

Hey, I've tried your CSS and it worked! :) Green background and added -moz-border-radius:0 > all good!

more options

You beat me back to this thread. If you are using Stylish, I think this extra line is needed, at least on Windows:


Okay, I think I found it. You have to disable the platform-specific theming in order to style the buttons yourself:


toolbarbutton.bookmark-item { -moz-appearance:none !important; }

As far as other style rules, I think then you would be able to use border, margin, and padding rules just as you would for an input type button.

Modified by jscher2000 - Support Volunteer

more options

Thanks again. Don't want to go into massive customization, just that hover effect. Changed the background color and border radius... all good. I'll keep this info for future reference. Used userChrome.css. While using the above rules you can change the hor padding on links, the vert can't be overwritten. Didn't dig too deep though.

more options

You may need to use the padding on the .toolbarbutton-text selector.

#personal-bookmarks .bookmark-item > .toolbarbutton-text {}