Hello,

EDIT: apparently, according to this the result I'd like to have is what Nova Redesign was on March 2026. Would there be any way to have it back?

For the first time ever, a redesign feels absolutely perfect to me right out of the box. It's so good that I managed to get rid of about 80% of all my CSS modifications, which is a godsend, since I use Firefox on three different devices and two different OSes, including at work.

Every update has been a pain over the years because I had to fix and update all my custom CSS... but this time, it might finally be over!!!

I'd just need a little bit of help to make it 100% perfect, basically, my dream setup! I'd love some help with these three things:

1. Separating the tab area from the sidebar

I'd love for the actual tab area to basically be a separate rounded rectangle with some kind of outline/border. Ideally, there would also be a small gap between the rounded rectangle containing the sidebar and the separate rounded rectangle containing the actual tab area. I tried to use my very limited Paint skills to illustrate what I mean. 😅 Would anyone know if something like this is possible with CSS and how?

2. Giving the sidebar its own rounded rectangle

I'd also love for the sidebar (the one where the vertical tabs are) to be a separate, long vertical rectangle with rounded corners and some kind of outline/border, similar to what I'm trying to achieve with the tab area.

3. Removing the flexible space in the top-left corner

Lastly, when you use Customize Toolbar, the flexible space in the top-left corner (the one I circled in blue) can't be removed by default. I was wondering if there's a way to remove it with CSS.

If you've read this far, I'm already very grateful for your time! But I'd really appreciate it if anyone could give me a hand with these tweaks.

Thanks in advance! ❤️

Hello,

I had this snippet of code for the menuBar for ages (the menuBar is the bar that appears when pressing alt), but FF149 update apparently broke it?

/* Replaces menubar items text ("File Edit etc.") with icons */

#main-menubar > menu {
  fill: currentColor;
  height: var(--uc-menubaritem-height, 28px);
  width: var(--uc-menubaritem-width, 30px);
  -moz-context-properties: fill;
  padding: 3px !important;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 3px !important;
}
#main-menubar > menu > :is(.menubar-text, .menu-text) {
  display: none;
}

#file-menu {
  background-image: url("chrome://devtools/skin/images/tool-storage.svg");
}
#edit-menu {
  background-image: url("chrome://browser/skin/customize.svg");
}
#view-menu {
  background-image: url("chrome://devtools/skin/images/command-frames.svg");
}
#history-menu {
  background-image: url("chrome://browser/skin/history.svg");
}
#bookmarksMenu {
  background-image: url("chrome://browser/skin/bookmark.svg");
}
#profiles-menu {
  background-image: url("chrome://browser/skin/device-desktop.svg");
}
#tools-menu {
  background-image: url("chrome://global/skin/icons/developer.svg");
}
#helpMenu {
  background-image: url("chrome://global/skin/icons/help.svg");
}
#tabSharingMenu {
  background-image: url("quickactions.svg");
}

The icons where supposed to be white, but now they appear to be black.

Does anyone know what happened/what changed?

Hello,

I was using this:

#appMenu-fxa-separator { border-image: unset !important; }

to make the separator between account and the rest of the menu (circled in red) look consistent with the other separators, but after the update it stopped working.

I thought that the ID may have been changed so I checked, but ID is still use so I don't know how to fix it :/

Also what happened to the separator between find page and translate (circled in green)? It's the only one what is longer than the rest, would there be a way to make it look consistent with the rest as well?

Hello,

I just got a mba air m4 and was doing my usual userchrome.css/js configuration. I trasnfered all the config files, but noticed that some elements in the context menu that I had hided in my windows laptops were present in the macos firefox.

I thought no big deal, I'll just select the macos selector via browser toolbox, but after enabling the browser toolbox and ticking on disable popup auto hide the context menu still disappears.

This basically bans me from any userchrome coding as I can't see the selector names of elements.

Anyone has any solution? this has been driving me insane for the last 3 hours.

Firefox uses OS native context menus on MacOS, so the context menus cannot be styled with css.

Hello,

I'm looking for a pair of hiking boots to walk on snow without slipping or losing grip. I rarely go in the woods, I'm planning to buy these boots mostly for city/urban walking when there's snow out there. I live in Italy, so USA stuff is hard/impossible/expensive to get.

USAGE: For example, when it's snowing I'd like to bring my nephews/nieces to play outside, launch snowballs to each other, build snowman's etc We'd usually stay in an urban enviroment but sometimes we also go near a more off-road, very small little mini woods.

Another occasion I'd like to have them is to walk around with my partner while it's snowing to enjoy it.

Basically the time usage would be one afternoon length usually, afternoon till mid evening at max.

The last usage would to actually commute around during snow days/heavy rain days.

They'd be use at best 1-5 times a year

In case you may think "You don't need hiking/snow boots for this": While I understand that some may say that for these activities I don't even need hiking boots, but I'd feel more at ease to have then on my feet rather than not. I used to use full leather boots, blackstone ones, and they're hella good, but I slipped once and broke an arm last year, it was painful and I got pretty scared. I'm clumsy so it may as well have been my fault, but I'd just feel more safe with some more sturdy, grippier hiking boots in these situation after that experience.

I was about to purchase Lowa Renegade Evo GTX Mid, then I discovered about PU midsole and read the hydrolysis page on their website and got hella scared of making the wrong purchase...am I overreacting?

Could you guys help me pick a pair that fits my needs?

Hello guys!

Since I'm really hoping for the whole r/firefoxcss community to move here, I thought about making some content. However, I'm not someone who really knows how to CSS, so my best bet is actually pointing out the stuff I use when I try to do something.

First of all, the ToyfoCSS guide - link

This is a really great guide to learn how to customize FF via CSS. I have learned a lot by reading this, and even if I can't say that I'm now capable of putting every info there into use, I can for sure say that it has helped me a lot understanding other people code and suggestions that were gave to me.

On a post about resources, this deserve the first mention. Of course, as you'll notice by the guide's link, the author is exactly the one who you'd imagine him to be!

Moving to actual code repositories, and keeping the same author, there's MrOtherGuy's FF CSS hacks repo - link

It really has a lot of different customizations, all mostly up to date and working. More over, at least in my use case, the part where I used any of his code hardly conflicted with anything else, and the CSS I use on my FF ain't small. I see this repo as a monolith, something you can build around without having fear.

Speaking of monoliths, a well-deserved mention goes to uc.css,js by Aminomancer - link

This repo contains an extremely huge FF theme that has been pretty useful in my css journey. Every code there is supposed to be used with nightly, but what I really want to focus on with this repo isn't really the theme. This repo, in fact, has been mostly used to me to discover the existance of userchrome.js. I highly suggested anyone to give it a look.

NOTE: this isn't the only uc.js for FF repo out there (eg. xiaoxiaoflood and Alice0075), but it's the one that has had scripts I liked the most and still use, without issue, after years.

Speaking of js, one has to talk of a js loader for FF, and, if you ask me, nothing will ever beat MrOtherGuy's fx-autoconfig - link

From my experience, this is extremely robust and safe loader. It never gave me a problem, even on different systems, and it's a breeze to set up and use.

Going back to CSS customization, I can't help, but mention my favorite FF theme (of which I use a large part of it in my personal FF setup) which is WaveFox by QNetITQ - link

It's a very nice modular theme, has a lot of customization options and the Dev is very responsive. 10/10, nothing else is needed to be said here.

Since the FF113 release isn't too old, I'll also point out my two holy grails that helped me making my setup usable even after the big changes introduced with 113. I'm speaking of these MrOtherGuy's & Aminomancer commits - link 1 & link 2

Lastly, I'll point out SVG Gobbler - link

It is an add-on I used really a lot, especially in the creation of icons (I'm a weirdo and like to replace icons with others I like more, but this often requires me making some modification to other existing icons).

As for other sites where you can find .svg and stuff, the web is your friend. Really, there's an ocean of .svg out there.

I hope I've done some decent content that may turn useful to someone out there.

I'll end this saying that I'm sorry to not have include EVERYTHING that I've stumbled upon and used, but that would've been an infinite list. However, I'd be very happy if, in the comments, people would share their own favorite repo and stuff about FFCSS to compensante the ones I didn't mention!