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

How do I customize the background color of the Bookmarks Drop Down Menu?

more options

The drop down bookmark menu is a very light grey and the highlighting is also very light and hard to see. Where in about:config can I change these colors. Also is there a way to bold certain bookmark items in the bookmark menu?

I'm using ver. 19.02

The drop down bookmark menu is a very light grey and the highlighting is also very light and hard to see. Where in about:config can I change these colors. Also is there a way to bold certain bookmark items in the bookmark menu? I'm using ver. 19.02

All Replies (5)

more options

There are no about:config preferences to change what you mentioned. The simplest way to change the colors is to install a Complete Theme. Comprehensive themes like NASA Night Launch or Noia 4 give Firefox a full makeover.

If you don't find any complete theme to your liking, then to accomplish what you want you'll need a knowledge of CSS, the Stylish extension and the DOM Inspector extension.

  1. https://developer.mozilla.org/en-US/docs/CSS
  2. https://addons.mozilla.org/firefox/addon/stylish/
  3. https://developer.mozilla.org/en-US/docs/DOM_Inspector

I will provide an example below showing how to change the background for the Bookmarks icon menu and the menu bar Bookmarks menu — since you didn't mention which one you want to affect — and how to display certain bookmark items and folders in bold text.
If you need something besides that, then it would probably be best to head over to the Userstyles.org forum and ask for help with CSS code there.


@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* Bookmarks button menu background */
#BMB_bookmarksPopup > hbox {
  background: silver !important;
}

/* Menu bar bookmarks menu background */
#bookmarksMenuPopup > hbox {
  background: silver !important;
}

/* Display a certain single item in the bookmarks button menu using bold text */
#BMB_bookmarksPopup menuitem[label="Show All Bookmarks"] {
  font-weight: bold !important;
}

/* Display a certain single item in the menu bar bookmarks menu using bold text */
#bookmarksMenuPopup menuitem[label="Show All Bookmarks"] {
  font-weight: bold !important;
}

/* Display a certain folder in the bookmarks button menu using bold text */
#BMB_bookmarksPopup menu[label="Recently Bookmarked"] {
  font-weight: bold !important;
}

/* Display a certain folder in the menu bar bookmarks menu using bold text */
#bookmarksMenuPopup menu[label="Recently Bookmarked"] {
  font-weight: bold !important;
}

more options

Thanks for getting back to me on my question. But YIKES... I have no idea how do do what you suggested. I looked at the links, but they are pretty much Greek to me. I appreciate the amount of time you put into typing up the example and I'm sure the example is great, but again...I have no idea how to use it or where to put it. The Bookmark menu background I am speaking of is the "Bookmarks" menu item at the top of the page between "History" and "Tools". When you open it up it shows a light grey background and a very light highlighter as you move your cursor up or down the list. The background color is OK but it would be nice to be able to darken the highlighter. As far as bolding certain bookmarked items in the menu, that would just be a plus. Although I'm pretty good with computers (I build my own) I wish there was a step by step (Firefox for Dummies) way to accomplish the above tasks. Thanks for trying to help. BM

Izmjenjeno od strane bmail

more options

That code belongs in a userChrome.css file which you need to create.
http://kb.mozillazine.org/UserChrome.css

That is accomplished quite easily using this extension.
http://webdesigns.ms11.net/chromeditp.html

more options

Wow that worked! Thanks. Now I have 3 more questions. 1. The main bookmark menu is now the color I want, however the sub menus remain the original color. What code would I need to have all the sub menus be the same background color as the main bookmark menu? 2. What code would I use to change the highlight color that you see as your cursor hovers over the menu items? 3. I'm fuzzy on how to use the code that gingerbread_man included to allow me to make certain bookmark menu items bold. How do I designate what menu items I want in bold face? Thanks

more options

bmail wrote:

I appreciate the amount of time you put into typing up the example and I'm sure the example is great, but again...I have no idea how to use it or where to put it.

You were supposed to install the Stylish extension. Once installed, there's a new category in the Add-ons Manager called User Styles. In that category, there's a button labeled Write New Style which opens a window where you can paste or write CSS code; click the Preview button to see what how your style affects the interface or a web page, or the Save button to keep it.

Styles in the userChrome.css file cannot be previewed, and any changes only take effect after restarting Firefox. Since the ChromeEdit Plus extension simply allows you to edit that file, presumably it has the same limitations.

Anyway...

bmail wrote:

What code would I need to have all the sub menus be the same background color as the main bookmark menu?

/* Menu bar bookmarks menu background */
#bookmarksMenuPopup hbox {
  background: silver !important;
}

Note that you can replace silver with another named color, or an RGB color value.

bmail wrote:

What code would I use to change the highlight color that you see as your cursor hovers over the menu items?

I wrestled with this one for a while, but I couldn't get it to work, and I gave up due to time constraints. Again, I suggest you head over to the userstyles.org forum and ask there.

bmail wrote:

How do I designate what menu items I want in bold face?

The relevant bit of information is the bookmark or folder name. Note the value of the label attribute in the above example (the stuff between quotation marks); that's how you show the Recently Bookmarked folder in bold text. You can combine several selectors (the stuff before the first { character) into one by separating them with a comma, like so:


#bookmarksMenuPopup menu[label="Some folder"],
#bookmarksMenuPopup menu[label="A different folder"],
#bookmarksMenuPopup menuitem[label="This one's a bookmark"],
#bookmarksMenuPopup menuitem[label="Some other bookmark"],
#bookmarksMenuPopup menu[label="Yet another folder"] {
  font-weight: bold !important;
}

You're welcome.