ABCs of userChrome.css

[jhaber3]

I recently benefited from comments here on a question of mine about how to modify the look of the Firefox menu bar. In particular, I wished to modify the effect of a mouseover, and I'm fine with how I've now got it. But it reminded me of how little I understand the syntax. Someone posted a truly huge style makeover, and I successfully located (and then modified to my satisfaction) the sole line I needed. But I'd like to learn more.

To clarify, here's what I don't want. I'm seeing instructions on how to name and in what folder to create a file, using a text editor. I understand that. I'm seeing advice on css, but I'm familiar with css for a Web site, the kind that, say, alters a tag like h2 with a line like

h2 { font-style: italic;
color: #ff0000; }

And indeed before pilfering the line that worked, I had something similar, only to find that I need something very different starting with, say, -moz and including a greater than sign. The specifics for my actual mouseover change before the { } turn out to be the following:

#main-window:not(:-moz-lwtheme) #main-menubar > menu:-moz-any(:hover,[open],[_moz-menuactive])

and I don't know how to parse it. Last, I've seen plenty of advice to look at a site like GitHub with some sample modifications or another, Reddit, where you can post saying what you'd like to do and ask for help. But I've more in mind, again, a basic tutorial on ... I'm not even sure what to call it. Style sheets to me in the past were in conjunction with html. Here I'm altering the behavior of a program. Coding? Thanks!

[jscher2000]

Since you know CSS, the problem most likely is you don't know the selectors used in the UI for the elements you want to style. And why would you?

Here are two possible resources for discovering them:

(1) The skeleton of the UI is "browser.xul" which you can view using this address (paste to the address bar, it can't be made clickable):

view-source:chrome://browser/content/browser.xul

That's particularly useful for menus.

(2) You can interactively inspect the UI using the Browser Toolbox.

https://developer.mozilla.org/docs/Tool ... er_Toolbox

Sometimes complex drop-downs such as the bookmarks menu that drops from the toolbar and the autocomplete list that drops from the address bar are empty until you generate them at least once. Sometimes everything just goes haywire and you have to start again.

Note that the Style Editor in the Browser Toolbox is interactive for easier testing (no shutdown/restart cycle). Remember to Save changes you want to save, and discard or Undo (Ctrl+z) changes you don't to save.

EDIT: Also, unusual selector syntaxes for web and chrome: https://developer.mozilla.org/docs/Web/ ... _Selectors

[jhaber3]

Thanks! Will give me a lot to work on.