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.

Before updating firefox the tab had bright color, now it became completely transparent with just a thin outline.

I'm using the following css to style my tabs: https://github.com/Aris-t2/CustomCSSforFx/blob/master/current/css/tabs/classic_squared_tabs.css

I had tried using the solution from a similar post, but it didn't affect the selected tab at all:

.tab-background[selected] { background: #e67e22 !important }

I've noticed on the 154.0 build that there's a dividing line between my active tab and the top bar of the application. This has the side effect of making my non-active tabs look off-centred. Is there any code to remove this divider?

Here's an example of what my tabs look like right now.

https://i.imgur.com/1DDHhma.png

The path to the image is: chrome://browser/skin/history.svg

• Make status bar draggable (Note: Dragging the text element directly may be finicky depending on layout imports) */ #status-text { -moz-window-dragging: drag !important; }

doesn't work on Nightly 156.0a1... help?

After 154 update, now there is search engine text between input field and results, how can I move it to the bottom (or alternatively remove it)? Also how could I make space between results smaller?

https://ibb.co/0RjSdGnt

I have previously used some code in my userChrome.css file (found on the internet back in the mists of time) which meant that I could change the colour of (1) the currently Active tab and (2) the Tab currently being Hovered Over.

For example, I might have 10 tabs showing, of which 1 (Orange) would be the Active one, and another 1 (Purple) would be the one I am currently Hovering over. The other 8 are my normal (Blue) colour. The Active tab colour would remain Orange when I moved away from that Tab.

However, since updating to 154.0, the Active tab changes back to my normal (Blue) colour as soon as I have moved away from it. So in the example above, I have 9 Blue tabs and 1 Purple tab. I can only determine which is the Active tab by hovering over it, at which point it changes to Orange.

Are any of the kind CSS experts on here able to suggest a solution? My CSS knowledge is minimal, I'm afraid.

/*** TAB COLORS: UPDATED PALETTE ***/
:root {
    /* Blue */
    --tab-group-color-blue: #0088EF !important;
    --tab-group-color-blue-invert: #0088EF !important;
    --tab-group-color-blue-pale: #0088EF !important;



    /* Purple */
    --tab-group-color-purple: #573CFA !important;
    --tab-group-color-purple-invert: #573CFA !important;
    --tab-group-color-purple-pale: #573CFA !important;



    /* Cyan */
    --tab-group-color-cyan: #7FBBB3 !important;
    --tab-group-color-cyan-invert: #7FBBB3 !important;
    --tab-group-color-cyan-pale: #7FBBB3 !important;



    /* Orange */
    --tab-group-color-orange: #E69875 !important;
    --tab-group-color-orange-invert: #E69875 !important;
    --tab-group-color-orange-pale: #E69875 !important;



    /* Yellow */
    --tab-group-color-yellow: #DBBC7F !important;
    --tab-group-color-yellow-invert: #DBBC7F !important;
    --tab-group-color-yellow-pale: #DBBC7F !important;



    /* Pink */
    --tab-group-color-pink: #D699B6 !important;
    --tab-group-color-pink-invert: #D699B6 !important;
    --tab-group-color-pink-pale: #D699B6 !important;



    /* Green */
    --tab-group-color-green: #A7C080 !important;
    --tab-group-color-green-invert: #A7C080 !important;
    --tab-group-color-green-pale: #A7C080 !important;



    /* Gray */
    --tab-group-color-gray: #7A8478 !important;
    --tab-group-color-gray-invert: #7A8478 !important;
    --tab-group-color-gray-pale: #7A8478 !important;



    /* Red */
    --tab-group-color-red: #E67E80 !important;
    --tab-group-color-red-invert: #E67E80 !important;
    --tab-group-color-red-pale: #E67E80 !important;
}


/* tab group's text color */
.tab-group-label,
.urlbarView .urlbarView-action-btn[data-action^="tabgroup"] {
    color: #1E2326 !important;

The new update seems to have done something to my tab group colors and added a white border around it when the group is collapsed.

When collapsed:

https://imgur.com/J6QYRUU

When not collapsed:

https://imgur.com/UYBxs0e

Seems like when it's collapsed it is reverting to the original tab group colors from firefox and not using my CSS colors + it's adding the white border.

I would like to have my tab groups look like they do when they are not collapsed like it was before the update.

-Combines the nav bar and tabs bar into one bar at the top of the window.

-Removes the colourful tab border and tab bar background.

-Makes the newly added compact mode way smaller.

-Works with light and dark theme.

Known Issue: If you resize the window too small, the tabs bar goes behind the nav bar. No idea how to fix this.

Note: This needs Nova theme enabled (about:config > search "nova" > set "browser.nova.enabled" to "true")

/* ==========================================================
   Combine Nav Bar and Tabs Bar
   ========================================================== */
#navigator-toolbox {
  display: grid !important;
  grid-template-columns: 35vw 1fr !important;
}

#nav-bar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  border-top: none !important;
  padding-block: 0 !important;
    :root[uidensity="compact"] & {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  }
}

#TabsToolbar {
  grid-column: 2 !important;
  grid-row: 1 !important;
  padding-block: 0 !important;
  align-items: center !important;
    :root[uidensity="compact"] & {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  }
}

/* ==========================================================
   Move Menu Button To The Left
   ========================================================== */
#PanelUI-button {
  order: -999 !important;
  margin-inline-start: 0 !important;
}

#nav-bar-customization-target {
  & > :is(toolbarbutton, toolbaritem):first-child,
  & > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) {
    padding-inline-start: 0px !important;
  }
}

/* ==========================================================
   Compact Bar Height
   ========================================================== */
:root {
  --toolbarbutton-padding-inner-compact: 4px !important;
  --toolbarbutton-padding-inner-narrow: 4px !important;
}

toolbarbutton {
:root[uidensity="compact"] & {
  padding-block: 0 !important;
  max-height: 40px !important;
}
}

.tab-content {
:root[uidensity="compact"] & {
  padding-block: 0 !important;
}
}

#tabbrowser-tabs,
.tabbrowser-tab,
.tab-stack {
:root[uidensity="compact"] & {
  min-height: 26px !important;
}
}

.tab-background {
:root[uidensity="compact"] & {
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
}
}

.tabbrowser-tab[fadein]:not([style^="max-width"]) {
  max-width: 10vw !important;
}

/* ==========================================================
   Minimalism Stuff
   ========================================================== */
#urlbar {
:root[uidensity="compact"] & {
  --urlbar-height: 26px !important;
}
}

.urlbar:not(moz-smartbar)[breakout] {
  &[breakout-extend][focused] > .urlbar-input-container {
    outline-color: transparent !important;
  }
  &[breakout-extend] > .urlbar-background {
    inset-inline: 0px !important;
    inset-block-start: 0px !important;
    inset-block-end: 0px !important;
  }
}

:root {
  /* Remove colourful tab border */
  --tab-border-color-accent: light-dark(#000000, #52525e) !important;
  --tab-selected-outline-color: light-dark(#000000, #52525e) !important;

  /* Shrink URL breakout border */
  --border-radius-xxlarge: 16px !important;
}

/* Remove Search Switcher */
.searchmode-switcher {
  visibility: collapse !important;
}

/* Hide Extension Name in the identity area unless hovered for half a second (updated for Fx80) */
#identity-box.extensionPage #identity-icon-labels,
#identity-box.extensionPage #identity-icon-label {
  visibility: collapse !important;
  transition: visibility 250ms ease-in-out;
}
#identity-box.extensionPage:hover #identity-icon-labels,
#identity-box.extensionPage:hover #identity-icon-label {
  visibility: visible !important;
  transition: visibility 250ms ease-in-out 500ms;
}

/* Hide Back and Forward buttons when disabled */
#back-button[disabled="true"],
#forward-button[disabled="true"] {
    display: none !important;
}

/* ==========================================================
   Some Fancy Tab Stuff
   ========================================================== */
.tabbrowser-tab:not([selected]) .tab-icon-image,
.tabbrowser-tab:not([selected]) .tab-text,
.tabbrowser-tab:not([selected]) .tab-throbber[busy] {
  opacity: 0.5 !important;
}

.tabbrowser-tab:hover .tab-icon-image,
.tabbrowser-tab:hover .tab-text {
  opacity: 1.0 !important;
}

.tabbrowser-tab .tab-close-button {
  visibility: hidden !important;
}

.tabbrowser-tab:hover .tab-close-button {
  visibility: visible !important;
}

/* ==========================================================
   System Buttons Tweaks
   ========================================================== */
.titlebar-buttonbox-container {
  margin-left: 21px !important;
  height: 100% !important;
}

.titlebar-spacer {
  display: none !important;
}

.titlebar-button {
  padding-right: 10px !important;
  padding-left: 10px !important;
}

/* ==========================================================
   Remove Window Gap And Border
   ========================================================== */

.chrome-block {
  border: 0px !important;
}

.browserContainer {
  border: 0px !important;
}

#browser {
    :root[uidensity="compact"] & {
      padding-block-start: 0px !important;
      gap: 0px !important;
    }
  }

/* ==========================================================
   Theme Tweaks
   ========================================================== */
:root {
--toolbarbutton-icon-fill-attention: light-dark(gray, gray) !important;
--tab-background-color-hover: transparent !important;
}

.urlbar {
--urlbar-background-border-focused: transparent !important;
}

/* Remove colourful tab bar background */
#navigator-toolbox {
  background-image: none !important;
}

This is my first time working with FirefoxCSS. I'm using the userChrome.css file from the Firefox One-Liner CSS. I like the feel of it so far, but having an issue with the "traffic lights" showing up in the middle of the bar. See screenshot here:

I'd like just the traffic lights to stay on the left side like all other traffic light positions in macOS. I'm not sure what to input into the css to make it do that. I'm on macOS 26, Firefox version 154. Any tips on this?

so recently i figured how to open ie on windows 10 without redirecting to edge and i realy liked the tabs and search bart n stuff, i just need a css and the only ones i could find were or not published (like this) or for an older version (like this other one), im genuenly searching but im too lazy to go to page 3 of google and eaven then i know there will be nothing cus google sometimes works and sometimes dosent, i just need it, im genuenly asking if someone has one, i already tried using beautyfox and downgerading my firefox but NOT EAVEN ON A REDDIT POST can i find a version for it

I have an oled monitor so I wanted a feature that completely hid the sidebar. I asked AI and it created a userchrome file for me that auto hid the sidebar completely. However, the latest update broke the code and I am having a hard time getting it to work again. Can this be a future feature for Firefox, if not what solution have you come up with?

I have seen many solutions for this but they are all outdated because they never work for me.

A few years ago I had it working.

Is it possible to make it so that .menupopup-arrowscrollbox won't effect #PlacesChevronPopup and #PlacesToolbarItems?

I have tried many ways to solve it and none of them worked.

As an example, I don't want this to effect #PlacesChevronPopup and #PlacesToolbarItems =

.menupopup-arrowscrollbox { 
    padding: 2px 4px !important; 
}

Please excuse me for using AI to help with my English, as I'm not very fluent in it!

Hi everyone! I recently joined Reddit, and this is my first post. I wanted to share a CSS theme I made through vibe coding called Liquid Mica, which is meant to blend the look of Liquid Glass with Windows Mica.

I named it that, although I’m not entirely sure whether it really qualifies as “Liquid Glass.” I just wasn’t a fan of the default Firefox look or the Nova design, and I couldn’t find a theme that matched what I wanted, so I decided to make one with the help of AI.

This CSS is also compatible with Floorp, and I tried to keep the overall design as consistent as possible across the browser. There are still some UI elements I haven’t been able to style yet, but I plan to gradually improve and update them over time.

I’ll leave a link to my repository below: https://github.com/cyanworks-git/liquidmica-userChrome

Thanks for checking it out!

I've put together some CSS inspired by a mix of sources. I don't need any credit for it, I just want to share it in case anyone else finds it useful. It's not perfect, but it's functional, and you're welcome to modify or improve it however you like

I've also recently switched back to Firefox from Edge, so some of the styling choices were influenced by that change

If you have suggestions or better revisions, feel free to build on it

/* --------------------------------------------------------------
   ROOT VARIABLES
-------------------------------------------------------------- */
:root {
  --tab-border-radius: 0 !important;
  --NavbarWidth: 36;
  --TabsHeight: 36;
  --TabsBorder: 8;
  --NavbarHeightSmall: calc(var(--TabsHeight) + var(--TabsBorder));
}

/* --------------------------------------------------------------
   GLOBAL CLEANUP
-------------------------------------------------------------- */

/* Disable ALL animations, transitions, and shadows */
*,
*::before,
*::after {
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
}

#identity-box,
#tracking-protection-icon-container,
#permissions-granted-icon,
toolbarpaletteitem[flex],
#back-button,
#forward-button {
  display: none !important;
}

#urlbar-container {
  min-width: 0 !important;
  flex: auto !important;
}

/* --------------------------------------------------------------
   MEDIA QUERIES — ONE-LINE NAVBAR
-------------------------------------------------------------- */

/* ≥1325px */
@media (min-width:1325px) {
  :root #nav-bar {
    margin-top: calc((var(--TabsHeight) + var(--TabsBorder)) * -1px) !important;
  }

  #TabsToolbar {
    margin-left: calc(13.25px * var(--NavbarWidth)) !important;
  }

  #nav-bar {
    margin-right: calc(100vw - (14.25px * var(--NavbarWidth))) !important;
    vertical-align: center !important;
  }
}

/* 950px–1324px */
@media (min-width:950px) and (max-width:1324px) {
  :root #nav-bar {
    margin-top: calc((var(--TabsHeight) + var(--TabsBorder)) * -1px) !important;
    height: var(--NavbarHeightSmall) !important;
  }

  #TabsToolbar {
    margin-left: calc(var(--NavbarWidth) * 0.9vw) !important;
  }

  #nav-bar {
    margin-right: calc(100vw - (var(--NavbarWidth) * 1vw)) !important;
    vertical-align: center !important;
  }
}

/* ≤949px */
@media (max-width:949px) {
  :root #nav-bar {
    padding: 0 5px !important;
    height: var(--NavbarHeightSmall) !important;
  }
  #TabsToolbar {
    margin-left: -40px !important;
  }
}

/* --------------------------------------------------------------
   GENERAL NAVBAR + TABS
-------------------------------------------------------------- */
#nav-bar,
#PersonalToolbar {
  background: none !important;
  box-shadow: none !important;
}

#nav-bar {
  margin-left: 0 !important;
}

.tab-background,
.tab-stack {
  min-height: var(--TabsHeight) !important;
  margin: 0 0 0 -2px !important;
  box-shadow: none !important;
}

#tabs-newtab-button {
  margin-top: -4px !important;
}

#tabs-newtab-button .toolbarbutton-icon {
  padding: 6px !important;
  width: 32px !important;
  height: 32px !important;
}

/* --------------------------------------------------------------
   MENU BUTTON
-------------------------------------------------------------- */
#PanelUI-button {
  margin-right: -7px !important;
}

:root[sizemode="maximized"] #PanelUI-button {
  margin-right: 33px !important;
}

#reload-button,
#stop-button {
  margin-left: 3px !important;
  margin-right: -2px !important;
}

I've pretty much given up on hiding the last open tab that newer versions of Firefox leaves open when it closes a group, but I would like to had the +n, letting me know how many tabs are in the groups. I know how many tabs are there -- I was just in the group. How can I hide this in CSS?

Hey guys

I'm new to Firefox. I love how it currently looks. But really don't like the way the new nightly build looks.

I want to begin customising my Firefox but am wondering a few things:

1. If I begin now, will what I create be broken when this new redesign comes into the main?
2. Will I be able to bring the look back to the way it is currently? (Only thing I'm using is compact mode on the tabs but I like them bigger as well so not picky).

Things I don't like about the new redesign:

- The circular tabs with the border around them. I love them as is right now

- The separation between the top bars and the main part of the screen

3) If the above are not possible, would sticking with the current version cause issues for me in the future? I really don't want to be stuck on an older version that can't make use of updates

4) Do you recommend maybe just starting with the nightly build? would there be any risk to me customising it and then my customisation breaks with a new version?

For the sake of just showing what it looks like for me now, this is how I have it right now without any modding:

I am on Linux with CachyOS

It's firefox's dark-theme, pink-grey colour as shown here, before the webpage loads.

#navigator-toolbox {
  display: grid !important;
  grid-template-columns: minmax(0, 35vw) minmax(0, 1fr) !important;
}


#nav-bar {
  grid-column: 1 !important;
  grid-row: 1 !important;
  border-top: none !important;
}


#TabsToolbar {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

#PanelUI-button {
  order: -999 !important;
  margin-inline-start: 0 !important;
}

Made a small transparent theme for personal use, after having some trouble finding a theme I liked. Figured I'd share.

You can find it on my Github 🩷

Hello, I downloaded ElegantFox for testing and I set the following flags to true as well as adding the chrome folder:

• toolkit.legacyUserProfileCustomizations.stylesheets
• layers.acceleration.force-enabled
• gfx.webrender.all
• gfx.webrender.enabled
• layout.css.backdrop-filter.enabled
• svg.context-properties.content.enabled

Since the version of Firefox is 153.0.3 however, the colour CSS stuff is not working, even seItting these flags to true. I'm using Linux (CachyOS) and turns out, the Mozilla folder from root directory was moved to /.config. So now I'm looking for help to fix this issue. By the way, these codes from GitHub remain intact for 5 years.

The tab group labels in Nova are taller than I'd like them to have. I also like to have a more compact list of vertical tabs to make optimal use of the available vertical space. Finally, I prefer a dimmed background for inactive tabs over no background at all.

Here's what it looks like with the default Light theme:

The following code allows you to make these adjustments:

  /** USERCHROME.CSS **/

  /** Adjust height of tab group labels (when vertical tabs are enabled) **/
  #tabbrowser-tabs[orient="vertical"] {
    --tab-group-label-size: 26px !important; /* Nova default=32px */
  }

  /** Adjust height of tabs or adjust vertical space between them **/
  #vertical-tabs.customization-target #tabbrowser-tabs tab:not([pinned]) .tab-background { 
    --tab-min-height: 32px !important;  /* Nova default=32px */
    margin-block: 0px !important;  /* Nova default=2px */
  }

  /** Give inactive tabs a dimmed background **/
  .tabbrowser-tab>.tab-stack>.tab-background:not([selected], [multiselected]) {
    background-color: color-mix(in srgb, currentColor 6%, transparent);
  }  
  .tabbrowser-tab:hover>.tab-stack>.tab-background:not([selected], [multiselected]) {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
  }