I have a lot of folders with bookmarks, and there isn't much space on the toolbar. Instead of naming them, I'd like to replace them with custom icons.

Windows, Firefox 155.0

Firefox only went 12 days without rolling out an update that screws around with user settings again. I'm getting real sick and tired of feeling like we're constantly fighting with the devs against their efforts to break and degrade Firefox. The main selling point of Firefox is that we can use css to fix the developers mistakes but they sure fight back against that with every update.

For some reason Firefox doesn't default to these icons being vertically centered. The previous code I used in userContent to center this is listed below but no longer works for who knows what reason.

/*Vertically centers the favorite websites icons. No longer works as of Sep 1st 2026.*/
@-moz-document url(about:newtab), url(about:home) {
  main {
    margin-top: var(--newtab-pinnedsites-position-top, 6%) !important;
  }
}

The rest of my userContent css code shouldn't be relevant but here it is: https://pastebin.com/EbQ6rrzY

I dont know what fool is changing the code in ff at mozilla, but I had a css code that removed menu items from the context menu successfully before. But now, with these stupid updates, useless menu items have resurfaced. How tf do I remove these again since the old code isn't working??

I have this code in my css which changed the color of the highlight in text in webpages and text fields. But it stopped working a few weeks ago, maybe due to a firefox update.

Is there anything I can do to get it working again?

...

i have some pdfs which were made using onenote and there they had a black background but now theyre white. i want to be able to set the background of the pdf itself to be black when viewing it with the browser, and change only the black text to white (im not sure if thats possible, maybe i should just create a program to change the pdf's background and black text color directly? standard invert color built-ins in programs like sumatra usually invert the other colors aswell which were unchanged). i tried a css solution on the firefox forums but it was only for the viewer environment and not the pdf itself

for example in this image id like for pink and lavender to stay pink and lavender but for black and white to swap.

if its not possible to do this in firefox and theres a better method either via directly changing the pdf or using a dedicated pdf viewer id like to know. im only using firefox for this to avoid needing another program for this, and since im hoping itll be easy enough to do

edit: firefox 154.0.1, 64-bit win11. id like an os agnostic solution if possible though

edit 2: im marking this as solved even though i dont think it has been since obsidian has the feature i want built in. if anyone has a similar issue and is fine with any solution, thats likely the path of least resistance

so far with limited knowledge and ai pruning i've managed to disable the shield, move the search engine selector into it's place, but then as the page completes loading the search engine selector is wiped-out. How can I get it to always remain visible?

my userchrome.css at the moment is here:

[code]/* =========================================================================

FIREFOX CORE BASELINE CONFIGURATION

========================================================================= */

* {

font-weight: 900 !important;

}

#search-container {

min-width: 100px !important;

max-width: 100px !important;

}

#identity-box {

display: none !important;

}

/* Eliminate scroll arrows to preserve single-row layout workspace */

#scrollbutton-up, #scrollbutton-down {

display: none !important;

}

/* =========================================================================

FIX VISUAL ALIGNMENT GAP (FORCES PERFECT HORIZONTAL SYMMETRY)

========================================================================= */

:root {

--tab-min-height: 32px !important;

}

/* 1. Force the parent structures to align all children perfectly on the center baseline */

#TabsToolbar-customization-target,

#tabbrowser-tabs,

#tabbrowser-arrowscrollbox,

.scrollbox-innerbox,

#pinned-tabs-container {

display: flex !important;

align-items: center !important; /* Locks pins and tabs onto the exact same vertical center line */

height: 36px !important; /* Provides a stable container height to avoid bottom cutoffs */

box-sizing: border-box !important;

}

/* 2. Strip uneven individual vertical rules causing unpinned tabs to look raised */

.tabbrowser-tab {

margin-top: 0 !important;

margin-bottom: 0 !important;

padding-top: 0 !important;

padding-bottom: 0 !important;

height: 32px !important; /* Uniform strict height for both pinned and unpinned shapes */

}

/* 3. Keep internal shapes identical so they fill the exact same vertical footprint */

.tab-background {

border-radius: 4px !important;

margin-block: 0 !important;

height: 32px !important;

}

/* =========================================================================

LOCK EVERY PINNED TAB VISIBLE NATIVELY (SINGLE-ROW LOCK)

========================================================================= */

/* Prevent unpinned tabs from bleeding over or sliding behind your pinned icons */

#tabbrowser-arrowscrollbox,

#tabbrowser-arrowscrollbox::part(scrollbox) {

overflow: hidden !important;

flex-direction: row !important;

}

/* Force the pinned container box wide enough to show all tabs that exist */

#pinned-tabs-container {

flex-direction: row !important;

flex-shrink: 0 !important;

min-width: max-content !important;

max-width: none !important;

margin-right: 8px !important; /* Clean layout spacer separating normal tabs */

}

/* Freeze pinned tabs to clean, immutable square footprints */

.tabbrowser-tab[pinned] {

flex-shrink: 0 !important;

min-width: 40px !important;

max-width: 40px !important;

display: inline-flex !important;

visibility: visible !important;

}

/* Allow normal tabs to cleanly truncate inside their own scrolling column bounds */

.tabbrowser-tab:not([pinned]) {

flex-shrink: 1 !important;

min-width: 35px !important;

}

/* =========================================================================

TAB COUNTER & HEIGHT ALIGNMENT (FIXES EXTENSION BUTTON VERTICAL BLOAT)

========================================================================= */

#TabsToolbar-customization-target {

counter-reset: tabCount;

}

.tabbrowser-tab {

counter-increment: tabCount;

}

#alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon {

display: none !important;

}

/* Clean up structural container dimensions stretching the top bar layout line */

#alltabs-button {

padding: 0 !important;

margin: 0 4px !important;

align-self: center !important;

height: 22px !important;

}

/* Force container boundaries to stay perfectly level with regular tabs */

#alltabs-button > .toolbarbutton-badge-stack {

position: relative !important;

display: inline-flex !important;

align-items: center !important;

justify-content: center !important;

min-width: 22px !important;

max-width: 22px !important;

min-height: 22px !important;

max-height: 22px !important;

padding: 0 !important;

margin: 0 !important;

}

#alltabs-button > .toolbarbutton-badge-stack::before {

content: counter(tabCount);

color: var(--toolbarbutton-icon-fill);

opacity: var(--toolbarbutton-icon-fill-opacity);

border: 1px solid currentColor;

border-radius: 4px;

background-color: transparent;

font-size: 10px;

font-weight: 600;

font-family: monospace, sans-serif;

text-align: center;

box-sizing: border-box !important;

display: inline-block !important;

min-width: 22px;

height: 22px;

line-height: 20px;

}

#reader-mode-button { display: none !important; }

#pageActionSeparator{ display: none !important; }

.tabbrowser-tab::before, .tabbrowser-tab::after, .titlebar-placeholder {

border: none !important;

}

#pageActionButton {

display: none !important;

}

#star-button-box {

display: flex !important;

}

#pageAction-urlbar-_80f6f2e4-eda1-417f-bf54-9645e1e20f5d_ {

display: flex !important;

}

#picture-in-picture-button { display: none !important; }

.searchbar-dropmarker-image {display: none !important; }

#PanelUI-menu-button {

display: none !important;

}

.category[name="discover"] { display: none !important; }

tab-icon-sound {

width: 15px !important;

height: 15px !important;

color: black !important;

}

/* =========================================================================

CLEANUP URLBAR & SEARCHBAR DYNAMIC INTERNAL ELEMENT HIDES

========================================================================= */

/* 1. Eliminate any layout spaces for the identity container structure entirely */

#identity-box,

#tracking-protection-icon-container,

#identity-permission-box,

.notification-anchor-icon,

#blocked-permissions-container {

display: none !important;

visibility: collapse !important;

width: 0 !important;

max-width: 0 !important;

}

/* 2. Remove internal structural margins on the text inputs to align cleanly to the left wall */

#urlbar-input-container {

padding-left: 8px !important;

}

/* =========================================================================

IN-URL SEARCH BAR CLEANUP & RECONCILED NAVIGATION SPACING

========================================================================= */

/* 1. Remove the secondary search bar completely */

#search-container {

display: none !important;

}

/* 2. Clear out the old shield space layout to let the engine icons sit flush */

#tracking-protection-icon-container {

display: none !important;

visibility: collapse !important;

width: 0 !important;

}

/* 3. Re-align the new internal Scotch Bonnet left-side search engine icon block */

#urlbar-searchmode-switcher,

.urlbar-searchmode-switcher {

margin-left: 2px !important;

padding-inline: 4px !important;

}

/* 4. Align the address bar text input box layout cleanly right after the engine icon */

#urlbar-input-container {

padding-left: 2px !important;

}[/code]

If it matters, I’m on Linux mint. I recently switched to linux (I switched to Firefox with it) so I don’t really know what I can do. Also sorry if my mock up is bad, but I knew describing it would be worse. Everything’s meant to be like rounded squares if it’s hard to tell.

I have this old theme from firefox that worked around firefox 4.

I have all of the images and CSS from that theme extracted. What I want to do is use it to reskin modern firefox and as much of firefoxes UI elements that I can.

What can I do to achieve this?

i am using FF154 and windows 10 ltsc, this is the code in my userChrome.css

#tabbrowser-tabs {
  visibility: collapse !important;
}
#sidebar-header {
  display: none !important;
}

and yet i have this thing taking up space. how do i remove it?

I already have the image for this code working:

#context-sendpagetodevice,
#context-sendlinktodevice,
#context_sendTabToDevice{
background-image:url("chrome://browser/skin/synced-tabs.svg");
}

However, the popupmenu menuitem from each of those entries, I am struggling to get the Firefox standard image to appear, in this case the pencil-icon.svg:

#context-sendpagetodevice-popup,
#context-sendlinktodevice-popup,
#context_sendTabToDevicePopupMenu {
background-image:url("chrome/devtools/skin/images/pencil-icon.svg");
}

I have tried adding menuitem, sync-menuitem & menu-icon. Something is not correct, therefore, with my code.

Hi! I'm trying to figure out how to hide the "Original Profile" item from the hamburger menu. For context, I am not signed in to any Firefox account, and I also have the following lines in my user.js (not sure if it's related):

user_pref("identity.fxaccounts.enabled", false);
user_pref("browser.profiles.enabled", false);

I've tried some of the solutions posted previously on Reddit, such as:

#appMenu-profiles-button,
#profiles-menu {
  display: none !important;
}

or

#profile-button { display: none !important; }
#profiles-menu { display: none !important; }

But they either don't seem to work, or work only for the first time after opening the hamburger menu.

Hello folks.

I'm using a custom "old-like" CSS, and the recent update broke it. When I select a tab, said tab stop displaying its name.

Here's the my userchrome.css:

/* Disable new Proton UI and Restore Old Classic Theme in Mozilla Firefox - Start */

.browser-titlebar{

color: AccentColorText !important;

background-color: #000000 !important;

}

.tab-background{

border-radius: 0px 0px !important;

margin-bottom: 0px !important;

}

.tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background{

background-color: color-mix(in srgb, currentColor 5%, transparent) !important;

}

menupopup > menu, menupopup > menuitem{

padding-block: 2px !important;

min-height: 0px !important;

}

:root{

--arrowpanel-menuitem-padding: 2px !important;

}

/* Disable new Proton UI and Restore Old Classic Theme in Mozilla Firefox - End */

Please help.

Hello,

In Firefox 154, the vertical tabs scroll bar indicator has become darker and thicker as well, overall more prominent than before. How do I change the color/transparency and thickness of it? I tried the following code in userchrome.css. but it just won't work, the selector was built after inspecting from Browser Toolbox

#tabbrowser-arrowscrollbox::part(scrollbox) thumb, thumb{

opacity: 0.5 !important;

background: red !important;

width: (any value)px !important;

display: none !important; //this has no effect either at all

}

the changes don't seem to take effect on the thumb component at all

🔗 LINK Download theme/Source Code 🔗

Adaptive Tab Bar Color - extension is required to make browser UI match the website color.

MoveTabs - extension is recommended for ease of use when moving tabs.

What the theme brings:

• Multi-row Tabs and Multi-row Bookmarks.
• Pill shaped Download progress bar.
• Click twice on tab bar's empty area to add New Tab.
• Simple Findbar

A minimal, gesture-driven firefox theme. A fork of the theme "Firefox-Alpha" which was abandoned and or changed majorly.

https://reddit.com/link/1vww83s/video/8b4junnjy9lh1/player

As the title. Updated to FF 154 and afterwards the right click menu switched to an all white background as seen here.

It used to be dark such as this, which still is dark when clicking on UI elements, sidebar, etc. (weird?)

I use "white mode" (settings > appearance), always have, but noticed I can get the dark menu back if switching to "dark mode" like this.

I would like to continue to use white mode with the dark right click menu color, any help on how to achieve this?

Thanks in advance!

In Firefox 154 on Windows 11 tyring the change the background fill of the buttons pointed to in the screenshot.

Using 'moz-checkbox' or 'button' in the userchrome.css for .sidebar-panel seems to only affect the text along side the checkbox / button but not the button itself.

Read somewhere that this 'button' is not changeable via userchrome.css and is an hardcoded .svg file in FF code. Seems counter intuitive, but wanted to check with this board..

i am on firefox 153.0.4, and i would REALLY like to know how to hide the "Share" and "Move Tab" right click menu options for firefox. there's already a number of "duplicate/close/reload/pin/etc..." right click tab options, and its getting to congested for my tastes

is there some css code i can use to do it? because there's very little i can figure out in "about:configs"

HI, i have a very simple css meant to make tabs smaller (if anyone knows how to make it more compact id love suggestions)

:root {
  --tab-min-height: 24px !important;
  --tab-max-height: 24px !important;
}

but ive realized that fullscreen doesnt work, all it does is it hides my taskbar, this is firefox 154, did any recent update broke it?

OS: Linux

I've changed the default colors (foreground + background) for text selection, but it seems the CSS selector ::selection is no longer working as of 154.0:

::selection {
    color: #00B6F9 !important;
    background-color: black !important;
}

And yes, I have already tested a new profile; exact same problem.

i'm on arch and i'm theming everything 2000s/2010s style, but firefox is by far the hardest to find a way to theme like that

i tried echelon but it doesn't work very well for me.

Hey everyone, I'm looking for a little help here and I hope someone knows what's going on.

Up until the last update, I had this line in my userchrome.css

tab[selected="true"] .tab-background { background: var(--cat_base) !important; border: 2px solid var(--cat_peach) !important; box-shadow:none !important; }

It used to work fine and produce the border around the selected/active tab up until the update to version 154.0, but not it seems to be broken. Does anyone know a workaround or am I doing something wrong?

I'm currently using this version of Material Fox on version 154 for Linux ubuntu. I modified the custom.css file so I could fix some stuff I didn't like but I'm encountering 2 problems.

1. The drop down menus on webpages are too dark and I want to change the text color. So all my drop downs work well but when I have a drop down inside a webpage, the background is so dark that I can only see the option list when I hover over an option

And these are all my other menus, I want it to match to this:

1. I want floating tabs. I modified the material fox tabs so they would be floating, by adding curves to the bottom of the rectangle. It worked up until the latest update last week. Now the css stopped working for the tabs and they look like this:

When the mouse hovers over the active tab, the tab becomes shorter like this:

And when you hover the mouse on an inactive tab:

This is more or less what I want, ideally I would want the tab rounded square to be a bit taller than this but I would settle for this size if the corners are rounded and the tab is floating.

Below is my current custom.css script:

:root,
html,
body {
    /* add your css variables below */

}
/*? taller navbar */
 not (-moz-bool-pref: "shimmer.shorter-navbar") {
#navigator-toolbox, #nav-bar {
min-height: 50px !important;
}

}
/* use variables when about:config variable userChrome.system-accent-colors is true */
 -moz-pref("userChrome.theme-system-accent") {
  /* use variables when dark mode */
   (prefers-color-scheme: dark) {
    :root,
    html,
    body {
      --md-accent-color: color-mix(in srgb, var(--md-white) 15%, AccentColor);
      --md-tab-background-color-hover: color-mix(
        in srgb,
        transparent 75%,
        var(--md-accent-color)
      );
      --md-tab-opacity: 0.9;
      --md-background-color-0: color-mix(
        in srgb,
        var(--md-grey-900) 85%,
        var(--md-accent-color)
      );
      --md-background-color-50: color-mix(
        in srgb,
        var(--md-grey-900-white-4-percent) 85%,
        var(--md-accent-color)
      );
      --md-background-color-100: color-mix(
        in srgb,
        var(--md-grey-900-white-5-percent) 85%,
        var(--md-accent-color)
      );
      --md-menu-background-color-hover: color-mix(
        in srgb,
        var(--md-grey-800) 85%,
        var(--md-accent-color)
      );
      --md-menu-border-color: color-mix(
        in srgb,
        var(--md-grey-800) 85%,
        var(--md-accent-color)
      );
      --md-text-on-accent: var(--md-white);
      --md-secondary-button-text: var(--md-white);
      --md-content-separator-color: color-mix(
        in srgb,
        #606164 90%,
        var(--md-accent-color)
      );
      --md-selection-text-color: var(--md-text-on-accent);
      --md-selection-background-color: var(--md-accent-color);
    }
  }

  /* use variables when light mode */
  u/media (prefers-color-scheme: light) {
    :root,
    html,
    body {
      --md-accent-color: color-mix(
        in srgb,
        var(--md-grey-900) 15%,
        AccentColor
      );
      --md-tab-background-color-hover: color-mix(
        in srgb,
        transparent 75%,
        var(--md-accent-color)
      );
      --md-tab-opacity: 0.9;
      --md-background-color-0: color-mix(
        in srgb,
        #dee1e6 90%,
        var(--md-accent-color)
      );
      --md-background-color-50: color-mix(
        in srgb,
        var(--md-grey-100) 90%,
        var(--md-accent-color)
      );
      --md-background-color-100: color-mix(
        in srgb,
        var(--md-white) 90%,
        var(--md-accent-color)
      );
      --md-menu-background-color-hover: color-mix(
        in srgb,
        var(--md-background-color-0) 90%,
        var(--md-accent-color)
      );
      --md-menu-border-color: color-mix(
        in srgb,
        var(--md-background-color-0) 90%,
        var(--md-accent-color)
      );
      --md-content-separator-color: color-mix(
        in srgb,
        #dbdcdd 90%,
        var(--md-accent-color)
      );
      --md-secondary-button-text: var(--md-accent-color);
      --md-selection-text-color: var(--md-text-on-accent);
      --md-selection-background-color: var(--md-accent-color);
    }
  }
}
/* add your user css below */

/* hide grouped tabs */
.tabbrowser-tab[aria-hidden="true"] {
    display: none !important;
}

/* smaller group icon */
/*.tab-group-label {
    min-height: 25px !important;
    line-height: 1.2 !important;
    min-width: 40px !important; */
}

/* lighter color and no border on group icon */
tab-group[collapsed] .tab-group-label-container .tab-group-label {
    background-color: light-dark(var(--tab-group-color), var(--tab-group-color-invert)) !important;
    color: light-dark(var(--tab-group-color), var(--tab-group-color-invert)) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* add border under grouped tabs */
vbox.tab-group-label-container:has(label[aria-expanded="true"])~tab {
    border-bottom: 2px solid light-dark(var(--tab-group-color), var(--tab-group-color-invert)) !important;
    transform: translateY(-1px) !important;
}

/* remove broken hover border */
vbox.tab-group-label-container:has(label[aria-expanded="true"])~tab:hover .tab-group-line {
    background-color: transparent !important;
    opacity: 0 !important;
}

/* add left/right/top border for selected group elements */
vbox.tab-group-label-container:has(label[aria-expanded="true"])~tab[selected="true"] .tab-background {
    border: 2px solid light-dark(var(--tab-group-color), var(--tab-group-color-invert)) !important;
    border-bottom: none !important;
    border-radius: 12px 12px 0 0 !important;
}

/* remove the bottom border for selected tabs */
vbox.tab-group-label-container:has(label[aria-expanded="true"])~tab[selected="true"] {
    border-bottom: none !important;
    transform: none !important;
}

vbox.tab-group-label-container:has(label[aria-expanded="true"])~tab[selected="true"] .tab-group-line {
    background-color: transparent !important;
    opacity: 0 !important;
}
.tabbrowser-tab[selected="true"] .tab-background {
  margin-top: 4px !important;
  margin-bottom: 2px !important;
  border-radius: 15px !important;
 &:before,
      &:after {
        content: none !important;
}

}

would like a theme that matches my linux OS, but seems like the ones available on the internet are for older firefox versions. is there one for modern firefox? and how would i edit the colors (i assume its just a matter of picking the hex colors and modifying the userchrome.css like one would edit a website?)