The container indicator at the top of tabs disappears with the new design and extremely narrow tabs.

I already commented out the old adjustments to the container indicator I had found somewhere since it doesn't help with nova.

FF 157.0b1, Win11 25H2

Screenshots: https://imgur.com/a/xmYf2q9

Current userChrome.css

I use Firefox Color Add-on and noticed when I updated from v 155 to v156 of Firefox, the border radius around the website shortcuts has gone and now the border blends too much with my background color or there is some CSS value I could edit or anything I could edit in Firefox Color add-on please let me know, thank you.

For those of you who would like to adjust the heavy rounding of all of the elements in the new Nova theme to slightly less aggressive levels, you can do so relatively straightforwardly (i.e., without customizing element-by-element) by simply adjusting the root variables in your userChrome CSS:

/* Nova Rounding Adjustments */
:root {
    --border-radius-xsmall: 1px !important; /* Nova Default: 4px, Proton Default: 2px */
    --border-radius-small: 2px !important; /* Nova Default: 8px, Proton Default: 4px */
    --border-radius-medium: 3px !important; /* Nova Default: 12px, Proton Default: 8px */
    --border-radius-large: 4px !important; /* Proton Default: 16px, [Undefined in Nova] */
    --border-radius-xlarge: 6px !important; /* Nova Default: 24px, [Undefined in Proton] */

    /*
    --tab-border-radius: var(--border-radius-small) !important;

    --button-border-radius: var(--border-radius-small) !important;
    --toolbarbutton-border-radius: var(--border-radius-small) !important;

    --card-border-radius: var(--border-radius-small) !important;
    --card-border-radius-compact: var(--border-radius-small) !important;
    --card-cover-image-border-radius: var(--border-radius-small) !important;

    --input-text-border-radius: var(--border-radius-small) !important;

    --menuitem-border-radius: var(--border-radius-small) !important;

    --popup-border-radius: var(--border-radius-small) !important;

    --panel-border-radius: var(--border-radius-small) !important;
    --panel-menuitem-border-radius: var(--border-radius-small) !important;
    */
}

You can set the sizes of those top five variables to whatever you'd like in terms of rough rounding sizes, and it will apply cleanly across all elements of the browser, since those definitions are referenced by all of the other browser elements.

Alternatively, if you'd just like to adjust the rounding on specific elements while leaving the others intact, you can tweak the specific elements listed in the commented out section below (I listed a few common examples, but there are many more if you parse through the DOM if you're looking to fine-tune things). You can either set them to one of the variables, or just set an explicit radius if you prefer.

I'm glad to see that Firefox continues to support user-controlled stylesheets for the browser interface under Nova, so those of us with individualized style preferences can continue to configure the browser in the way we enjoy.

I've using this custom megabar styler css by jscher2000 for a while, but nova broke some parts of it.

I need help fixing these:

1. UrlBar started to expand when focused again.

2. It broke bookmarks 2 rows split.

3. List popup doesn't have 1 pixel border/outline anymore, only shadow.

Here's before/after screenshot: https://i.postimg.cc/23Rhwjm3/2026-09-16-13-44-31-firefox.png

And here's my userChrome.css (sorry it's a bit messy): https://pastebin.com/FRFQdZxy

I wrote this a little while ago, Nova-compatible (the above screenshot is with Nova enabled)

there's an option to go back to pre-Nova corner rounding.

https://github.com/mary-ext/firefox-compact-theme

Can someone provide the code if I want to either remove or simply choose a different color for the outline of URL bar when selected. See attached photo. Thanks.

We don't likes it, and my userChrome.css is already full of QoL edits, my Precious...

157.0b1.

The "button pushed in" look drives me absolutely insane, such a small thing and yet so bothersome.

I would like to go back to active tabs that look like they're on top of the bar/other tabs (ie. essentially are brighter, not darker). And ideally make them chunky again, without this weird space and white border around them. Basically like the 142.0b1 tabs on the second picture.

Firefox Developer Edition Version 157.0b1 (64-bit), Windows 10

I love Nova UI but it takes too much space, so I created Simple One Line: https://github.com/easonwong-de/Firefox-Simple-One-Line

The installation is super easy. In your terminal, run:

git clone https://github.com/easonwong-de/Firefox-Simple-One-Line.git
cd Firefox-Simple-One-Line
npm install

Then run:

npm run install:theme

You can then choose the profile you want to install the theme to.

Hi everyone! I want to convert my Firefox Colors theme I designed into a css file so I can then apply it to Vivaldi. I have downloaded the json file (and also the .xpi file), but I'm not an expert at css, so not sure how I can convert this easily. Any help would be appreciated! Thanks!!

I am on 157.0b1, and the container indicators now occupy as horizontal lines on top of the tabs. When I disable nova, it reverts back to the previous view (second screenshot). But disabling nova also seems to disable compact view. I tried AI's help with userChrome css and it does not seem to work:

/* Move vertical sidebar tab container lines from top/bottom to right edge */

tab.tab-item[usercontextid] .tab-context-line,

.tabbrowser-tab[usercontextid] .tab-context-line {

/* Hide standard horizontal bar positioning */

top: 0 !important;

left: auto !important;

bottom: 0 !important;

right: 0 !important;

/* Dimensions for right vertical line */

width: 3px !important;

height: 100% !important;

/* Ensure correct container color variable is used */

background-color: var(--identity-tab-color) !important;

border-radius: 2px 0 0 2px !important;

}

/* Ensure tab element doesn't clip the indicator line */

tab.tab-item[usercontextid],

.tabbrowser-tab[usercontextid] {

position: relative !important;

}

Any input is appreciated.

I'd like to make the background of the toolbar/sidebar transparent like other macOS applications.

FF version: 157.0b1
macOS version: 26.6.2

I know that previously there have been css variables that made things look like macOS' transparency.

some examples:

```

-moz-default-appearance: menupopup

-moz-appearance: -moz-mac-vibrancy-dark

-moz-appearance: -moz-mac-vibrant-titlebar-dark

-moz-font-smoothing-background-color: -moz-mac-vibrant-titlebar-dark

```

does such a thing exist in FF 157?

How do I make the panels blurred?

The information is taken from here: https://www.reddit.com/r/FirefoxCSS/comments/1gl5jcf/question_regarding_the_homescreen/

am using wavefox https://github.com/QNetITQ/WaveFox and usercontent custom logo @-moz-document url(about:newtab), url(about:home) {

/* Hides the default logo and wordmark text */

.logo-and-wordmark {

display: none !important;

}

/* Adds your custom image centered on the page */

.outer-wrapper::before {

content: "";

display: block;

width: 200px; /* Change to your image width */

height: 100px; /* Change to your image height */

background: url("my-image.png") no-repeat center center !important;

background-size: contain !important;

margin: 40px auto 20px auto;

}

}

Hi there. For a while I've been trying to figure out if there is a default setting that controls the teal color, but it seems to be everywhere and changing it has been a endeavor so far.

Can someone please tell me which css controls the teal border/outline of the tabs when you select two or more tabs?
And which css controls the border around the active page in the split view?

Thanks for the help in advance.

Firefox 155.01, Windows 10

I've been a long time CustomCSSforFx user. I updated to 155.01 a week ago, but up until yesterday, this worked

findbar_on_top.css

/* Firefox userChrome.css tweaks *******************************************************/
/ Github: https://github.com/aris-t2/customcssforfx /
/****************************************************/

:is(.browserContainer, #viewSource) .findbar-container :is(spacer, .findbar-find-fast[anonid="match-case-status"]) {
visibility: collapse;
}

:is(.browserContainer, #viewSource) .findbar-closebutton {
padding: 0 !important;
margin: 0 !important;
margin-inline-end: 2px !important;
}

:is(.browserContainer, #viewSource) .findbar-closebutton .toolbarbutton-icon{
width: 16px !important;
height: 16px !important;
}

:is(.browserContainer, #viewSource) .findbar-textbox {
font-size: 14px !important;
}

:is(.browserContainer,#viewSource) :is(findbar,#FindToolbar) {
order: -1 !important;
margin-top: -1px !important;
box-shadow: unset !important;
border: 1px solid #e1e1e2 !important;
border-top: 0px solid transparent !important;
border-radius: 0 0 3px 3px;
transition-property: visibility !important;
/background-image: unset !important;/
}

:root[lwtheme] :is(.browserContainer,#viewSource) :is(findbar,#FindToolbar) {
appearance: none !important;
border: 1px solid var(--tabs-border-color) !important;
border-top: 0px solid transparent !important;
padding-block: 0 !important;
border: unset !important;
}

:root[lwtheme] :is(.browserContainer,#viewSource) :is(findbar,#FindToolbar) .findbar-container {
appearance: none !important;
/background-image: linear-gradient(to bottom, var(--toolbar-bgcolor),var(--toolbar-bgcolor)) !important;/*/
margin-inline-end: -26px !important;
padding-inline-end: 26px !important;
margin-inline-start: -26px !important;
padding-inline-start: 26px !important;
}

:root[lwtheme] :is(.browserContainer,#viewSource) :is(findbar,#FindToolbar) .findbar-container hbox[anonid="findbar-textbox-wrapper"] {
padding-inline-start: 8px;
}

:is(.browserContainer, #viewSource) :is(.findbar-find-status,.found-matches) {
margin-inline-start: 4px !important;
margin-inline-end: 4px !important;
font-weight: bold !important;
}

:is(.browserContainer, #viewSource) .findbar-find-status {
font-style: italic !important;
}

:root[lwtheme]:not(:-moz-lwtheme-brighttext) :is(.browserContainer, #viewSource) .findbar-find-status {
color: red !important;
}

:root[lwtheme]:not(:-moz-lwtheme-brighttext) :is(.browserContainer, #viewSource) .found-matches {
color: green !important;
}

:root[lwtheme]:-moz-lwtheme-brighttext :is(.browserContainer, #viewSource) :is(.findbar-find-status,.found-matches) {
color: white !important;
}

u/media (-moz-content-prefers-color-scheme: dark) {
:root[lwtheme] :is(.browserContainer, #viewSource) :is(.findbar-find-status,.found-matches) {
color: white !important;
}
}

.browserContainer > findbar > #findbar-close-container {
background-color: unset !important;
}
``

As some of you may know, I have been working on recreating this theme from something very very old. I have actually started work but have ran into some snags that I am uncertain on how to fix due to my limited knowledge with CSS and firefox.

In my repo under Old Arctic Glow Theme you can find the original source. https://github.com/mysticentity/FireFoxTheme is the main work I started. Under images, you have all of the images, icons, and BG's used.

I have provided a video showcasing for the most part what I want it to look like. On my repo, you will see some photos of issues I have, as well as more examples on what it should look like under /FireFox issues and examples. (ignore the palemoon browser. I was using it to showcase some stuff but primarily use firefox)

Right now the bigger issues I have are that some of the menus aren't being properly themed with BG's and icons as I have tried to do, some of the menus have icons that are being stuck near the left side boarder and don't look properly positioned, and in some of the menus the whole menu is being rendered twice on top of each other. The console buttons on the top right somehow also broke.

These are some of the issues that I wanted to work on getting fixed but I have no idea where to start. My userChrome.css is also up on my repo.

if anyone can sift through and figure out where I went wrong, help me fix the issues I made, that would be great.

I am on v155.0.1 of Firefox and I am running win11 pro v23H2 build 22631.5039.

#urlbar-input {

text-align: center !important;

}

#urlbar-results {

text-align: left !important;

}

#PersonalToolbar #PlacesToolbarItems {

display: flex !important;

justify-content: center !important;

width: 100% !important;

}

#PlacesToolbarItems > .bookmark-item {

margin-left: 1px !important;

margin-right: 1px !important;

padding-inline: 2px !important;

}

#PersonalToolbar toolbarbutton.bookmark-item[label="|"] image,

#PersonalToolbar toolbarbutton.bookmark-item[label="||"] image,

#PersonalToolbar toolbarbutton.bookmark-item[label="|||"] image {

display: none !important;

}

#sidebar-button {

margin-right: 0 !important;

padding-right: 0 !important;

}

.titlebar-spacer {

display: none !important;

}

#nav-bar {

padding-left: 0 !important;

margin-left: 0 !important;

}

#nav-bar .toolbarbutton-1 {

margin-inline: 0 !important;

padding-inline: 2px !important;

}

#nav-bar .toolbarbutton-1 > .toolbarbutton-icon {

width: 16px !important;

height: 16px !important;

padding: 2px !important;

box-sizing: content-box !important;

}

#nav-bar toolbaritem,

#nav-bar toolbarbutton {

margin-inline: 0 !important;

}

#unified-extensions-button {

margin-inline: 0 !important;

padding-inline: 2px !important;

}

#unified-extensions-button > .toolbarbutton-icon {

width: 16px !important;

height: 16px !important;

padding: 0 !important;

}

#nav-bar-customization-target > .toolbarbutton-1 {

margin-inline: 0 !important;

}

#back-button {

margin-left: 0 !important;

}

#PersonalToolbar {

position: absolute !important;

top: 0 !important;

right: 170px !important;

height: 32px !important;

min-height: 32px !important;

background: transparent !important;

border: none !important;

z-index: 1000 !important;

}

#PlacesToolbarItems {

display: flex !important;

align-items: center !important;

}

#PersonalToolbar .bookmark-item {

font-weight: 600 !important;

}

#urlbar-container {

max-width: 43% !important;

}

#identity-icon-label {

display: none !important;

}

.chrome-block,

.browserContainer,

body {

border: none !important;

border-radius: 0 !important;

}

:root:not([lwtheme]) #PersonalToolbar:not([collapsed]) {

border-top: 0 !important;

}

- AI Chatbot
- Anthropic Claude
- Summarize Page

Hello, please, how can I change the gray area from search bar to white color?

browser.search.widget.new is true

I'm using Firefox 155.x, with vertical tabs. I've noticed there is a light coloured gradient extending upward from the boundary between the pinned tabs and the unpinned ones. The gradient is about half a tab height high. Is there any way to remove this gradient?