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

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

  • 9 பதிலளிப்புகள்
  • 3 இந்த பிரச்னைகள் உள்ளது
  • 168 views
  • Last reply by jbrandom2

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?

தீர்வு தேர்ந்தெடுக்கப்பட்டது

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 (9)

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;
}

Helpful?

@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.

Helpful?

தீர்வு தேர்ந்தெடுக்கப்பட்டது

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.

cor-el மூலமாக திருத்தப்பட்டது

Helpful?

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!

Helpful?

@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!

jbrandom2 மூலமாக திருத்தப்பட்டது

Helpful?

(never mind, the gap is very persistent)

jscher2000 மூலமாக திருத்தப்பட்டது

Helpful?

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;
}

Helpful?

@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:

jbrandom2 மூலமாக திருத்தப்பட்டது

Helpful?

கேள்வி எழுப்பு

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.