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

This thread was closed and archived. Please ask a new question if you need help.

CSS help needed: how do I recolor bookmark drop-down menus?

  • 12 replies
  • 3 have this problem
  • 3 views
  • Last reply by Chris Ilias

more options

So I've got Proton UI forced on me today in 92.0 update and accordingly had to spend my entire evening trying to repair all of the damage. So far I've managed to fix menu spacing and the way tabs look all while not breaking previous walls of text in userChrome.css meant to fix even older UI problems. Still one thing I failed to find any solutions to is the bookmark drop-down menus color issue. Those menus used to be gray, but now they are all bright white, which to me is super annoying. Any tips on how to fully recolor those?

So I've got Proton UI forced on me today in 92.0 update and accordingly had to spend my entire evening trying to repair all of the damage. So far I've managed to fix menu spacing and the way tabs look all while not breaking previous walls of text in userChrome.css meant to fix even older UI problems. Still one thing I failed to find any solutions to is the bookmark drop-down menus color issue. Those menus used to be gray, but now they are all bright white, which to me is super annoying. Any tips on how to fully recolor those?

Chosen solution

Something like this for the Bookmarks Toolbar ?

/*default for menupopup*/
menupopup {
  --panel-background: #08246d !important;
  --panel-color: white !important;
}

/*default for panels*/
panelview {
  --arrowpanel-background: #08246d !important;
  color: yellow !important;
}

/*each panel has a specific ID you can use to override a specific panel*/
#appMenu-libraryView, /*Library toolbar button*/
#appMenu-protonMainView {  /* 3-bar menu button */
  --arrowpanel-background: #08246d !important;
  color: white !important;
}

/*bookmarks toolbar*/
#PlacesToolbar menupopup[placespopup="true"] {
  --arrowpanel-background: #08246d !important;
  --arrowpanel-color: white !important;
}

You can use the Browser Toolbox to inspect the various panels.

Read this answer in context 👍 1

All Replies (12)

more options

Try something like this:

Add CSS code to the userChrome.css file.


menupopup {
  --panel-color: black !important;
  --panel-background: #e4e0d8 !important;
}

menu:not([disabled="true"])[_moz-menuactive="true"], menuitem:not([disabled="true"])[_moz-menuactive="true"] {
  background-color: #08246d !important;
  color: #fff !important;
}
more options

@cor-el That code recolored all the right click menus as well as File/Edit/View menus, but it did not recolor bookmark drop-down menus, which is what I wanted. It did change bookmark drop-down menu hover over a shortcut color from gray to dark blue and that's it, while what I need is to recolor bookmark drop-down menu backgrounds en mass. Also I like my right click/File/Edit/View menus as they are and don't really want them affected.

more options

So, no more ideas?

more options

Chosen Solution

Something like this for the Bookmarks Toolbar ?

/*default for menupopup*/
menupopup {
  --panel-background: #08246d !important;
  --panel-color: white !important;
}

/*default for panels*/
panelview {
  --arrowpanel-background: #08246d !important;
  color: yellow !important;
}

/*each panel has a specific ID you can use to override a specific panel*/
#appMenu-libraryView, /*Library toolbar button*/
#appMenu-protonMainView {  /* 3-bar menu button */
  --arrowpanel-background: #08246d !important;
  color: white !important;
}

/*bookmarks toolbar*/
#PlacesToolbar menupopup[placespopup="true"] {
  --arrowpanel-background: #08246d !important;
  --arrowpanel-color: white !important;
}

You can use the Browser Toolbox to inspect the various panels.

Modified by cor-el

more options

Hi jbrandom2, when you come up with the final working solution for menu coloring, please add your code to this thread for reference by other users, along with a screenshot showing the colors. Note: You can surround your code with <pre> and </pre> tags to preserve the formatting. Thanks!

more options

@cor-el Thank you!

That was exactly what I wanted:

/*bookmarks toolbar*/
#PlacesToolbar menupopup[placespopup="true"] {
  --arrowpanel-background: #f0f0f0 !important;
  --arrowpanel-color: black !important;
}

And this one was also useful for the hamburger button dropdown menu:

/*default for panels*/
panelview {
  --arrowpanel-background: #f0f0f0 !important;
  color: black !important;
}

Now I only need a couple of final strokes to bring my CSS to perfection.

1). I've noticed bookmark dropdown menus are currently the only kind of menus left with no border outline. I've tried to add this line at the end of bookmaks toolbar code section:

  border: 1px solid rgba(130, 130, 130, 0.5) !important;

It does add a darker border, but for some reason it floats around 3 pixels outside of an actual bookmarks dropdown menu instead of sticking to the sides.

2). The last dropdown menu left with no recolored background is the search bar dropdown menu. I would love to get a code for that one as well.

Once again, thank you for your help, we are almost there!

Modified by jbrandom2

more options

(never mind, the gap is very persistent)

Modified by jscher2000 - Support Volunteer

more options

You can add panel to the menupopup rule.

/*default for menupopup and panels*/
menupopup, panel {
  --panel-background: #f0f0f0 !important;
  --panel-color: black !important;
}

/*default for panelview*/
panelview {
  --arrowpanel-background: #f0f0f0 !important;
  --arrowpanel-color: black !important;
  color: black !important;
}
more options

@cor-el Thanks!

/*default for menupopup and panels*/
menupopup, panel {
  --panel-background: #f0f0f0 !important;
  --panel-color: black !important;
}


That did the trick to recolor search bar drop down menu. To think about it, the menu itself still looks pretty rough with no rounded edges and settings button taking way too much space for no reason (I think Firefox developers fell in love with their new combined URL/Search bar so much they obviously don't give a damn about the separate dedicated Search bar anymore). But that is a different topic altogether, I think I'll open a new thread for it.

jscher2000 said

Hi jbrandom2, when you come up with the final working solution for menu coloring, please add your code to this thread for reference by other users, along with a screenshot showing the colors. Note: You can surround your code with
 and 
tags to preserve the formatting. Thanks!

Menu recoloring code I asked for went on to become yet another part of a bigger CSS project, the end goal is a UI reminiscent of good old FF3.5 the way I remember it. The code is intended to work hand in hand with: 1). Office 2010 Aero theme: https://addons.mozilla.org/en-US/firefox/addon/office-2010-aero/ 2). Menu Panel is supposed to be on. 3). Compact Mode is on. Here is the full code:

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Modify to change window drag space width */
/*
Use tabs_on_bottom_menubar_on_top_patch.css if you
have menubar permanently enabled and want it on top
 */

/* IMPORTANT */
/*
Get window_control_placeholder_support.css
Window controls will be all wrong without it.
Additionally on Linux, you may need to get:
linux_gtk_window_control_patch.css
*/

:root{ --uc-titlebar-padding: 0px; }
@media (-moz-os-version: windows-win10){
  :root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px }
}
#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
#TabsToolbar > .titlebar-buttonbox-container{
  position: fixed;
  display: block;
  top: var(--uc-titlebar-padding,0px);
  right:0;
  height: 40px;
}
/* Mac specific. You should set that font-smoothing pref to true if you are on any platform where window controls are on left */
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
  :root{ --uc-titlebar-padding: 0px !important }
  .titlebar-buttonbox-container{ left:0; right: unset !important; }
}

:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }

#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }

.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }

#titlebar{
  -moz-box-ordinal-group: 2;
  -moz-appearance: none !important;
  --tabs-navbar-shadow-size: 0px;
}

.titlebar-placeholder,
#TabsToolbar .titlebar-spacer{ display: none; }
/* Also hide the toolbox bottom border which isn't at bottom with this setup */
#navigator-toolbox::after{ display: none !important; }

@media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } }

/* These exist only for compatibility with autohide-tabstoolbar.css */
toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
#navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }





/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public 

License v. 2.0
See the above repository for updates as well as full license text. */

/* Menubar on top patch - use with tabs_on_bottom.css */
/* Only really useful if menubar is ALWAYS visible */

:root:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important }

#navigator-toolbox{ padding-top: calc(21px + var(--uc-titlebar-padding,0px)) !important }
:root[sizemode="fullscreen"] #navigator-toolbox{ padding-top: 0px !important; }
#toolbar-menubar{
  position: fixed;
  display: flex;
  top: var(--uc-titlebar-padding,0px);
  height: 21px;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #f5faff !important;
}

#toolbar-menubar > .titlebar-buttonbox-container{ height: 21px; order: 100; }

#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
/  order: 99;
/  flex-grow: 1;
/  min-width: var(--uc-window-drag-space-width,20px);
}

#toolbar-menubar .titlebar-button{ padding: 2px 17px !important;  }

#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }




/* Tabs Style and Spacing fix */

.tab-background{
border-radius: 5px 5px 0px 0px !important;
margin-bottom: 0px !important;
}
.tabbrowser-tab:not([selected="true"]):not([multiselected="true"]) .tab-background {
  background-color: color-mix(in srgb, #7fb0ef 5%, transparent);
  border-top: 1px solid rgba(130, 130, 130, 0.2) !important;
  border-left: 1px solid rgba(130, 130, 130, 0.2) !important;
  border-right: 1px solid rgba(130, 130, 130, 0.2) !important;
}
  .tabbrowser-tab:not([selected]):hover .tab-background {
  background-color: color-mix(in srgb, #000000 12%, transparent) !important;
}

menupopup > menu, menupopup > menuitem{
padding-block: 0px !important;
min-height: 0px !important;
}
:root{
--arrowpanel-menuitem-padding: 2px !important;
}

#PlacesToolbarItems .bookmark-item {
padding-top: 2px !important;
padding-bottom: 2px !important;
}

/*bookmarks toolbar*/
#PlacesToolbar menupopup[placespopup="true"] {
  --arrowpanel-background: #f0f0f0 !important;
  --arrowpanel-color: black !important;

}

/*default for panels*/
panelview {
  --arrowpanel-background: #f0f0f0 !important;
  color: black !important;
}

/*default for menupopup and panels*/
menupopup, panel {
  --panel-background: #f0f0f0 !important;
  --panel-color: black !important;
}

/*** Tab Close buttons ***/
.tabbrowser-tab .tab-close-button {
 margin-top: 4px !important;
}


Here are some screenshots:

Modified by jbrandom2

more options

Hi I entered your code above and it screwed up the tool bar sizes made the address bar go a little bit above the menu bar it also had blank white spaces under some items like under Edit. Undo and Redo was white like the background so it just looked like a blank space anyway to fix that?

more options

Hi Derek, there is a lot of different code in this thread.

To copy the link to a specific reply identifying the code that isn't working for you, right-click the date/time below the poster's name and Copy Link. Then you can paste that into a reply for reference.

Alternately, you could start a new thread:

https://support.mozilla.org/questions/new/desktop/form

more options

I'll lock this thread so other people stop using for their own questions.