Solved Firefox ignores css style for all menu backgrounds after upgrade to v152


lafargeotte

lafargeotte

Well-known member
Member
VIP
Local time
8:21 PM
Posts
261
Location
France
OS
Windows 11 25H2
Firefox ignores css style for all menu backgrounds after upgrade to v152

I have been using my userchrome.css for many years.

However, now Firefox ignores css style for all menu backgrounds after upgrading to v152.

Here is my current userchrome.css text:
/*tighten drop down menus*/ menupopup > menuitem, menupopup > menu {

padding-block: 1px !important;
}

root {

--arrowpanel-menuitem-padding: 1px 1px !important;
}

/* changed this block ----------------------------------------------------*/ /* #bookmarksMenuPopup hbox {background:#CD5C5C !important;} */ /* /Change highlighted menu text to any color:/ */ /* menupopup > menu[_moz-menuactive="true"], */ /* menupopup > menuitem[_moz-menuactive="true"], */ /* popup > menu[_moz-menuactive="true"], */ /* browsermessage,notification .notification-inner{ border-color: red !important;} */ /* browsermessage, notification{ background-color: red !important;} */ /* menupopup { */ /* -moz-appearance: none !important; */ /* background-color: #CD5C5C !important } */

  1. bookmarksMenuPopup { --panel-background: #CD5C5C !important;}
menupopup > menu[_moz-menuactive="true"], menupopup > menuitem[_moz-menuactive="true"], popup > menu[_moz-menuactive="true"], browsermessage,notification .notification-inner{ border-color: red !important;} browsermessage, notification{ --panel-background: red !important;} menupopup {-moz-appearance: none !important; --panel-background: #CD5C5C !important }

/* other bookmarks */

  1. menu_unsortedBookmarks,
  2. menu_mobileBookmarks,
  3. bookmarksMenuItemsSeparator{
display: none !important; }

/* hide Bookmarks Toolbar Folder */

  1. bookmarksToolbarFolderMenu, #bookmarksToolbarFolderMenu+menuseparator {display: none !important;}
menupopup > menuitem, menupopup > menu { /* color of the text */ color: red !important; }

menupopup > :is(menuitem, menu):hover {

background-color: lightskyblue !important;
} ((

menupopup:not(.in-menulist) > menuitem, menupopup:not(.in-menulist) > menu {

color: white !important;
}

/* Global UI font */

  • {font-size: 14pt !important;
font-weight: bold !important;}


However, now all my menu backgrounds are black with a see through background.

I would like to return to my original menu settings backgrounds. Any idea how do I do it please?

Thanks in advance.
 
Windows Build/Version
Windows 11 Pro 25H2

My Computer My Computer

At a glance

Windows 11 25H2AMD Ryzen 5 1600 - 6 Core32GBNvidia 1030GT
OS
Windows 11 25H2
Computer type
PC/Desktop
Manufacturer/Model
Custom Build
CPU
AMD Ryzen 5 1600 - 6 Core
Motherboard
Asus
Memory
32GB
Graphics Card(s)
Nvidia 1030GT
Monitor(s) Displays
Iiyama24
lafargeotte said:
tighten drop down menus
Click to expand...

This is what I use and it still works in the latest version.
Mainly for the bookmarks menu spacing/padding.

Code: 
/*** Tighten up drop-down/context/popup menu spacing ***/

menupopup:not(.in-menulist) > menuitem,
menupopup:not(.in-menulist) > menu {
padding-block: 2px !important; /* reduce to 1px or 0px as needed */
min-height: unset !important; /* v92.0 - for padding below 4px */
}
:root {
  --arrowpanel-menuitem-padding: 4px 4px !important;
}

#unified-extensions-button, #unified-extensions-button > .toolbarbutton-icon{
width: 0px !important;
padding: 0px !important;
}


#alltabs-button {display: none!important;}
 

My Computer My Computer

At a glance

Windows 11 Pro
OS
Windows 11 Pro
Thanks, however it is the color of the drop down menus that is my problem.

It seems that since v152 these entries are ignored or now wrong.
 

My Computer My Computer

At a glance

Windows 11 25H2AMD Ryzen 5 1600 - 6 Core32GBNvidia 1030GT
OS
Windows 11 25H2
Computer type
PC/Desktop
Manufacturer/Model
Custom Build
CPU
AMD Ryzen 5 1600 - 6 Core
Motherboard
Asus
Memory
32GB
Graphics Card(s)
Nvidia 1030GT
Monitor(s) Displays
Iiyama24
Only the main Bookmarks menu has returned to the color wanted. Sub menus and the rest of the menus still remain in the black, as previously described.
KevTech said:
Some have been changed in the code.

This thread may help with what you need to change.

https://www.reddit.com/r/FirefoxCSS/comments/1u7kop8/firefox_152_breaks_custom_menu_colours_when_theme
Click to expand...
Thanks, it helps a little - but only the main Bookmarks drop down menu has returned to the color wanted. Sub menus and the rest of the drop down menus still remain in the black, as previously described.
 

My Computer My Computer

At a glance

Windows 11 25H2AMD Ryzen 5 1600 - 6 Core32GBNvidia 1030GT
OS
Windows 11 25H2
Computer type
PC/Desktop
Manufacturer/Model
Custom Build
CPU
AMD Ryzen 5 1600 - 6 Core
Motherboard
Asus
Memory
32GB
Graphics Card(s)
Nvidia 1030GT
Monitor(s) Displays
Iiyama24
This is the updated userchrome.css, which fixes the Bookmarks drop down menu color, but the rest of the drop down menus still remain in the clear black.

/*tighten drop down menus*/
menupopup > menuitem, menupopup > menu {
padding-block: 1px !important;
}
:root {
--panel-menuitem-padding: 1px 1px !important;
}

/* changed this block ----------------------------------------------------*/
/* #bookmarksMenuPopup hbox {background:#CD5C5C !important;} */
/* /Change highlighted menu text to any color:/ */
/* menupopup > menu[_moz-menuactive="true"], */
/* menupopup > menuitem[_moz-menuactive="true"], */
/* popup > menu[_moz-menuactive="true"], */
/* browsermessage,notification .notification-inner{ border-color: red !important;} */
/* browsermessage, notification{ background-color: red !important;} */
/* menupopup { */
/* -moz-appearance: none !important; */
/* background-color: #CD5C5C !important } */

#bookmarksMenuPopup { --panel-background-color: #CD5C5C !important;}
menupopup > menu[_moz-menuactive="true"],
menupopup > menuitem[_moz-menuactive="true"],
popup > menu[_moz-menuactive="true"],
browsermessage,notification .notification-inner{ border-color: red !important;}
browsermessage, notification{ --panel-background: red !important;}
menupopup {-moz-appearance: none !important; --panel-background: #CD5C5C !important }

/* other bookmarks */
#menu_unsortedBookmarks,
#menu_mobileBookmarks,
#bookmarksMenuItemsSeparator{
display: none !important;
}

/* hide Bookmarks Toolbar Folder */
#bookmarksToolbarFolderMenu, #bookmarksToolbarFolderMenu+menuseparator {display: none !important;}

menupopup > menuitem, menupopup > menu {
/* color of the text */
color: red !important;
}

menupopup > :is(menuitem, menu):hover {
background-color: lightskyblue !important;
}

menupopup:not(.in-menulist) > menuitem,
menupopup:not(.in-menulist) > menu {
color: white !important;
}

/* Global UI font */
* {font-size: 14pt !important;
font-weight: bold !important;}
 

My Computer My Computer

At a glance

Windows 11 25H2AMD Ryzen 5 1600 - 6 Core32GBNvidia 1030GT
OS
Windows 11 25H2
Computer type
PC/Desktop
Manufacturer/Model
Custom Build
CPU
AMD Ryzen 5 1600 - 6 Core
Motherboard
Asus
Memory
32GB
Graphics Card(s)
Nvidia 1030GT
Monitor(s) Displays
Iiyama24
maur0 said:
It's working normally on version 152. I'll send you my file; you can upload it to your profile to test if it's working.userchrome.css




/* ============================================================
FIREFOX ULTRA COMPACTO - AJUSTE DE ESPAÇAMENTO E FONTE
============================================================ */

/* 1. BARRA DE MENUS (Arquivo, Editar, etc.) */
#toolbar-menubar {
height: 18px !important;
min-height: 18px !important;
}
#menubar-items menu {
font-size: 10.5px !important;
padding-inline: 3px !important;
}

/* 2. ABAS MAIS FINAS */
:root {
--tab-min-height: 21px !important;
}
#TabsToolbar {
min-height: var(--tab-min-height) !important;
}
.tab-label {
font-size: 11px !important;
}

/* 3. BARRA DE ENDEREÇOS - FONTE AUMENTADA (12.2px) */
#nav-bar {
padding-block: 0px !important;
min-height: 20px !important;
}
#urlbar-container, #search-container {
min-height: 19px !important;
--urlbar-container-height: 19px !important;
}
#urlbar, #searchbar {
min-height: 19px !important;
--urlbar-toolbar-height: 19px !important;
font-size: 12.2px !important; /* Fonte maior para melhor leitura */
}

/* Ajuste para a fonte maior não encostar no topo */
#urlbar-input {
display: flex !important;
align-items: center !important;
}

.urlbar-icon, .urlbar-page-action {
width: 14px !important;
height: 14px !important;
}

/* 4. BOTÕES DE NAVEGAÇÃO */
#nav-bar .toolbarbutton-1 {
padding: 0px !important;
transform: scale(0.75);
}

/* 5. BARRA DE FAVORITOS - LEVEMENTE MAIS AFASTADOS */
#PersonalToolbar {
padding-block: 0px !important;
height: 19px !important;
}
#PlacesToolbarItems .bookmark-item {
padding-left: 3px !important; /* Aumentado de 1px para 3px para afastar */
padding-right: 3px !important; /* Aumentado de 1px para 3px para afastar */
margin-left: 0px !important;
margin-right: 0px !important;
}
#PlacesToolbarItems .bookmark-item .toolbarbutton-icon {
margin-inline-end: 2px !important; /* Pequeno respiro entre ícone e texto */
}
#PlacesToolbarItems .bookmark-item .toolbarbutton-text {
font-size: 11px !important;
}

/* 6. DENTRO DAS PASTAS E MENUS SUSPENSOS */
menupopup > menuitem,
menupopup > menu {
padding-block: 0px !important;
min-height: 19px !important;
}
.menu-text, .menu-iconic-text {
font-size: 11px !important;
}
Click to expand...
Thanks, but I think there is nothing here for drop down menu background colors.
 

My Computer My Computer

At a glance

Windows 11 25H2AMD Ryzen 5 1600 - 6 Core32GBNvidia 1030GT
OS
Windows 11 25H2
Computer type
PC/Desktop
Manufacturer/Model
Custom Build
CPU
AMD Ryzen 5 1600 - 6 Core
Motherboard
Asus
Memory
32GB
Graphics Card(s)
Nvidia 1030GT
Monitor(s) Displays
Iiyama24
lafargeotte said:
Thanks, but I think there is nothing here for drop down menu background colors.
Click to expand...
Exactly, I don't use backgrounds, haha. I saw later that was the problem, haha. I wonder if they changed the background parameter? That's why the old CSS didn't work.
 

My Computer My Computer

At a glance

Windows 11 Iot Enterprise 21h2 22000.3260xeon E5-2697v232gb 8x4gb ddr3 1333 mhzgtx 570 poit of view
OS
Windows 11 Iot Enterprise 21h2 22000.3260
Computer type
PC/Desktop
Manufacturer/Model
Asus
CPU
xeon E5-2697v2
Motherboard
rampage iv extreme
Memory
32gb 8x4gb ddr3 1333 mhz
Graphics Card(s)
gtx 570 poit of view
Sound Card
realtek HD (ALC898)
Monitor(s) Displays
samsung b2030
Screen Resolution
1600x900
Hard Drives
2tb hd 5400 rpm
3tb hd 5400 rpm
1tb nvme pcie 3.0
PSU
hx850w
Keyboard
mtek
Internet Speed
500/250 gpon
Browser
r3dfox 146.0
Antivirus
none
IA


Yes, the background parameters definitely changed in Firefox 152. Mozilla updated and renamed internal CSS variables (custom properties starting with --) that control panels, popups, and menus, which breaks legacy styles using the old syntax.

What changed in v152:​

  1. The old --arrowpanel-background and --panel-background variables are deprecated or ignored for these elements.
  2. The UI now relies heavily on --panel-background-color and --panel-text-color.

How to fix it in your​

You need to replace the deprecated variables with the new ones. Update your :root block or menu selectors like this:

  • Replace --arrowpanel-background with --panel-background-color
  • Replace --panel-background with --panel-background-color
  • Replace --arrowpanel-color with --panel-text-color
Here is a quick code block you can use to force your custom colors over the native v152 styling:

CSS

:root {
--panel-background-color: #f0f0f0 !important; /* Change to your preferred background hex */
--panel-text-color: #000000 !important; /* Change to your preferred text hex */
}

/* Force popups and menus to inherit the new variables */
menupopup, panel menupopup {
--panel-background-color: #f0f0f0 !important;
--panel-text-color: #000000 !important;
}

/* Optional: If Windows Dark Mode is still forcing dark menus, force Light Scheme on popups */
menupopup {
color-scheme: light !important;
}
 

My Computer My Computer

At a glance

Windows 11 Iot Enterprise 21h2 22000.3260xeon E5-2697v232gb 8x4gb ddr3 1333 mhzgtx 570 poit of view
OS
Windows 11 Iot Enterprise 21h2 22000.3260
Computer type
PC/Desktop
Manufacturer/Model
Asus
CPU
xeon E5-2697v2
Motherboard
rampage iv extreme
Memory
32gb 8x4gb ddr3 1333 mhz
Graphics Card(s)
gtx 570 poit of view
Sound Card
realtek HD (ALC898)
Monitor(s) Displays
samsung b2030
Screen Resolution
1600x900
Hard Drives
2tb hd 5400 rpm
3tb hd 5400 rpm
1tb nvme pcie 3.0
PSU
hx850w
Keyboard
mtek
Internet Speed
500/250 gpon
Browser
r3dfox 146.0
Antivirus
none
Make sure this is still set in about:config

toolkit.legacyUserProfileCustomizations.stylesheets = True <--- Tells Firefox to read a .css file we will add.
 

My Computers My Computers

System One System Two

  • At a glance

    Win 11 Home ♦♦♦26200.8655 ♦♦♦♦♦♦♦25H2AMD Ryzen 7 3700XG.Skill (F4-3200C14D-16GTZKW)EVGA RTX 2070 (08G-P4-2171-KR)
    OS
    Win 11 Home ♦♦♦26200.8655 ♦♦♦♦♦♦♦25H2
    Computer type
    PC/Desktop
    Manufacturer/Model
    Built by Ghot® [May 2020]
    CPU
    AMD Ryzen 7 3700X
    Motherboard
    Asus Pro WS X570-ACE (BIOS 5302)
    Memory
    G.Skill (F4-3200C14D-16GTZKW)
    Graphics Card(s)
    EVGA RTX 2070 (08G-P4-2171-KR)
    Sound Card
    Realtek ALC1220P / ALC S1220A
    Monitor(s) Displays
    Dell U3011 30"
    Screen Resolution
    2560 x 1600
    Hard Drives
    2x Samsung 860 EVO 500GB,
    WD 4TB Black FZBX - SATA III,
    WD 8TB Black FZBX - SATA III,
    DRW-24B1ST CD/DVD Burner
    PSU
    PC Power & Cooling 750W Quad EPS12V
    Case
    Cooler Master ATCS 840 Tower
    Cooling
    CM Hyper 212 EVO (push/pull)
    Keyboard
    Ducky DK9008 Shine II Blue LED
    Mouse
    Logitech Optical M-100
    Internet Speed
    300/300
    Browser
    Firefox (latest)
    Antivirus
    Bitdefender Total Security
    Other Info
    Speakers: Klipsch Pro Media 2.1

  • At a glance

    Windows XP Pro 32bit w/SP3AMD Athlon 64 X2 5000+ (OC'd @ 3.2Ghz)TWIN2X2048-6400C4DHX (2 x 1GB, DDR2 800)EVGA 256-P2-N758-TR GeForce 8600GT SSC
    Operating System
    Windows XP Pro 32bit w/SP3
    Computer type
    PC/Desktop
    Manufacturer/Model
    Built by Ghot® (not in use)
    CPU
    AMD Athlon 64 X2 5000+ (OC'd @ 3.2Ghz)
    Motherboard
    ASUS M2N32-SLI Deluxe Wireless Edition
    Memory
    TWIN2X2048-6400C4DHX (2 x 1GB, DDR2 800)
    Graphics card(s)
    EVGA 256-P2-N758-TR GeForce 8600GT SSC
    Sound Card
    Onboard
    Monitor(s) Displays
    ViewSonic G90FB Black 19" Professional (CRT)
    Screen Resolution
    up to 2048 x 1536
    Hard Drives
    WD 36GB 10,000rpm Raptor SATA
    Seagate 80GB 7200rpm SATA
    Lite-On LTR-52246S CD/RW
    Lite-On LH-18A1P CD/DVD Burner
    PSU
    PC Power & Cooling Silencer 750 Quad EPS12V
    Case
    Generic Beige case, 80mm fans
    Cooling
    ZALMAN 9500A 92mm CPU Cooler
    Keyboard
    Logitech Classic Keybooard 200
    Mouse
    Logitech Optical M-BT96a
    Internet Speed
    300/300
    Browser
    Firefox 3.x ??
    Antivirus
    Symantec (Norton)
    Other Info
    Still assembled, still runs. Haven't turned it on for 15 years?
maur0 said:
IA


Yes, the background parameters definitely changed in Firefox 152. Mozilla updated and renamed internal CSS variables (custom properties starting with --) that control panels, popups, and menus, which breaks legacy styles using the old syntax.

What changed in v152:​

  1. The old --arrowpanel-background and --panel-background variables are deprecated or ignored for these elements.
  2. The UI now relies heavily on --panel-background-color and --panel-text-color.

How to fix it in your​

You need to replace the deprecated variables with the new ones. Update your :root block or menu selectors like this:

  • Replace --arrowpanel-background with --panel-background-color
  • Replace --panel-background with --panel-background-color
  • Replace --arrowpanel-color with --panel-text-color
Here is a quick code block you can use to force your custom colors over the native v152 styling:

CSS

:root {
--panel-background-color: #f0f0f0 !important; /* Change to your preferred background hex */
--panel-text-color: #000000 !important; /* Change to your preferred text hex */
}

/* Force popups and menus to inherit the new variables */
menupopup, panel menupopup {
--panel-background-color: #f0f0f0 !important;
--panel-text-color: #000000 !important;
}

/* Optional: If Windows Dark Mode is still forcing dark menus, force Light Scheme on popups */
menupopup {
color-scheme: light !important;
}
Click to expand...
That worked, thank you.

For info, here is the updated userchrome.css:

:root {
--panel-background-color: #f0f0f0 !important; /* Change to your preferred background hex */
--panel-text-color: #000000 !important; /* Change to your preferred text hex */
}

/* Force popups and menus to inherit the new variables */
menupopup, panel menupopup {
--panel-background-color: #CD5C5C !important;
--panel-text-color: #CD5C5C !important;
}


/*tighten drop down menus*/
menupopup > menuitem, menupopup > menu {
padding-block: 1px !important;
}
:root {
--panel-menuitem-padding: 1px 1px !important;
}

/* changed this block ----------------------------------------------------*/
/* #bookmarksMenuPopup hbox {background:#CD5C5C !important;} */
/* /Change highlighted menu text to any color:/ */
/* menupopup > menu[_moz-menuactive="true"], */
/* menupopup > menuitem[_moz-menuactive="true"], */
/* popup > menu[_moz-menuactive="true"], */
/* browsermessage,notification .notification-inner{ border-color: red !important;} */
/* browsermessage, notification{ background-color: red !important;} */
/* menupopup { */
/* -moz-appearance: none !important; */
/* background-color: #CD5C5C !important } */

#bookmarksMenuPopup { --panel-background-color: #CD5C5C !important;}
menupopup > menu[_moz-menuactive="true"],
menupopup > menuitem[_moz-menuactive="true"],
popup > menu[_moz-menuactive="true"],
browsermessage,notification .notification-inner{ border-color: red !important;}
browsermessage, notification{ --panel-background: red !important;}
menupopup {-moz-appearance: none !important; --panel-background: #CD5C5C !important }

/* other bookmarks */
#menu_unsortedBookmarks,
#menu_mobileBookmarks,
#bookmarksMenuItemsSeparator{
display: none !important;
}

/* hide Bookmarks Toolbar Folder */
#bookmarksToolbarFolderMenu, #bookmarksToolbarFolderMenu+menuseparator {display: none !important;}

menupopup > menuitem, menupopup > menu {
/* color of the text */
color: red !important;
}

menupopup > :is(menuitem, menu):hover {
background-color: lightskyblue !important;
}

menupopup:not(.in-menulist) > menuitem,
menupopup:not(.in-menulist) > menu {
color: white !important;
}

/* Global UI font */
* {font-size: 14pt !important;
font-weight: bold !important;}
 

My Computer My Computer

At a glance

Windows 11 25H2AMD Ryzen 5 1600 - 6 Core32GBNvidia 1030GT
OS
Windows 11 25H2
Computer type
PC/Desktop
Manufacturer/Model
Custom Build
CPU
AMD Ryzen 5 1600 - 6 Core
Motherboard
Asus
Memory
32GB
Graphics Card(s)
Nvidia 1030GT
Monitor(s) Displays
Iiyama24
Ghot said:
Make sure this is still set in about:config

toolkit.legacyUserProfileCustomizations.stylesheets = True <--- Tells Firefox to read a .css file we will add.
Click to expand...
Still set ok here.
 

My Computer My Computer

At a glance

Windows 11 25H2AMD Ryzen 5 1600 - 6 Core32GBNvidia 1030GT
OS
Windows 11 25H2
Computer type
PC/Desktop
Manufacturer/Model
Custom Build
CPU
AMD Ryzen 5 1600 - 6 Core
Motherboard
Asus
Memory
32GB
Graphics Card(s)
Nvidia 1030GT
Monitor(s) Displays
Iiyama24
You must log in or register to reply here.

Latest Support Threads

Latest Tutorials

Back
Top Bottom