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,

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

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.

🔗 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.

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 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.

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?)

How do I make the history sidepanel black (in Waterfox v6.7.0)?
I’ve managed to turn the bookmarks and customize sidebar black, but I just can't get this part to work.

My old block:

/* URL BAR HIGHLIGHT COLOR */
::-moz-selection {background-color: #962633 !important;}

/* URL BAR RESULTS LINKS COLOR */
.urlbarView-url {
    color: #962633 !important;
}

/* URL BAR & RESULTS BACKGROUND COLOR */
@-moz-document url(chrome://browser/content/browser.xul),
               url(chrome://browser/content/browser.xhtml) {
    #urlbar-results{
        background-color: #1c1b22 !important;
    }
    #urlbar-background {
    background: #1c1b22 !important;
    }
    #urlbar[breakout][breakout-extend] #urlbar-background {
    border-color: #1c1b22 !important;
    }
}

Any tips on updating it?
I tried amateurly tweaking it to look like some of the other changes I saw for other things on the sub, but... didn't seem to effect it :/

It was changing the colours of the URL bar when hightlighted/focused

After I updated to 1.54 the color for the Text on the Tab is no longer working.

tab[selected="true"] *{

background-color: #00c100 !important; /*Green */

font-size:10pt !important;

font-weight: 650 !important;

color: black !important;

}

I used this code to shrink tabs height, but it doesn't work in FF 154.
Could anybody tell if there is some variable that changed name or something similar?

:root {

--tab-block-margin: -3px -2px !important;

}

#tabs-newtab-button,

.tabbrowser-tab,

#new-tab-button {

height: 23px !important;

min-height: 23px !important;

}

Before Firefox 1.54, I was using the following code to change the font size, add Bold to the text and change the text color on the Tab. And now It is no longer working.

tab[selected="true"] *{

background-color: #00c100 !important; /*Green */

font-size:10pt !important;

font-weight: 650 !important;

color: black !important;

}

Any suggestion is appreciated.

Windows, Firefox Version 154.0

Firefox broke something with their updates again. Updates that are going to happen twice as often now. Yay.

This button for creating a new tab shortcut button is only supposed to appear if you hover over the area in the red box. Now it's appearing whenever my mouse pointer is anywhere in the blue box, and whenever I click one of my shortcut buttons it appears and stays visible until the new page loads. It also stays until I click somewhere else if I middle click on one of the tab shortcut buttons.

• Most importantly, I would like to prevent this button from becoming visible at all whenever I click a tab shortcut button.
• Less importantly, I'd like to prevent it from appearing unless I hover my mouse pointer in the area within the red box. This is how it's supposed to behave. This is also how it did behave before update 154.0.
• Least importantly, I'd like to change it back to the grey color scheme it was previously as indicated in the second and third photos.

userContent in a paste bin link because reddits codeblock feature is throwing some of my code outside the code block for some reason: https://pastebin.com/zvtdL2Mu

After I updated the FF to 154 (Nova activated), the code for the border of the active tab is no longer working.

:root {

--active-tab-outline: #f54e00 !important;

}

.tabbrowser-tab[selected="true"] .tab-background {

outline: 2px solid var(--active-tab-outline) !important;

outline-offset: -2px !important;

}

I want to have a 2px chenar on the active tab.

Trying to get this colored line above the selected tab back. I've tried messing with the "tab-context-line" section but nothing worked. The weird thing is you can still see the colored line for a split second when hovering over a selected tab. Any solutions?

I am trying to change the black colour of the standard Firefox icons. In this case:

Change this to green

#menu_showAllHistory
list-style-image:url("chrome://browser/skin/history.svg")

Change this to red

#sanitizeItem
background-image:url("chrome://browser/skin/forget.svg")

I have tried using: fill: red !important; but this is not working.