userChrome.org
userchrome.org · Personal blog · on HN since 2018
userChrome.org is a guide to customizing the Firefox interface with userChrome CSS, including updates for new Firefox releases.
What HN saysHN commenters point to it as the go-to resource when someone wants to restyle Firefox's UI, such as tabs, title bar, or address bar, without forking.
27HN people shared it
27linked it in comments
1stories submitted
1story points
5 months agolast shared
2018people per year2026
Most-shared posts
- 1How create userchrome css8 people · first shared 2018
- 2Homepage8 people · first shared 2018
- 3Firefox 89 styling proton ui7 people · first shared 2021
- 4Megabar – Configuring and Styling the Firefox 75 Address Bar5 people · 1 points · first shared 2020 · discussion on HN
- 5What is userchrome css2 people · first shared 2018
- 6Firefox changes userchrome css2 people · first shared 2020
- 7Firefox 89 styling proton ui.html;1 people · first shared 2021
What HN people wrote when they linked it
danShumway · 2023-11-22
There are a few, but I'm not sure if they're close enough for you or not: https://addons.mozilla.org/en-US/firefox/addon/google-chrome-light
Truthfully, I don't think that Firefox and Chromium look all that different, to me it seems like it's the same layout just different margins/colors/tab styles? So I'm not sure what the biggest issues would be to change.
Notably, Firefox also has userChrome.css (https://www.userchrome.org/), so if themes aren't able to get you where you want, it's possible that there's a more extensive change that someone has compiled in a user style. https://firefoxcss-store.github.io/index.html, https://github.com/muckSponge/MaterialFox might be good places to start looking, although I don't have personal experience with either source so this isn't a recommendation.
mcintyre1994 · 2021-06-04
I used to use tree-style tabs with the normal tab bar hidden. I've moved off Firefox so no guarantee the new big update hasn't broken this, but I used the following userChrome.css (if you're unfamiliar with that then check out https://www.userchrome.org)
/* Hide tab bar in FF Quantum */
@-moz-document url("chrome://browser/content/browser.xhtml") {
#TabsToolbar {
visibility: collapse !important;
margin-bottom: 21px !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
visibility: collapse !important;
}
}
I think I probably got it from here: https://www.reddit.com/r/FirefoxCSS/comments/d4hx49/ff69/
Edit: More authoritative source shared in the comments which is probably a better starting point (and has loads of other configuration too): https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-s…
notafox · 2026-06-16
You can user userChrome.css [1][2][3]
You can start with this page[4] for an examples of simple, but elegant styling.
And /r/FirefoxCSS can demonstrate all kinds of crazy options userChome.css enthusiasts can come up with.
[1] https://www.userchrome.org/
[2] https://kb.mozillazine.org/index.php?title=UserChrome.css
[3] https://old.reddit.com/r/FirefoxCSS/wiki/index/tutorials
[4] https://www.userchrome.org/firefox-89-styling-proton-ui.html#tabstyler
yorwba · 2024-03-16
You may be able to implement your UI ideas with userChrome.css https://www.userchrome.org/ without forking the browser.
butz · 2021-05-13
Some UI features on Firefox can be customized using userChrome.css [1]. I bet you can make title bar as small as you like and change search highlight color. For font rendering you could create a bug report.
[1] https://www.userchrome.org/
t0astbread · 2020-08-21
If you just need to modify the UI, consider userChrome.css and userChrome.js files: https://www.userchrome.org
Timpy · 2020-05-22
Along with this, I added this snippet to firefox/userChrome.css:
#TabsToolbar { visibility: collapse !important; }
I absolutely love it, now there's no title bar on my Firefox. My screen is big enough that I have the horizontal space to spare, and it feels sleek without the tabs on top. If you've tried out Firefox before and felt like it wasn't quite there yet, now is a good time to give it another try.
More info on userChrome here, if anybody wants to try it out: https://www.userchrome.org/how-create-userchrome-css.html
myfonj · 2018-11-30
You can use `<profile folder>\chrome\userChrome.css` for that, perhaps.
https://www.userchrome.org/
iamdamian · 2019-06-23
I want to move on from Chrome, and Firefox's Containers have made Firefox an easy decision for me. But I am a huge fan of Chrome's aesthetic and don't want to give that up for the sake of privacy.
I am not one to do extensive tweaking to my machine, but this is important to me, so I spent an hour experimenting. And I have to say, I am pretty satisfied. Even though it isn't straightforward, Firefox actually can look nice and uncluttered.
If you're like me and want both privacy and aesthetics, here are some pointers:
- Switch to the light theme.
- Hide everything you can in the address/nav bar by clicking through the UI. Some settings are obscure, but you can get rid of a lot.
- Hide even more using userChrome.css [0], including the outdated blue bar at the top of an active tab.
My userChrome.css looks like this and works like a charm: https://gist.github.com/iamdamian/9efc271208bfb5ca52dc51572b57ec4f
Now we just need Mozilla to come up with a more modern-looking logo.
[0]: https://www.userchrome.org/
baobun · 2025-06-01
userContent.css
https://superuser.com/questions/318912/how-can-i-override-the-css-of-a…
You need to enable it in about:config these days
https://www.userchrome.org/firefox-changes-userchrome-css.html
danuker · 2023-01-24
guerrilla · 2022-12-13
If you edit your userChrome.css you can get them back. Mine looks completely normal now. I think it was this[1] that I used.
1. https://www.userchrome.org/firefox-89-styling-proton-ui.html
ciupicri · 2022-05-29
Perhaps you can fix the broken websites with userContent.css [1][2][3]
[1]: https://kb.mozillazine.org/UserContent.css
[2]: https://superuser.com/q/318912
[3]: https://www.userchrome.org/how-create-userchrome-css.html
mrob · 2022-01-11
Here are instructions for customizing the Proton UI to imitate previous versions:
https://www.userchrome.org/firefox-89-styling-proton-ui.html
bloopernova · 2021-12-11
A) https://www.userchrome.org/how-create-userchrome-css.html is one tutorial on userchrome.
B) I don't know! :) It's easy to revert though.
ploxiln · 2021-11-16
userChrome.css is the way to get good tabs back (for now)
https://www.userchrome.org/firefox-89-styling-proton-ui.html#tabstyler
(go to the home page for general instructions on enabling this mechanism)
nathancahill · 2021-10-14
Firefox 3. The "AwesomeBar". https://blog.mozilla.org/en/mozilla/a-little-something-awesome-about-f…
Looking at those old screenshots shows me how much the current autocomplete has regressed. The suggestions used to be so much better since it was a literal text search across titles and URLs. I remember you could configure how many results were displayed, I always set it to the max.
The 2-line rich display was awesome for scanning URLs too. The "URL after the title" we have now makes it impossible to do that.
Edit: Fixed most of these annoyances with this: https://www.userchrome.org/megabar-styling-firefox-address-bar.html
estebank · 2021-09-28
Not wanting to install browser updates is no different to asking "how do I turn this yellow light in my car's dashboard? I know! I'll put tape over it!". Granted, the update might come with UI changes. Changing oil in your car won't do that. That can be annoying, but whether something looks "horrible" is completely subjective. That's fine. You can rely on userChrome.css[1] to customize things more in Firefox than in any other browser.
Personally, I've gone from "customize every last pixel" to just using things the way the designers wanted me to use things. I like having flexibility and configuration toggles, that I use often, but I'm much happier now without trying to customize things for customization's sake.
[1]: https://www.userchrome.org/firefox-89-styling-proton-ui.html
bradrn · 2021-07-14
The missing partition made it nearly unusable for me as well. Thankfully, I eventually found a solution at https://www.userchrome.org/firefox-89-styling-proton-ui.html; since then I’ve had no problems.
elcapitan · 2021-06-01
Ok, I don't want to complain about it, I just want to completely reverse it. Can I do that with themes?
edit:
"browser.proton.enabled" => false
"browser.uidensity" => 1
long term solution seems to be via userChrome.css:
https://www.userchrome.org/firefox-89-styling-proton-ui.html
edit 2:
Apparently they also added this annoying rubberish effect when you reach the end of a scrollable area, which can be turned off like this:
apz.overscroll.enabled => false
Jaxkr · 2021-03-16
This page has images of both the inflated and normal size address bar: https://www.userchrome.org/megabar-styling-firefox-address-bar.html
msclrhd · 2020-06-30
See https://www.userchrome.org/megabar-styling-firefox-address-bar.html for details on how to customize the new address bar, including userChrome css for keeping its size confined to the dropdown UI like other dropdown/combobox UI elements.
miguelmota · 2020-05-21
Vertical tabs are a game changer. I've been using Vertical Tabs Reloaded [0] which similar but doesn't have nesting and added a userChrome.css in my Firefox profile directory [1] to hide the top bar tabs
#TabsToolbar {
visibility: collapse !important;
}
[0] https://addons.mozilla.org/en-US/firefox/addon/vertical-tabs-reloaded/
[1] https://www.userchrome.org/how-create-userchrome-css.html
52-6F-62 · 2020-02-07
I had no idea this existed.
Found the link for anyone else interested: https://www.userchrome.org/firefox-changes-userchrome-css.html#fx69
redsparrow · 2019-12-03
If you want shrinking tabs then you can get them in Firefox by putting this in a userChrome.css file:
.tabbrowser-tab {
min-width: initial !important;
}
.tab-content {
overflow: hidden !important;
}
You can find details here on where to find/put a userChrome.css file: https://www.userchrome.org/how-create-userchrome-css.html
frereubu · 2019-09-06
I have uBlock Origin and Privacy Badger installed on Firefox, and I can just click anywhere outside that window to see the full article. Not sure it's to do with the browser extensions necessarily, but I don't have a particularly exotic setup.
The only other thing I have which might help is a user chrome file - https://www.userchrome.org/how-create-userchrome-css.html - which has this simple rule in it:
html, body { overflow-y: visible !important; }
That seems to help with a lot of the basic "disable scrolling" css rules that sites use.
sorenjan · 2018-12-04
Having the tabs at the top is much better because of Fitts's law [0], essentially making their size infinite in one direction and therefore much easier to reach with a quick flick of the mouse.
Although it is possible to move the tab bar using user CSS [1].
You're also missing out on a much faster browsing experience with the newer versions. In the older version I remember the scrolling lagged when I opened a new tab in the background, that hasn't happened in a while.
[0] https://en.wikipedia.org/wiki/Fitts%27s_law
[1] https://www.userchrome.org/what-is-userchrome-css.html#movetabbar