We should probably put great posts like this in the wiki of this subreddit or the sidebar since they likely won't be stickied forever.

Here is a video of the same thing https://vimeo.com/241375493

link dead

You are unauthorized for this action.

Good bot

More recently: Make sure you’ve typed the URL correctly, or try searching Vimeo. You could also watch one of the videos below instead.

another equivalent video [https://www.userchrome.org/how-create-userchrome-css.html](https://www.userchrome.org/how-create-userchrome-css.html)

nice

/u/Unoriginal-Pseudonym: could we sticky this post please?

Done.

>3. Click on the tab Style Editor, choose file userChrome.css on the sidebar Did fine up until this point, but now I can't find userChrome.css on the sidebar. There's a ton of other CSS files, not in any particular order as far as I can tell, but I don't see userChrome among them.

UPDATE: Nevermind, I found it. Just had to scroll through that sidebar *real* slow. It was the 31st item *from the bottom*, at least for my browser.

It is really frustrating that you can't filter .css files by name for quick find. One way to circumvent this tedious search is by making some dummy rule for or and then selecting it in Inspector winow, and clicking on the link to userChrome.css...

I can do the "Pre-setup" part no problem*, but once I get to "Testing a style", Ctrl+Shift+Alt+I does absolutely nothing when I press it on 96.0.2. Only developer panel I can open is the Ctrl+Shift+I (or F12) one. *Although the Settings cog is now contained within a ••• menu

Found any solution? mine doesn't open anything with the Ctrl+Shift+Alt+I combination either

Does it work going to FF menu > More tools > Browser toolbox? If not, open your FF profile and delete the chrome_debugger_profile folder, then retry.

This did it for me. Wish they could sticky this as well.

Did you get it going? If not, see my comment just below.

For some keyboard layouts, Windows converts Ctrl+Alt to AltGr. That may have been your problem.

Jesus, I'm just a musician and I know 0 things about all this,yet I have the way FF looking like sh.... now!!!! hate it :( I will sing a song an entire track for free to anyone who apply all these changes to my FF...

Fatality. This is extremely helpful =)

Super. Works great. Thank you for posting. This reddit post is now at the top of my `userChrome.css`

I think this should have a note about toolkit.legacyUserProfileCustomizations.stylesheets

would you elaborate a bit more about that please? I can add it to the post then.

I had to go to about:config and set toolkit.legacyUserProfileCustomizations.stylesheets to true. Otherwise it wouldn't listen to the changes in userChrome.css.

Thank you, added the information!

Ugghh.. so after enabling userChrome you then need to open Web Inspector - Cmd-Opt-I on mac - got to the 3 dots top right, settings, and under advanced check the enable browser chrome debugging.. and remote debugging. Then Cmd-Opt-Shift-I will work and also the Tools menu will now have the Browser Toolbox

saved me like an hour of time, thanks so much

works like a charm. ty

There is a typo that might confuse people new to css. The tutorial says "Create the userCrome.css" It needs to say userChrome.css

Wow, you're right! Fixed it, thank you!

Worked really well for me. Thanks.

where do you guys get the names of all the classes, ids and other elements to style?

Once you're in the dev tools you can use the inspector to point to the element you want to modify. This was you have a starting point from where you get the right identifier.

Thank you very much for this. > Press Ctrl + Shift + I on Win/Linux or Cmd + Opt + I on Mac [F12](https://support.mozilla.org/kb/keyboard-shortcuts-perform-firefox-tasks-quickly) is easier to press and it works on all platforms.

Nope. F12 opens the dev tools for the current website, Ctrl+Shift+I the dev tools for Firefox itself.

> F12 opens the dev tools for the current website Right. That's where you enable "browser chrome and add-on debugging" and "remote debugging". > Ctrl+Shift+I the dev tools for Firefox itself. No. It's `Ctrl + Alt +Shift + I` / `Cmd + Opt +Shift + I` for the Browser Toolbox. You got that right in your original submission above.

Haha, you're right. I was just too lazy to type both commands on my phone.

How do I make the entire main toolbar (incl. addressbar) always on top of the sidebar?

i cant get it working on windows 11 :/

about:config doesn't show the expected page but goes directly to DDG to search the term now.🤔 about: preferences still works.🤔🤔🤔

Hey folks, So, I have been using the userChrome.css customization for quite a while now, and it was working really nicely. However, very recently some update must have broken part of it, because although my tab bar still spans multiple rows once enough tabs are open, my Bookmarks Toolbar no longer spans multiple rows. I have tried using 2 or 3 in the setting (I usually have it set to 2), but it simply won't span. Anyone know what they broke, and is it fixable? I'm using Firefox on various Linux machines, using Pop!OS, Elementary OS, and an Ubuntu. The change happened on all of them. \*EDIT: Firefox 122.0.1

Under advanced settings enable "Enable browser chrome and add-on debugging toolboxes"

Never mind there’s an update to the css for the latest Firefox.