Request CSS snippet for v92 menu panel background color

User Help for Mozilla Firefox
Post Reply
DSperber
Posts: 155
Joined: September 30th, 2012, 1:52 pm

Request CSS snippet for v92 menu panel background color

Post by DSperber »

I'm still trying to recover from the style revisions forced on us with v92 that now render CSS which worked perfectly with v91 but no longer work with v92.

In particular, I'm looking for whatever needs to be newly added or changed to my v92 userChrome.css in order to bring back the way my menu dropdowns directly from the Bookmarks Toolbar looked under v91. I had colorized the menu panel background color to be a light gray, i.e. "eaeaea". This no longer works in v91 for dropdowns directly from the Bookmarks Toolbar, which now is simply a default pure white background. So obviously some different CSS is required, and I need some expert to suggest what will work.

My existing CSS element which produced the light gray background for menu dropdowns with v91 is as follows, and seems to have no effect at all with v92 since the menu dropdown background is now pure white:

Code: Select all

menupopup {
    --panel-color: black !important;
    --panel-background: #eaeaea !important;
}
Note that this CSS element still DOES seem to work as intended when instead of navigating down directly from the folder on the Bookmarks Toolbar, the navigation is instead started from the Menu Bar -> Bookmarks -> Bookmarks Toolbar, and then down into the specific folder. Using this Menu Bar alternative the light gray background for the eventual menu dropdown panel is still obtained. This is how it was in v91 and is still how it works in v92. So the above CSS element seems to work for that type of drill-down navigation.

So it's only something new and unique about how Bookmarks Toolbar drill-down navigation is presented with v92 and which is different from how it was done in v91, which makes this very same CSS element no longer operational for v92. This is the sought-after new CSS element that will work with however v92 colors the dropdown menus directly from Bookmarks Toolbar folders.

(1) So, here is how v91 looks when expanding folders and sub-folders directly from the Bookmarks Toolbar, under the influence of the above CSS code snippet. Note the light gray background on the dropdown menu panel:

Image

(2) In contrast, here is how things look with v92 for the exact same folder and sub-folder expansion using exactly the same CSS code snippet. Note that now the dropdown menu panel background is simply pure white, which must be the new v92 default however it was produced:

Image


And yet, if I produce the same Bookmarks Toolbar folder expansions but starting instead from the Menu Bar -> Bookmarks -> Bookmarks Toolbar method, and selecting the folder to expand from that higher-level dropdown menu presented from starting the navigation this way, sure enough the expanded folders have a light gray background. So the CSS code snippet above appears to be used for coloring the dropdown menu panel background when navigating this way. But not when expanding directly from the actual Bookmarks Toolbar folder itself.

(3) So here is how v91 presents when starting navigating from the Menu Bar. Again, above CSS code snippet is operative I believe, and the background color is light gray as desired.

Image

(4) And here is how v92 presents when again navigating starting from the Menu Bar. Miraculously, the background color is still light gray as desired. So the CSS code snippet is clearly operational for this navigation method, whereas it is clearly not operational for navigation directly from the Bookmarks Toolbar itself.

Image
Last edited by DSperber on September 9th, 2021, 6:12 pm, edited 1 time in total.
bob c
Posts: 246
Joined: September 7th, 2003, 10:09 am

Re: Request CSS snippet for v92 menu panel background color

Post by bob c »

Bare with me here, while I try to explain this. I have the exact same as you, my 1st BookMark on the BM tool bar is FF, for Firefox. It has about 38 entries under it that expands out, then some of them are expandable BM's, as in "reddit" which has several and so. I have several of these on the BM toolbar, with about 25 other BM's, no icons just abbreviated text to let me know where they are sending me.LOL So if I understand what you want--- Oh, I don't really write code, I can just manipulate it, like I've done here, on all 3 for my system. So it may work or not, but it's easy to copy into your .css file to try.

this 1st code works almost like a theme--it colors the menu bar, the url bar (not inside the addy part), the BM toolbar, and the background color of all the drop down menus on all those bars--what your showing as gray and white. Put the right color you want in the uset portion of the code.


/* change color of all text and background in menus and toolbars */
menubar > menu,
toolbar, toolbar > .toolbarbutton-text,
.toolbarbutton-text,
#nav-bar > .toolbarbutton-1,
.toolbarbutton-menubutton-button > .toolbarbutton-text,
.toolbarbutton-1 > .toolbarbutton-text,
toolbarbutton.bookmark-item, #bookmarks-toolbox,
menubutton, menulist, menu, menuitem, text, toolbar, tooltip, sidebarheader,
#CustomizeToolbarWindow, #main-box, palette-box, #wrapper-tabextensions-tablist-button, wrapper-tabextensions-labelTabSession-button {
color: uset !important;
background-color: uset !important;
font-size: 13px;
font-weight: 700;
font-family: arial !important;
}


this 2nd code let's you change the font color of the text in all those drop down menus, whether they are in the Menu bar, or Book marks toolbar, that drop down. I use this as a contrast to the back ground color, where my font is not black. If you use, just set the uset portion of the code again.

/* change font color of popup menus */
menupopup > menu,
menupopup > menuitem,
popup > menu,
popup > menuitem {
font-weight: bold !important;
color: uset !important;

}


this 3rd code was after I installed ff92. I have another post in reply to someone about this. That 1st BM on my BM toolbar I talked about (the FF) that has so many BM's under it, 92 spacing ran them off the bottom of the screen. The original code I got from reddit, thank them, squished the BM's under FF to close together. So I changed the code where you see the 20px. and it made it perfect for me. You can try it.

/* Menubar Line Spacing */
:root{ --arrowpanel-menuitem-padding: 0 0px !important; }
#PlacesToolbar menuitem,
#PlacesToolbar menu{ min-height: 20px !important; }
DSperber
Posts: 155
Joined: September 30th, 2012, 1:52 pm

Re: Request CSS snippet for v92 menu panel background color

Post by DSperber »

Thank you for your input. However without a small screenshot of what your menus look like it's difficult for me to clearly understand the essence of your CSS elements. Not being a CSS coder I don't intuitively know what "color: uset" actually means, or how to specifiy in hex-RGB terms what that color should be. I see nowhere in your code a numeric setting of any color value.

Also, while I did have a vertical spacing issue with v92, I did get input from @jscher2000 who provided the following CSS element usable with v92 that solved that problem for me. I did experiment with the size of the padding-block that he suggested (which was 2px) and my own feeling was that it still was too much vertical blank space between menu item rows. I then tried out 0px and felt it was "vertically too tight:, whereas 1px seemed to exactly duplicate the vertical spacing in v91 between menu items. Remember, there was no need for this new CSS element in order to just automatically get the "perfect" vertical spacing that I liked. So I now suspect it must have been implicitly the same 1px by default as this manually CSS-forced 1px padding-block is implementing for v92 through the following CSS code snippet:

Code: Select all

menupopup:not(.in-menulist) > menuitem,
menupopup:not(.in-menulist) > menu {
  padding-block: 1px !important;
  min-height: unset !important; /* v92.0 - for padding below 4px */
}
So my v92 vertical spacing problem has now been resolved, thanks to @jscher2000.

But it is my light-gray background for menus which is no longer 100% present in every case. Again, my userchrome.css for v91 worked perfectly 100% of the time when any menu was presented, to produce the light gray background (hex-RGB code of "eaeaea"). And the only place in my CSS where the value "eaeaea" is mentioned is in this CSS element:

Code: Select all

menupopup {
    --panel-color: black !important;
    --panel-background: #eaeaea !important;
}
So while this one single CSS element worked 100% perfectly in v91 for ALL MENUS, of any kind, no matter where navigation initiated, no matter right-click or left-click initiated, no matter first-level dropdown or cascaded out to the right as more sub-folders get expanded... didn't matter. Every single menu background was colored "eaeaea", always. Obviously it was from this one single CSS element.

Which brings me to my specific v92 problem that's the subject of this thread. With v92 this exact same "menupopup" colorizing CSS element now no longer works perfectly 100% of the time. Instead it only works perfectly 99% of the time (obviously I made that number up, just to emphasize that it's nearly perfect except for one particular situation), failing to work in one very specific situation. So clearly v92 must produce that particular menu presentation in some uniquely new way that this same old CSS element no longer addresses. And that is specifically the solution I'm looking for, i.e. to get the correctly coded new CSS element needed specifically for this brand new technique in v92 of producing this particular type of menu which is obviously different than how it was done in v91. My old CSS element for that particular menu no longer applies, obviously. But there surely must be an alternate CSS element which will accomplish the goal.

And that one particular menu presentation mode situation is when clicking on a Bookmarks Toolbar folder, to get it to open and expand down. Right away this dropdown menu IS NOT COLORED EAEAEA with v92 whereas it was colored eaeaea with v91, from this specific CSS element. And furthermore, if items on the dropdown menu are also folders, then cascading them open to the right (on and on further to the right as needed) continues to produce menus that are NOT COLORED EAEAEA. All of these new menus dropping down directly from the Bookmarks Toolbar with v92 are WHITE BACKGROUND, oblivious to my CSS element which want them colored eaeaea. In contrast, these exact same dropdowns directly from the Bookmarks Toolbar are properly effected by my CSS element and get panel background colored eaeaea as desired.

Just to demonstrate this again, look at the following example. I apologize for the wide screenshots here that makes this page produce a horizontal scrollbar. This forum's software doesn't seem to support "scaled images", but rather presents them directly in the size I made them, which unfortunately is too wide. My apology for the horizontal scrollbar nuisance. I have cleaned up the example a bit by having a "new blank tab" in the background, to avoid irrelevant distractions.

(1) Here is how v91 presents that cascade of bookmark folders ALL BACKGROUND COLORED EAEAEA (i.e. light gray), when starting directly from the folder on the Bookmarks Toolbar

Image

(2) And here is how v92 presents the same thing. Note that the menu background is no longer light gray but instead is the default white.

Image


So that's the specific assistance I'm looking for. What is the obviously different CSS element I must add for v92, in order to make this particular dropdown/cascade menu colored as eaeaea, same as happened with v91 for this identical dropdown/cascade menu. The key is that navigation starts directly from the folder on the Bookmarks Toolbar.
Last edited by DSperber on September 9th, 2021, 6:14 pm, edited 1 time in total.
User avatar
jscher2000
Posts: 11767
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: Request CSS snippet for v92 menu panel background color

Post by jscher2000 »

The images in this thread are too large for easy reading.
DSperber wrote:But it is my light-gray background for menus which is no longer 100% present in every case. Again, my userchrome.css for v91 worked perfectly 100% of the time when any menu was presented, to produce the light gray background (hex-RGB code of "eaeaea"). And the only place in my CSS where the value "eaeaea" is mentioned is in this CSS element:

Code: Select all

menupopup {
    --panel-color: black !important;
    --panel-background: #eaeaea !important;
}
Bookmarks Toolbar folder drop-downs follow this rule:

Code: Select all

#PlacesToolbar menupopup[placespopup=true]::part(arrowscrollbox) {
  padding: var(--panel-subview-body-padding);
  border: 0;
  background: var(--arrowpanel-background) !important;
  color: var(--arrowpanel-color) !important;
}
(Discovered from the inspector in the Browser Toolbox, https://developer.mozilla.org/docs/Tool ... er_Toolbox)

Try setting those variables on the Bookmarks Toolbar Items this way:

Code: Select all

/* v92.0 Bookmarks Toolbar folder drop-downs */
#PlacesToolbar {
    --arrowpanel-color: black !important;
    --arrowpanel-background: #eaeaea !important;
}
That shade of gray looks a bit dark to me, but that is up to you.
bob c
Posts: 246
Joined: September 7th, 2003, 10:09 am

Re: Request CSS snippet for v92 menu panel background color

Post by bob c »

the uset means you fill in the blank, you set the color or size you want.
DSperber
Posts: 155
Joined: September 30th, 2012, 1:52 pm

Re: Request CSS snippet for v92 menu panel background color

Post by DSperber »

jscher2000 wrote:The images in this thread are too large for easy reading.
I know. I've now gone back and replaced the original screenshots with smaller re-sized versions. The horizontal scrollbar problem has disppeared.

Note that other Forum Software products support an automatic re-scaling of images that are too wide for the fixed limits set. So the in-stream image is scaled down to reduce its width, and if you hover the mouse over it the cursor changes to a magnifying glass. And then you can click on the image and an "original actual size" image overlay will appear (with a horizontal scrollbar if necessary) so that you can see the original image in its original size. When done viewing you can click on the 'X" and go back to seeing the original page with the scaled-down reduced image.

This forum's software could benefit from this image size scaling feature.

Anyway, you're right. I was careless with my original posts. I've now reduced them myself and replaced the original actual size images with the smaller ones. A bit harder to make out, and still no way to click-to-enlarge back to "actual size", but that's the Forum Software we're dealing with here.

jscher2000 wrote:Bookmarks Toolbar folder drop-downs follow this rule:

Code: Select all

#PlacesToolbar menupopup[placespopup=true]::part(arrowscrollbox) {
  padding: var(--panel-subview-body-padding);
  border: 0;
  background: var(--arrowpanel-background) !important;
  color: var(--arrowpanel-color) !important;
}
(Discovered from the inspector in the Browser Toolbox, https://developer.mozilla.org/docs/Tool ... er_Toolbox)

Try setting those variables on the Bookmarks Toolbar Items this way:

Code: Select all

/* v92.0 Bookmarks Toolbar folder drop-downs */
#PlacesToolbar {
    --arrowpanel-color: black !important;
    --arrowpanel-background: #eaeaea !important;
}
That shade of gray looks a bit dark to me, but that is up to you.
Once again, you are the savior! Indeed this is the key magic new CSS element required.

So here is what v92 now looks like with your above latest new snippet inserted. The light gray background has returned!!
YAY!! I owe you big!

Image

Also, the pale blue background for the active menu item, along with the "glowing blue" text for that active item, it too now appears the same as it did with v91. Obviously it was the white vs. light gray background that mad this active menu item colorizing appear differently originally. It's now fixed and functions the same through this original and unchanged CSS item (which is apparently 100% compatible v91 vs. v92, now that the menu background itself has returned to light gray):

Code: Select all

menu[_moz-menuactive="true"], menuitem[_moz-menuactive="true"] {
  background-color: #e8eefd !important; 
  color: #3d3dff !important;
}

Many thanks for BOTH of your solutions for my issues.
Post Reply