I'm using a userChrome.css file that works very well with Firefox 158 on Arch Linux. I'm looking for a way to make dark icons stand out better, since I'm also using a dark theme. It seems to me that the following filter might be a good solution:

filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.7)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.7)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.7)) !important;

The problem is that, for one thing, you have to target all the places where favicons appear:

• the tab favicons;
• the Bookmarks Toolbar, as well as its folders and subfolders;
• the "Bookmarks" menu in the menu bar;
• the favicons in the bookmarks within the hamburger menu;
• the bookmarks in the sidebar;
• the bookmarks in the library;
• am I missing any?

On the other hand, this filter must not apply to Firefox’s internal icons (for example, the folder icon, the default globe-shaped favicon, favicons for error pages such as "Server not found" or 404 errors, etc., and favicons for about: pages, etc., etc.).

How can I do this? Thank you very much in advance for any help you can provide!

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! ❤️

This extremely useful style which added scrollbars to all long Bookmarks folders was broken by the Fx155.0 update... unsure why?

The style was originally posted by OP nollinvoyd in his March 2023 r/FirefoxCSS topic 'Scrollbars for all bookmarks folders' and had worked flawlessly since up to and including the Fx154 stable release.

/*** Scrollbar for long Bookmark menu "popups" ***/

[placespopup="true"] { --allow-scroll-bar: auto; }

scrollbox[part="scrollbox"] { overflow-y: var(--allow-scroll-bar, inherit) !important; }

Unsure what has changed in Fx155... possibly the variable --allow-scroll-bar has been changed or removed? Unable to find any related bug after searching the huge 'Target Milestone 155' Bug list.

Many previous Findbar userstyles broken by the Fx155.0 update including 'floating_findbar_on_top.css'... which now appears as a thin squashed line at the bottom of the Content window/Viewport.

Other Findbar styles reported similar problems in r/FirefoxCSS topic 'Firefox version 155 broke an old userchrome.css I was using to change the findbar.'

i have used this same file before and same browser but its not loading. i checked settings in librewolf to make sure i had css enabled. but it still wont load.
i have file located at ~/.config/librewolf/librewolf/12345. default-default/chrome/userchrome.css

Hi, I'm having a problem with 'selected text' style, using userContent.css file with recent Firefox update the next code stop working, seems like Firefox change that behavior:

::selection {
    color: red !important;
    box-shadow: none !important;
    text-shadow: none !important;
    background: blue !important;
}

That code doesn't work in userChrome.css either. Still is possible to change that style? I appreciate any help, thanks.

Hello!

As you can see in the image, the notification bar is quite tall. But I can't seem to make it any smaller.

The infobar.css file in the Firefox source code contains the following code:

:host(.infobar) {
  .container {
    /* Don't let lwthemes set a text-shadow. */
    text-shadow: none;
    padding-block: 3px;
    align-items: center;
  }
  .text-container {
    padding-block: calc(1lh - var(--icon-size) / 2);
  }
  .content {
    gap: 0 12px;
    height: fit-content;
  }
  .close {
    margin-block: 4px;
    margin-inline-start: 8px;
    align-self: flex-start;
  }
}

Despite this, I can't seem to reduce the paddings/margins to lower the height of this bar (regardless of its content: pop-up notification, DRM notification, etc.).

I'd also like to remove the icon (the "i" inside a circle, before the text "Firefox prevented...").

You can try out this type of bar by visiting this website, for example.

Thank you very much in advance for any help you can provide!

Hello!

I'm having a few issues—they're quite minor, but I can't seem to figure them out on my own.

1. When a download starts, the download icon displays a (fairly fast) animation; the same happens when the download finishes. Is there a way to disable these animations, or at least shorten the duration of the finish animation?

2. When the Firefox window is maximized, the margin above the tab bar (between the tab bar and the top edge of the window) is narrower than when the window is not maximized (a difference of about 2 pixels). Is there a way to make this margin consistent regardless of the window’s state? Or at least change this margin when the window is maximized?

3. When the Firefox window is not maximized, it is bordered by an outer edge. But there is a 1-pixel margin between this edge and the window itself, which did not exist in previous versions of Firefox. Is there a way to remove this outer margin?

4. Finally, this isn’t directly related to userChrome.css, but I’d appreciate it if someone had the answer: when I start a download, it begins immediately, even before I’ve had a chance to specify where to save the file. Is it possible to start the download only after clicking the "Save As…" button?

I don't know if this matters, but just in case: I'm using Firefox 151 on Arch Linux, and the userChrome.css file I'm using can be viewed here.

Thank you very much in advance for any help you can provide!

Edit: I deleted questions 2 and 3; it was an issue with my GTK+ theme, not a problem related to the Firefox theme.

im using gnome mostly as a tablet and i made the main navigation buttons bigger, but is there a way to make the sidebar icons (tabs) larger? bonus points for making the scrollbars larger too.

Using Firefox Beta

Hi, I'm trying to remove the gradient in 'Private mode' new-tab page, I'm trying the next code but without success.

@-moz-document url-prefix(about:privatebrowsing) {
html.private {
        background-color: transparent !important;
        background-image: none !important;
        background: linear-gradient(45deg, transparent, transparent) !important;
    }
}

I also tried:

@media -moz-pref("browser.privatebrowsing.felt-privacy-v1") {
  @media not (prefers-contrast) {
    html.private {
      background: none !important;
    }
  }
}

But with all the gradient don't disappear.

Hello!

In my userChrome.css file, I use the following code to hide the search engine selection button (circled in red in my image):

#urlbar-searchmode-switcher { #urlbar:not([searchmode]) & {
    margin: 0 !important;
    padding: 0 !important;
    width: 8px;
    overflow: hidden;
    opacity: 0;
} }

But in Firefox 151, this code no longer works. Is it possible to remove this button when there is only one (or no) search engine in the submenu? For example, here there is only “Startpage,” so the button to change the search engine serves no purpose. How can I adapt the code above so that it continues to work in Firefox 151?

Also, the “This time search with” menu shown here doesn't respect my usual margins between an element and a separator; for example, in the image, the margin between the "Startpage" search engine name and the separators above and below it should be smaller. How can I modify these elements?

Thank you very much in advance for your help!

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?

Hi, I could not identify this element to be able to change its color, it appears when you try to move a bookmark, I appreciate any help. 💙

I found a rare variable?: SelectedItem , and I wonder if it is possible to set a new value for it or I should change in every place that variable is used?

/* Autofill (example: login page) focus item background */

.autocomplete-richlistitem {
    &[selected] {
        background-color: var(--button-hover-bgcolor) !important;
    }
}

/*Hide recent books [nuclear option, have gone insane, do not use]*/

#panelMenu_recentBookmarks,
#PanelUI-bookmarks > .panel-subview-body {
  display: none !important;
}

Testing in Firefox Beta Hi, I had the code to make 'about:' pages (preferences, add-ons) background 'transparent', but with new Firefox changes that code don't work anymore, and I can't find the way to make transparent again, I tried with all the selectors I can but don't work. I enabled browser.tabs.allow_transparent_browser for this purpose, I made them transparent to show the image behind. I would like to solve this issue or maybe is a issue of 'browser.tabs.allow_transparent_browser'

Have been using mog multi-row_tabs_below_content.css (and also mog fake_status_bar_w_bookmarksbar.css) with Firefox ESR 128.

Now updating to Firefox ESR 140, and to my surprise, almost all the CSS continues to work. The only issue is that the menu bar has disappeared, and won't come back.

There was something to do with menu bar in multi-row_tabs_below_content.css, so I replaced that file with the latest versions of the two new replacement files, multi-row_tabs.css and tabs_below_content_v2.css. This did indeed restore the menu bar, but it broke tab bar scrolling (and a few other incidentals).

Do I need some intermediate version of those files? OR, if I go back to the original configuration, is there some way to restore the menu bar?

Hi!

I am trying to make progress bars use native Windows progress bar styles instead of what Firefox draws in CSS, but when I set -moz-appearance: progresschunk for progress::-moz-progress-bar, progress::slider-fill, the progress bar just disappears and I am not sure why. I have tried overriding everything I know to override. Setting the appearance to progresschunk for anything else properly shows the Windows progress bar, but not for the progress bars.

No CSS to provide here; all the code is default pertaining to progress bars.

Any ideas? - All help is appreciated, TIA!

There weren't any straightforward guides when I looked this up, and I even had to ask myself. But I just needed to put so and so together, get some feedback here, and voila! Hopefully this can work for you too, and could edit userchrome.css in your favorite editor, and see the changes in Firefox immediately. I tested that it works with @import url("folder/file.css");, and nested imports too (if folder/file.css contained @import url("Another folder/file.css");.

1. Install fx-autoconfig (I haven't tested it with other Firefox JS loaders), following the whole install section: https://github.com/MrOtherGuy/fx-autoconfig?tab=readme-ov-file#install
2. In the chrome/JS/ folder, create <any file name>.uc.mjs (I named mine refresh.uc.mjs) and paste the script below (it's slightly modified from this snippet):
   • The part containing @onlyonce is needed so fx-autoconfig loads it just once, rather than spawn a new instance of the script every time a new firefox window is opened.
3. Clear startup cache: https://github.com/MrOtherGuy/fx-autoconfig?tab=readme-ov-file#deleting-startup-cache
4. You may need to toggle the script. You can go to Menu Bar > Tools > userScripts.

Script

// ==UserScript==
// @onlyonce
// ==/UserScript==

// Script from here:  https://gist.github.com/jscher2000/ad268422c3187dbcbc0d15216a3a8060?permalink_comment_id=3259657#gistcomment-3259657
setInterval(() => {
    /*
       Code to paste and run in the Browser Console
       Requires devtools.chrome.enabled => true in about:config
       Tested in Firefox 68.0.1 on Windows
    */

    // Create references to APIs we'll use
    var ss = Cc["@mozilla.org/content/style-sheet-service;1"].getService(Ci.nsIStyleSheetService);
    var io = Cc["@mozilla.org/network/io-service;1"].getService(Ci.nsIIOService);
    var ds = Cc["@mozilla.org/file/directory_service;1"].getService(Ci.nsIProperties);
      
    // Get the chrome directory in the current profile
    var chromepath = ds.get("UChrm", Ci.nsIFile);

    // Specific file: userChrome.css or userContent.css
    chromepath.append("userChrome.css");

    // Morph to a file URI
    var chromefile = io.newFileURI(chromepath);

    // Unregister the sheet
    if(ss.sheetRegistered(chromefile, ss.USER_SHEET)){
      ss.unregisterSheet(chromefile, ss.USER_SHEET);
    }

    // Reload the sheet
    ss.loadAndRegisterSheet(chromefile, ss.USER_SHEET);
}, 1000)

https://www.xuldev.org/misc/ucjs.php

Basically, whenever I edit firefox-profile-path/chrome/userChrome.css, I want firefox to automatically apply the file again. The only posts I found on this are old and not straightforward. I'm wondering what currently works.

I used the autohide_bookmarks_and_main_toolbars.css from MrOtherGuy, but it blocks the top part of the page where I need to click.
Using firefox 144 on windows 10
here's what i'm using

@import url("colored_soundplaying_tab.css");
@import url("cleaner_extensions_menu.css");
@import url("icons_in_main_menu.css");
@import url("autohide_bookmarks_and_main_toolbars.css");
@import url("minimal_in-UI_scrollbars.css");
@import url("selected_tab_gradient_border.css");
@import url("test.css");

the top 3 imports are from https://github.com/datguypiko/Firefox-Mod-Blur/ and some hiding context menu items.

Hello!

I use Firefox on Arch Linux, with Openbox as my window manager. I've been experiencing several issues since the release of Firefox 143.0.3, which I didn't have with the previous minor version 143.0.2. However, I haven't made any changes to my Firefox theme for several months; nor have I modified my GTK-4 theme.

First of all, in my custom CSS file (userChrome.css), I defined a section for light themes and a section for dark themes, like this:

@media (prefers-color-scheme: light) {
    ... (some CSS tags are here)...
}
@media (prefers-color-scheme: dark) {
    ... (some CSS tags are here)...
}

My full CSS is available here.

But now, only the light theme is applied. My Firefox theme is the "Systeme theme - auto"; I haven't changed it. I can force the display of dark theme CSS tags by changing the theme in the Firefox settings and selecting the Dark theme, but why has this changed? My GTK-4 theme is still a dark theme, so why does the default theme only apply light theme tags?

On the other hand, the code in my userChrome.css file that relates to the address bar no longer works. This code is as follows:

#urlbar[breakout][breakout-extend] {
    margin-left: 0 !important;
    width: var(--urlbar-width) !important;
    margin-top: calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2) !important;
}
.urlbarView-row { padding: 2px 1px !important; }
#urlbar-background { animation: none !important; }
.urlbar-input-container {
    padding: 1px !important;
    height: var(--urlbar-height) !important;
}
#identity-icon { margin-block: var(--urlbar-icon-padding); }
.urlbarView > .search-one-offs:not([hidden]) { padding-block: 0 !important; }
#urlbar-background, #searchbar, .findbar-textbox { box-shadow: none !important; }
.urlbar-input::placeholder, .searchbar-textbox::placeholder, .findbar-textbox::placeholder { color: color-mix(in srgb, currentColor 70%, transparent) !important; }
#urlbar[open] > #urlbar-background { border-color: Highlight !important; }
#urlbar-results {
    max-height: 239px;
    overflow-y: auto;
    scrollbar-color: color-mix(in srgb, currentColor 26%, transparent) transparent;
    scrollbar-width: thin;
    padding: 0 !important;
    margin: 4px 0 5px 0;
}
.urlbarView-row-inner { padding-block: 1px !important; }
.urlbarView-no-wrap { position: relative; }
#urlbar[searchmode] > .urlbarView { display: none !important; }
.urlbarView-row-inner { flex-wrap: wrap !important; }
.urlbarView-no-wrap {
    max-width: 100% !important;
    flex-basis: 100%;
}
.urlbarView-row[has-url]:not([type="switchtab"]) .urlbarView-title-separator { display: none; }
.urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(ltr) { margin-left: var(--urlbarView-second-line-indent); }
.urlbarView-row[has-url] > .urlbarView-row-inner > .urlbarView-url:-moz-locale-dir(rtl) { margin-right: var(--urlbarView-second-line-indent); }

How can I fix it?

Many thanks in advance for your help!

hi, I have the next code to set a smooth transition from the bottom up, of 'tools and extensions', when I set 0px to 'gap' rule, the CPU reach 100% and the PC just die until I remove the code, I think it is caused for the transform rule, I changed the rule: transform: translateY(10px) !important; to a negative value and that solve the issue, but the transition is different, and I want to keep it.

The code is just this:

/* Hide tools except for the last one 'configuration' */

.actions-list[orientation="vertical"]:not(:hover) moz-button[type="icon ghost"]:not(:last-child),
.actions-list[orientation="horizontal"]:not(:hover) moz-button[type="icon ghost"]:not(:first-child) {
    opacity: 0 !important;
    transform: translateY(10px) !important;
    visibility: collapse !important;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease, transform 0.4s ease;
}

/* Show all tools when 'hover' */

.actions-list[orientation="vertical"]:is(:hover) moz-button[type="icon ghost"]:not(:last-child),
.actions-list[orientation="horizontal"]:is(:hover) moz-button[type="icon ghost"]:not(:first-child) {
    opacity: 1 !important;
    transform: translateY(0px) !important;
    visibility: visible !important;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease, transform 0.4s ease;
}

.tools-and-extensions[orientation="horizontal"] {
    gap: 0px !important;       
}

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?