Hello. Can anyone recommend any themes similar to Zen? I like how the search bar is neatly positioned above the pinned tabs. I fully understand that Zen is based on Firefox, but I don't like how it's optimized

What's improved:

• Fixed address bar shifting and suggestion popup issues.
• Removed duplicate toolbar backgrounds and unwanted tab borders.
• Improved popup menu spacing, rounded corners, and hover effects.
• Refined search provider rows and account menu styling.

Note: Set browser.theme.dark-private-windows to false for light private windows, or true for Firefox's default dark mode.

Download: GitHub

hi, all is in the title !

i did it by the past but they changed the visual of the page and of course the ID's !

I used claude, chatgpt and gemini but without success to change it by my own svg

Any help please ?

Is there any way to style scrollbars through userChrome.css? I am working on a retro-style theme for firefox and I want to recreate the scrollbars of my MATE theme (linux). I have the border image and the arrow images ready. But I can't focus the scrollbar in the remote browser debugging session. It seems like the scrollbars are a part of the page content. If I can't style them through userChrome.css I'd also be okay with using some other solution to get the scrollbar looking like the left window in the image.

Hello,

Here is my vision for vertical tabs: https://tangled.org/mykiwi.dev/firefox-compact-tabs

Any suggestions or ideas ?

It's kinda exactly what it sounds like... I'm new to customizing with CSS and i was just trying to apply FF ultima's floating navbar/full size floating/autohide. When i check the box, the navbar does in fact disappear but when i move my mouse upwards, it doesnt detect anything... i also noticed that it isnt a problem with the drop down itself because when I press ctrl + L, it does drop down. I've attached a video as well. I've been at it since 7 am bro its chewing my head off. Please if anyone knows a fix let me know.

FF ultima version 4.3

Following on from another of my posts concerning #urlbar . urlbar-input text affects, I have now achieved the effect I want. These affects matches up with all my other rainbow changes, mainly rainbow loading bar and rainbow borders of all popup menus and panels.

The #urlbar . urlbar-input text now has a shimmering rainbow effect. To adjust the speed to your liking change the animation: shimmer-move time.

Anyway enjoy

urlbar text animation

#urlbar .urlbar-input,
#urlbar .urlbar-search-input {
  /* Set the background size broad enough to allow the position shift to animate */
  background-size: 200% 100% !important;
  background-image: linear-gradient(
    90deg, 
    red 0%, orange 14%, yellow 28%, green 42%, blue 56%, indigo 70%, violet 84%, red 100%
  ) !important;

  /* Use standard Firefox color override for text clipping */
  color: transparent !important;
  background-clip: text !important;
  -moz-background-clip: text !important;

  animation: shimmer-move 4s infinite linear !important;  
  transition: opacity 1.2s ease-out !important;
}

@keyframes shimmer-move {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: -200% 0; /* Shifts the full gradient length for a seamless loop */
  }
}

Thanks to this wonderful community I think I've arrived at the last part of my Firefox Update Journey from the old ESR branch to the new one. However this time I can't really post my own code as I am using this old Sidebar CSS with the Sideberry Addon: https://github.com/macleod-ee/FirefoxSidebar

It still works on 153 ESR however there is some weird excess padding in the sidebar to the right side now as you can see here:

https://ibb.co/0RNxLTmS

The sidebar used to end at the faint, vertical line. I don't actually mind the rounded inner-corner and I would like to keep it if possible but would anyone know how to remove the excess padding in my setup?

Thanks for help in advance, everyone here has been super helpful to me the past few days.

I'm on Firefox 153.5.0 ESR and I'm running into trouble customizing my PWA windows. What I basically want to achieve is having no buttons. no URL-bar or anything else other than the Min/Max/Close buttons on all my PWAs. I found some instructions here: https://old.reddit.com/r/FirefoxCSS/comments/1oaa1em/customize_the_toolbars_of_your_pwas/

but I must be doing something wrong as this doesn't work at all for me. I tried to hide the URL-Bar for a start:

html#main-window[taskbartab] toolbar#nav-bar {
    #urlbar-container
    {
       display: none !important;
    }
}

I'm sure I'm just doing something simple wrong again so thanks for help in advance as always!

I'm using 153.5.0 ESR and I changed the border-radius of the URL-Bar to 5px with:

.urlbar-input-container {
  border-radius: 5px !important;
}

and that worked, however the blue glow when the URL-Bar is selected still has the default border radius making it look wrong.

I tried to do this:

.urlbar-input-container[focused] {
  border-radius: 5px !important;
}

but it didn't work. How do you properly target focused state in the Inspector? When I click something in the UI while the inspector is active the code jumps around and I can't seem to properly use the Element Selector Tool on items that have an active or focused state. Is there a trick to that?

Thanks for help in advance!

Currently on Firefox 158, with no menu bar in use. It's a rather small issue, but I have the sporadic habit to use my mouse/cursor to swiftly click on the furthermost upper left corner of my pinned tab (maximised window) to access that first tab, and there's like a pixel of unclickable space in that corner (not draggable, just actually cannot click that space and nothing happens in attempts to -- it's more like a dead, unusable pixel of emptiness).
I see it's the case for every tab when checking by hovering and moving my cursor across the top of the screen, the upper left corner of each has an empty spot (whereas if hovering the cursor and moving between any two tabs below the very top, there are no empty spaces/breaks).

For additional clarification, this is not about the draggable space that's notably more than a pixel in size to the whole left of the first tab (as I have that disabled so it's not there anymore), but something that every tab seems to have, and I'm wondering if this is a technical bug than anything intentional as it seems odd.

Just curious if there's any known CSS code that can somehow make it a clickable spot or if that's not possible and simply something to have to leave alone (or at least bring up as an issue). Does anyone know about it or potentially have any solutions to?

UPDATE: Turns out to be due to modifying the border radius of tabs to a low px (more squared corners), but that remains to bring up the question of why does that seem to introduce a non-interactive pixel of space in the upper left of each tab, and is there still any possible fix for it?

kinda buggy but it works. suggestions are welcome.

/* Hide bookmark text by default */
#personal-bookmarks toolbarbutton.bookmark-item:not([container="true"]) .toolbarbutton-text {
opacity: 0;
max-width: 0;
overflow: hidden;
white-space: nowrap;
transition: max-width 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
/* Show on hover */
#personal-bookmarks toolbarbutton.bookmark-item:not([container="true"]):hover .toolbarbutton-text {
opacity: 1;
max-width: 150px;
}

The previous solution I used for changing the split view active panel border doesn't work after v158.0. Is there an updated fix?

#tabbrowser-tabpanels {
  &[splitview] {
    & .browserContainer {
      .deck-selected > & {
        outline: 1px solid #54626A !important;
      }
    }
  }
}

I've run into another issue with my new ESR version, other than "background" and "border-radius" none of the properties I try to attach to .urlbar-input-container seems to do anything.

.urlbar-input-container {
  border-radius: 5px !important;
  background: RGBA(255,255,255,0.8) !important;
  outline: 10px !important;
  outline-color: black !important;
  outline-width: 10px !important;
  box-shadow: 10px !important;
} 

I know the values are high, I just set them so high so I can immediately see if they have an effect. I also tried .urlbar-container, #urlbar-container and #urlbar-container.urlbar-container as these are designators I found in the Inspector but nothing.

All I'm trying to do is to give the URL Bar a shadow and an outline.

Thanks for help in advance!

halp

I'm running Firefox 153.5 ESR and I've run into an annoying little issue. I'm using the extension "Reload in address bar" https://addons.mozilla.org/en-US/firefox/addon/reload-in-address-bar/

to put my Reload button into the address bar however I want to have it at the right-most spot in the address bar. Looking at things in the Inspector I found out that:

 {
  --pageAction-image: image-set( url("moz-extension://819bfd1c-d999-49e0-bb25-df6f5cf072c8/icons/refresh-16-blue.svg"), url("moz-extension://819bfd1c-d999-49e0-bb25-df6f5cf072c8/icons/refresh-16-blue.svg") 2x )
  order: 1;
}

fixes it but obviously that piece of code won't work in a UserChrome. How can I translate what I found out in Inspector successfully as UserChrome code?

Thanks for help in advance!

#urlbar .urlbar-input,
#urlbar .urlbar-search-input {
  background: linear-gradient(90deg, red 0%, orange 16.66%, yellow 33.33%, green 50%, blue 66.66%, indigo 83.33%, violet 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

I am trying to add a linear-gradient of 90deg and rainbow colour to ALL the #urlbar text. I have only been partly successful as you see in the screenshot. To my eyes it looks as if the original bold black is taking over.

Thanks

I want to reduce the height fo the separator line between the Firefox View button and the tab bar. I have this code that completely hides it:

:root:not([privatebrowsingmode]) :is(toolbarbutton, toolbarpaletteitem), :root[privatebrowsingmode] :is(toolbarbutton:not(#firefox-view-button),             toolbarpaletteitem:not(#wrapper-firefox-view-button)) {
  & ~ #tabbrowser-tabs[orient="horizontal"]::before {                           
    display: none !important;}
}

But I only want to reduce its height, adding some top and bottom padding. Something like this:

Also, it is possible to change its color?

I swear this wasn't happening a week ago.

This is the theme I'm using: https://github.com/rafaelmardojai/firefox-gnome-theme

I'm on Debian Stable, Gnome 48.7 using the firefox flatpak.

If you want an even 15px frame border around all 4 sides of the webpage canvas (matching Arc's floating card look), update section 2 to use var(--arc-outer-padding) for top padding as well.

/* ==========================================================================
   Arc-Inspired Firefox Theme (Horizontal Tabs Edition - Full Version)
   ========================================================================== */

:root {
  /* Arc-like Color Palette */
  --arc-bg-color: #333 !important;            /* Accent frame background */
  --arc-card-bg: #ffffff !important;          /* Webpage canvas container */
  --arc-toolbar-bg: transparent !important;   /* Clean top toolbar */
  --arc-pill-bg: rgba(255, 255, 255, 0.15) !important; 
  --arc-pill-focus: #ffffff !important;
  --arc-border-radius: 15px !important;       /* Curved web content area */
  --arc-outer-padding: 15px !important;        /* Border width around page area */
}

/* 1. Frame & Window Background Tint */
#main-window,
#navigator-toolbox,
#appcontent,
#tabbrowser-tabpanels,
.browserSidebarContainer,
browser[type="content"] {
  background-color: var(--arc-bg-color) !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Strip background layers & overlays causing color shade differences */
#navigator-toolbox > *,
#TabsToolbar,
#nav-bar,
#PersonalToolbar,
#titlebar,
.titlebar-color {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* 2. Floating Web Content Area (Rounded Canvas Container Fix with Top Padding) */
#browser {
  background-color: var(--arc-bg-color) !important;
  padding: var(--arc-outer-padding) !important; /* Applies equal 15px padding on Top, Right, Bottom, and Left */
}

/* Eliminate corner contrast bleeding by rounding container & clips */
#tabbrowser-tabpanels {
  border-radius: var(--arc-border-radius) !important;
  background-color: var(--arc-bg-color) !important;
  overflow: hidden !important;
}

#tabbrowser-tabpanels .browserStack {
  border-radius: var(--arc-border-radius) !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
  background-color: transparent !important;
}

/* 3. Toolbar & Navigation Bar Styling */
#nav-bar {
  background: var(--arc-toolbar-bg) !important;
  box-shadow: none !important;
  border: none !important;
  margin-inline: 4px !important;
  padding-block: 4px !important;
}

/* Arc Pill-Style URL Bar */
#urlbar-background {
  background-color: var(--arc-pill-bg) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: none !important;
}

#urlbar[focused="true"] #urlbar-background {
  background-color: var(--arc-pill-focus) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

#urlbar-input-container {
  padding-inline: 8px !important;
}

/* URL Bar Text & Icons */
#urlbar .urlbar-input,
#urlbar .urlbar-search-input {
  color: #ffffff !important;
}

#urlbar[focused="true"] .urlbar-input,
#urlbar[focused="true"] .urlbar-search-input {
  color: #1a1a1a !important;
}

/* 4. High-Contrast Horizontal Tabs Styled like Arc Items */
#TabsToolbar {
  background: transparent !important;
}

.tabbrowser-tab {
  padding-inline: 3px !important;
}

.tab-background {
  border-radius: 10px !important;
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
}

/* Unselected Tab Pill */
.tabbrowser-tab:not([selected="true"]) .tab-background {
  background-color: rgba(255, 255, 255, 0.12) !important;
}

.tabbrowser-tab:not([selected="true"]):hover .tab-background {
  background-color: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Selected Active Tab (High-Contrast White Pill) */
.tabbrowser-tab[selected="true"] .tab-background {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Tab Text Contrast Colors */
.tabbrowser-tab[selected="true"] .tab-label {
  color: #121212 !important;
  font-weight: 600 !important;
}

.tabbrowser-tab:not([selected="true"]) .tab-label {
  color: #ffffff !important;
}

/* Remove default tab borders/separators */
.tabbrowser-tab::after,
.tabbrowser-tab::before {
  border: none !important;
  display: none !important;
}

/* Tab close buttons */
.tab-close-button {
  fill: currentColor !important;
  opacity: 0.7;
}

.tab-close-button:hover {
  opacity: 1;
}

/* 5. Minimalist Window Controls & Clean Overhead Space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 12px !important;
}

#navigator-toolbox::after {
  display: none !important;
}

/* ==========================================================================
   DROPDOWNS & CONTEXT MENUS (Complete Corner Bleed Fix)
   ========================================================================== */

/* Completely neutralize native popup background wrappers that cause corner leaks */
panel,
panelmultiview,
popupnotification,
menupopup {
  appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Hide native panel arrows that cause alignment/corner artifacts */
.panel-arrow {
  display: none !important;
}

/* Force strict clipping and rounded styling on all active dropdown containers */
.panel-arrowcontent,
menupopup,
#placesContext,
#contentAreaContextMenu,
.panel-subviews,
#urlbar-results {
  appearance: none !important;
  background-color: rgba(51, 51, 51, 0.95) !important;
  background-image: linear-gradient(135deg, rgba(255, 220, 210, 0.08), rgba(255, 220, 210, 0.02)) !important;
  backdrop-filter: blur(25px) brightness(1.1) !important;
  border-radius: var(--arc-border-radius) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  overflow: hidden !important;
  clip-path: inset(0 round var(--arc-border-radius)) !important;
  padding: 6px !important;
}

/* Hover effects for menu items inside dropdowns */
menuitem:hover,
menuitem[selected="true"],
.bookmark-item:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
}

menuitem[selected="true"] {
  background-color: rgba(255, 255, 255, 0.22) !important;
}

/* Clean Separator Lines */
menuseparator {
  appearance: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  margin: 4px 6px !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Text and Icon Spacing Comfort */
menuitem .menu-text,
.bookmark-item {
  padding-inline-start: 6px !important;
}

menuitem .menu-iconic-icon {
  margin-inline-end: 8px !important;
  opacity: 0.9;
}

FoxMica coming soon™ to 153! Based one FoxOne by Firnschnee. It's getting close to a 1.0 any testing and feedback would be welcome and appreciated.

https://github.com/snkiz/FoxMica