How can I discover the selectors of Firefox Quantum UI elements?
I recently upgraded to Firefox Quantum and realized immediately that the aesthetic of the native dark theme from recent prior versions had been destroyed. I made a post about it here and one kind user directed me to information regarding the userChrome.css sheet. After reading I was interested in finding a guide containing a complete list of the browser UI selectors paired with descriptions. Unfortunately no such guide exists. So after researching a little more I discovered that some firefox users are inexplicably using the Inspector to select UI elements on the browser and getting the selectors from the highlighted line... Mine doesn't do that!
What's the easiest way for a Firefox Quantum user to start building a userChrome.css file from scratch without already being privy to the inner workings of Firefox's aesthetics?
Chosen solution
There's not really a list anywhere, at least as far as I'm aware. You need to determine which element you want to apply styles to by opening the browser toolbox, using the instructions in this article: https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox . Once the toolbox is open, you can click on the mouse-inside-a-box icon in the upper-right of the toolbox, and then hover over the element you want to style. Click on it, and that element will be highlighted in the toolbox. From there, you would need to use CSS to style the element. There's a set of tutorials on CSS here: https://developer.mozilla.org/en-US/docs/Web/CSS .
There's also https://www.reddit.com/r/FirefoxCSS/ , where you can ask questions about userChrome styles.
Read this answer in context 👍 4All Replies (3)
Chosen Solution
There's not really a list anywhere, at least as far as I'm aware. You need to determine which element you want to apply styles to by opening the browser toolbox, using the instructions in this article: https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox . Once the toolbox is open, you can click on the mouse-inside-a-box icon in the upper-right of the toolbox, and then hover over the element you want to style. Click on it, and that element will be highlighted in the toolbox. From there, you would need to use CSS to style the element. There's a set of tutorials on CSS here: https://developer.mozilla.org/en-US/docs/Web/CSS .
There's also https://www.reddit.com/r/FirefoxCSS/ , where you can ask questions about userChrome styles.
HAZZA! Thanks dude!
And for menu items that you want to style, click the icon in the toolbox with the four squares. That leaves the menus open until you hit escape. Otherwise, they close when you click the "mouse-inside-a-box icon" and you can't hover to find the code.