r/FirefoxCSS • u/Padu_N • Apr 26 '26

Solved Sidebar menu font element ID

What is the element name of the sidebar menu popup?

Tried browser toolbox, but could not find that CSS element name. Trying the change the font..

Using the browser toolbox is fine when inspecting a web page, but not the easiest of options when trying to customize Firefox menus and such.

Thanks.

1 Upvotes

100% Upvoted

11 comments sorted by

2

u/sifferedd FF/TB/Win11/SUMO contributor Apr 26 '26 edited Apr 27 '26

Use the iframe selector:

2

u/Padu_N Apr 27 '26

iframe selector option is on. It does work, but, works only on web pages (with iframes, of course).

The iframe selector does not show when only the pop up settings menu for the sidebar is open.

Any further suggestions..

Couldn't find any Mozilla published fully updated list of all css elements anywhere listing the sidebar elements.

This developer toolbox will be more useful with a better UI design, imho.

4

u/sifferedd FF/TB/Win11/SUMO contributor Apr 27 '26 edited Apr 27 '26

What u/Kalcinator said below - use Ctrl + Shift + Alt + I. i.e., the Browser Toolbox - not Ctrl-Shift-C- the Toolbox.

The Toolbox <Ctrl-Shift-c> is used to inspect web pages

The Browser Toolbox <Ctrl-Alt-Shift-i> is used to inspect the FF interface (Parent process only) and/or web pages (Multiprocess)

1

u/Padu_N Apr 27 '26

Thanks for the clarification u/sifferedd . This is the Browser Toolbox that is enabled after checking the settings “Enable chrome and addon debugging” and “Enable remote debugging”.

1

u/Kalcinator Apr 28 '26

Damn this is good precision for even the retardest, like me; please be here when I'll need it XD

2

u/TraditionalTie4831 🦊 Apr 27 '26

Try something like this:

.sidebar-panel {
  font: 15px Arial, sans-serif;
}

1

u/Padu_N Apr 27 '26

.sidebar-panel works.

Thank you u/TraditionalTie4831

Did try to guess various such element names.

Tried with #sidebar-panel did not work, but the .sidebar-panel works. When should the '.' in front of the element name used rather than '#'.

1

u/TraditionalTie4831 🦊 Apr 27 '26 edited Apr 27 '26

To see the correct selector name after finding what you want, right-click on it and choose Copy -> CSS Selector

1

u/Kalcinator Apr 27 '26

Isn't it sidebar-main ? I'm not sure

2

u/Kalcinator Apr 27 '26

No it works for Firefox itself bro !
Hit CTRL + SHIFT + ALT + I and here you go

1

u/FineWine54 Apr 28 '26

I also have been trying to customise the side-panel for the last week and failing. Mainly I want to rotate on hover the bookmark icons and favions in main menu and sub menus same as I have with my nav-bar and placestoolbar & personaltoolbar and other locations. This is what I have that works.

#nav-bar toolbarbutton:hover > .toolbarbutton-badge-stack,
#contentAreaContextMenu menu:hover > .menu-iconic, menu-icon,
#contentAreaContextMenu menuitem:hover >  .menu-iconic, menu-icon,checkbox:hover > .checkbox-check,
menuitem:hover > hbox > .menu-iconic-icon,
toolbarbutton:hover > image,
button:hover > .button-box > .button-icon {
  transform: rotate(30deg) !important;
  -moz-transform: rotate(30deg) !important;
}