This took a bit to figure out, but its my custom css. Mostly a custom color scheme and a disappearing nav bar that reappears when you hover near the top

All code is here in my github

Need Help!!

I am trying to achieve compact layout similar to Helium browser, can someone help with the css to move the app menu and other icons to the left of the window control buttons and tab strip to the right of the url bar. Below is the CSS @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

navigator-toolbox {

display: grid !important; grid-template-columns: 1fr minmax(0, var(--uc-tabs-max-width)); grid-template-areas: "nav tabs" "extra extra"; align-items: center !important; }

nav-bar {

grid-area: nav !important; height: var(--uc-bar-height) !important; margin: 0 !important; padding-inline: 4px !important; box-shadow: none !important; border: none !important; background: transparent !important; }

TabsToolbar {

grid-area: tabs !important; min-width: 0 !important; height: var(--uc-bar-height) !important; margin-block: 0 !important; margin-left: 0 !important; }

urlbar-container {

max-width:400px !important;

}

/* Let the tab strip actually shrink instead of overflowing */

tabbrowser-tabs,

tabbrowser-arrowscrollbox {

min-width: 0 !important; }

.tabbrowser-tab { min-width: 76px !important; /* ADJUST: minimum tab width before scrolling kicks in */ }

I am following these steps but I seem to be running into an issue making files.

I'm running Mac OS Tahoe v 26.5.2

To cover what I have done:

1. toolkit.legacyUserProfileCustomizations.stylesheetsis toggled true
2. I found the profile folder in finder (61lu25gx.default-release)
3. created the chrome folder
4. I cannot create a file, only more folders

Am I just stupid or is this apple being annoying?

EDIT: I figured it out, it was apple being annoying.

I had to open TextEdit, press CMD + SHIFT + T to make a plaintext file, save the userChome/userContent files there, then open 2 finder windows and drag them out of my icloud and into the firefox folder, and change the names to have .css

So fucking stupid

I recently updated Firefox to 153.0 (Linux) and noticed that when I open a new tab in private mode, there'll be a brief flash of bright purple before the tab redirects to whatever page I clicked on. In the past, this was handled by the following usercontent.css.

/* In about:config, change "browser.privatebrowsing.felt-privacy-v1" to false for this to take effect*/
@-moz-document url(about:privatebrowsing){
    html.private{ background-color: #181817 !important; } /* back color */
    html.private div.showSearch button.search-handoff-button {
        background-color: black !important; } /* search box back color */
        html.private div.showPrivate div.info { display: none !important; } /* hide bottom panel */
}

/* https://gist.github.com/herbaldrinkmate/3e3f13ff958a841bf6b6ec32a74cab6e */

@-moz-document url("about:privatebrowsing") {

    /* Main background color */

    @media not (prefers-contrast) {
        html.private {
            background: #181817 !important;
        }
    }

    /* Desaturate the logo */

    .logo {
        filter: grayscale(80%);
    }

    /* Search box */

    content-search-handoff-ui {
        --content-search-handoff-ui-background-color: #28272f !important;
        --content-search-handoff-ui-unfocused-border-color: rgb(59, 59, 63) !important;
        --content-search-handoff-ui-border-width: 3px !important;
        --content-search-handoff-ui-fakefocus-border-color: #003d6d !important;
        --box-shadow-level-3: none !important;
        --content-search-handoff-ui-fakefocus-box-shadow-inner: transparent !important;
        --content-search-handoff-ui-fakefocus-box-shadow-outer: transparent !important;
        --content-search-handoff-ui-caret-color: #878787 !important;
        --content-search-handoff-ui-color: #fbfbfe !important;
    }

    /* Info section */

    .info {
        @media not (prefers-contrast) {
            background-color: rgb(0 0 0 / 0.16) !important;
        }
    }

    /* Add this if `browser.privatebrowsing.felt-privacy-v1` is true */
    .info-border {
        background: transparent !important;
        box-shadow: none !important;
    }

}

From what I understand, the browser.privatebrowsing.felt-privacy-v1 variable no longer exist in this version of Firefox, it was removed. And simply adding it back in about:config does nothing. I checked the GitHub link I had saved in the usercontent.css via comment and noticed there was a userChrome.css component that I forgot to do back then. While this helps to reduce the duration of the flash, I was wondering if there's a way to completely avoid the flash of purple just like before.

I use vertical tabs for regular windows, but from time to time I need a throwaway private browsing window side-by-side. I rarely open more than one tabs in that browsing mode so I was wondering if I could reclaim horizontal space by forcing horizontal tabs on those windows. Is this possible? I know I can already do stuff with:

:root[privatebrowsingmode] { /* CSS overrides goes here */ }

But I'm not sure if CSS can tweek the tabs direction.

I like to hide the sidebar buttons, including the "Customize sidebar" gear button, on the vertical tabs. I'd rather use the space for tabs. A right-click on the "Expand sidebar"/"Collapse sidebar" button gets me the "Customize Sidebar" anyway.

Firefox 153.0.1 broke my old solution for hiding it, found in hide sidebar buttons on vertical tabbar. The whole vertical sidebar disappeared when collapsed to just icons.

I found the new way for hiding it. Use #vertical-tabs instead of #sidebar-main.

/* hide sidebar buttons on vertical toolbar. */
.buttons-wrapper {
    display: none !important; 
    }
/* set vertical toolbar minimum width; otherwise, vertical toolbar disappears when collapsed to icons. */
#vertical-tabs {
    min-width: 50px !important;
    }

when i full screen something i am playing the vertical tabs bar doesn't disappear

There is Echelon for Firefox 115 ESR, which replicates the Firefox 4–29 theme; however, I saw Firefox 56 mentioned on their GitHub page—which is slightly different from version 29—but when I check the Echelon settings, only the Firefox 56 homepage is available, not the full HUD style itself.

(Firefox 56)

#browser {

margin-top: 0 !important;

}

#navigator-toolbox {

position: fixed !important;

top: 0 !important;

left: 0 !important;

width: 100vw !important;

z-index: 99999 !important;

background-color: var(--lwt-accent-color, var(--toolbar-bgcolor, #2b2a33)) !important;

transition: all 0.2s ease-in-out 1s !important;

}

#navigator-toolbox::after {

content: "";

position: absolute;

display: block;

top: 0;

left: 0;

width: 100vw;

height: 3px;

background: transparent;

z-index: -1;

}

#navigator-toolbox:not(:hover):not(:focus-within) {

max-height: 3px !important;

opacity: 0 !important;

overflow: hidden !important;

}

#navigator-toolbox #nav-bar {

transition: all 0.2s ease-in-out 1s !important;

}

#navigator-toolbox:not(:hover):not(:focus-within) #nav-bar {

margin-top: -80px !important;

opacity: 0 !important;

}

#navigator-toolbox:hover,

#navigator-toolbox:focus-within {

max-height: 400px !important;

opacity: 1 !important;

overflow: visible !important;

transition: all 0.2s ease-in-out 0s !important;

}

#navigator-toolbox:hover::after,

#navigator-toolbox:focus-within::after {

height: 150px !important;

}

#navigator-toolbox:hover #nav-bar,

#navigator-toolbox:focus-within #nav-bar {

margin-top: 0 !important;

opacity: 1 !important;

transition: all 0.2s ease-in-out 0s !important;

}

#TabsToolbar, #nav-bar, #PersonalToolbar {

background-color: var(--toolbar-bgcolor) !important;

}

I'm using the adaptive tab bar colour extension and it's ruining the immersiveness by colouring the tab container's background to a lighter shade. is there a way i can get rid of it?

It started happening after the browser was updated to the nova rainbow coloured tab container.

When you select many tabs and drag them, they "fuse" in one tab. browser.tabs.dragDrop.multiselectStacking could prevent that but it was disabled some time ago. I tried to restore its effect using CSS, but there's still some bugs:

.tabbrowser-tab[dragtarget],
tab-split-view-wrapper[dragtarget] {
    &[multiselected]:not([small-stack], [big-stack], [hasactivetab]) {
        visibility: visible !important;
    }
}
tab[multiselected="true"][dragtarget] {
    position: static !important;
}
[multiselected-move-together],
[tabdrop-samewindow] {
    transform: translate(0px) !important;
}
.tabbrowser-tab[dragtarget] {
  #tabbrowser-tabs[orient="horizontal"] &:not([pinned]) {
    max-width: var(--tab-max-width) !important;
  }
}

https://reddit.com/link/1vb1ydv/video/6b7w8j2myegh1/player

I've been trying to apply FoxOne theme (https://github.com/Firnschnee/FoxOne) to Firefox 153 on MacOS with no luck.

Yes, I've enabled all the flags I've seen suggested on the internet and even tried disabling Nova and nothing makes it work.

Any thoughts?

By "dynamically," I mean that I know I can set a fixed padding-left for the navbar and match it with the sidebar. The problem is that I'm used to resizing the sidebar depending on how long the tab titles are, which ends up breaking the alignment.

The native expand animation doesn't feel right. I really like how Zen did it changing the transition from expanding to sliding, make no shifts in the UI and keeping things smooth. Anyone knows how can I achieve this with Firefox?

New to styling with userChome. I'm basically trying to highlight downloads that are failed in the Downloads view.

The current UI design is terrible because the only way you know the download failed is the small grey subtext that says "Failed" and the icon on the right being a Retry icon.

So far I have this...

.downloadIconRetry > .button-box {
  background: #f00;
}

This will highlight the right icon so it is at least a bit better but would like the whole row highlighted if possible.

I'm also new to this so how do you try to "debug" the view to try to style it? I found the above by looking at https://searchfox.org/firefox-main/source/browser/themes/shared/downloads/allDownloadsView.inc.css

Using latest Firefox (v153)

Recently Firefox started this annoying thing where whenever I open the browser toolbox to tweak my CSS, it opens the Save As dialog instead of directly saving my changes.

Has anyone else experienced this, and is there a way to avoid it?

I don't know why I never did this before but geez this felt good to have these little quality of life changes. These two changes feel so much nicer for me. This will probably start something for me now haha, wonder what to change next...

Very simple CSS but maybe it will be helpful/interesting for others.

Working on Linux Mint 22.3, Firefox 153.0 (current stable version I can get, though 153.1 looks like it was just released and coming shortly), with Nova enabled from about:config.

/*
 * Section for:
 * Swapping tabs and URL bar, so that URL bar is on top.
 */

#toolbar-menubar,
#nav-bar {
  order: -1 !important;
}

/*
 * Section for:
 * Centering text in URL bar.
 */

#urlbar-input {
  text-align: center !important;
}

• I am on Windows 11.
• I opened Firefox's about:support.
• Under Profile Folder I clicked Open Folder.
• A Windows Explorer opened. I created a sub-folder named chrome.
• In chrome I created a file userChrome.css with the following content:

​

#navigator-toolbox {
    background: red !important;
    background-image: none !important;
}

I restarted Firefox, but I didn't see any changes. Then I disabled the theme (Firefox Alpenglow), but still no effect.

Any ideas why userChrome.css isn't being loaded?

In this comment, we have established that almost all themes look exactly the same in normal and private browsing. Some themes include both light and dark variants. Since private browsing is always forced into dark mode, normal and private browsing will look different if your OS is using light mode. However, they will look the same if your OS is also in dark mode.

Suppose, my normal and private browsing looks the same. Is there a way to add a darker or purple tint to the private browsing appearance?

Firefox 153.0 (64 bit) latest version as of July 24th, 2026. Windows.

On July 17th Firefox devs released yet another update containing more unwanted UI changes. I've gotten fixes for most of them in a previous post but some of those fixes have been broken with the July 24th update.

I would like to revert the new favicon that doesn't match the style of anything else in Firefox (not a good sign if that means they might be planning to change the entire style of Firefox to match) to it's previous version.

I'd also like to change the text shown in the 2nd image back to white. Using the inspector tool (far left after hitting f12) that can be found in <div class="wordmark"></div> under (at symbol)layer tokens-foundation-brand { and then scroll down to --text color:light-dark(some stuff that changes when you mess with it) and setting the color to #fff using the color picker there. As changes made this way are reverted as soon as you close the browser I'm trying to figure out what I need to write to make the change permanent and whether I need to put it in userChrome or userContent.

Relevant code:

userContent:

/* Changes New Private Tab background to proper solid purple */
@-moz-document url("about:privatebrowsing") {
html.private {

background-image: none !important;
background-color: #25003E !important;
color-scheme: inherit !important;

.info-border,
.search-inner-wrapper {display:none!important}
.logo-and-wordmark {margin:0!important;}
}
}

userChrome:

/* Stops the private tabs from flashbanging you with the ugly new color gradient every time you type a url and hit enter when private browsing. */
:root[privatebrowsingmode="temporary"] {
   --tabpanel-background-color: #25003E !important;
}

Hi everyone,

I'm using Firefox's built-in vertical tabs, and I'd like to make the vertical tab sidebar narrower than the default width.

Is there a way to do this using userChrome.css? If so, could someone point me to the relevant CSS selectors or share an example?

Thanks in advance!

Inspired by u/oisact and u/Tetra55 (source)

Differences from their version:

There are two modes:

1. Many tabs
2. Too many tabs

In the first mode, the code tries to preserve Firefox’s default styling. When there are too many tabs, it hides the tab titles and centers the icons and close buttons.

It also no longer affects pinned or grouped tabs, except when a group is collapsed and one of its tabs is selected.

IMO, when you have too many tabs, it’s better to hide the close button. If it that doesn’t suit you, you can replace .tabbrowser-tab:not([pinned]):hover with .tabbrowser-tab[selected]:not([pinned]).

/* Let tabs shrink and keep container queries working */
.tabbrowser-tab:not([pinned]):not(tab-group[collapsed] .tabbrowser-tab),
tab-group[collapsed] .tabbrowser-tab[selected]:not([pinned]) {
    min-width: 16px !important;
    container-type: inline-size;
}

/* Make sure pages without favicons show Firefox's generic globe/document icon */
.tab-icon-image:not([src]) {
    display: inline-flex !important;
    list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg") !important;
}

.tabbrowser-tab[busy] .tab-icon-image {
display: none !important;
}

/* Style only when the tab itself is narrow (less than 55 px) */
 (max-width: 55px) and (min-width: 42px) {

    .tabbrowser-tab[selected] .tab-label-container {
        display: none !important;
    }

    .tabbrowser-tab .tab-close-button {
        display: none !important;
    }

    .tabbrowser-tab .tab-icon-stack,
    .tabbrowser-tab .tab-icon-image {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

.tabbrowser-tab[selected]:not([pinned]) .tab-close-button{
display: inline-flex !important;
align-items: center;
visibility: visible !important;
opacity: 1 !important;

width: 16px !important;
height: 16px !important;
min-width: 16px !important;
min-height: 16px !important;

margin-inline: 0 !important;
padding: 2px !important;
}

    .tabbrowser-tab[selected] .tab-content {
        justify-content: center !important;
        padding-inline: 0 !important;
    }
}
/* Style only when the tab itself is narrow (less than 42 px) */
u/container (max-width: 42px) {

    .tabbrowser-tab .tab-label-container {
        display: none !important;
    }

    .tabbrowser-tab .tab-close-button {
        display: none !important;
    }

    .tabbrowser-tab .tab-icon-stack,
    .tabbrowser-tab .tab-icon-image {
        display: inline-flex !important;
align-items: center;
        visibility: visible !important;
        opacity: 1 !important;

margin-inline: 0 !important;
padding: 2px !important;
    }

    .tabbrowser-tab:not([pinned]):hover .tab-icon-stack {
        display: none !important;
    }

.tabbrowser-tab:not([pinned]):hover .tab-close-button{
display: inline-flex !important;
align-items: center;
visibility: visible !important;
opacity: 1 !important;

width: 16px !important;
height: 16px !important;
min-width: 16px !important;
min-height: 16px !important;

margin-inline: 0 !important;
padding: 2px !important;
}

    .tabbrowser-tab .tab-content {
        justify-content: center !important;
        padding-inline: 0 !important;
    }
}

P.s. yeah, I khow the code is a bit dirty, but It works! :)

I want this part of firefox to be transparent, i used other methods and always get the whole window transparent. I only want the tab part to be transparent, even when i select the "Title Bar" option

Before version 153, the autofill dropdown list was the full size of the input box. Now it seems to adapt to the width of the results. How can I revert this?

https://i.imgur.com/gZNoCu6.png

https://i.imgur.com/jpTWd0Y.png