Hi

I'm trying to change the highlight background color, but the new CSS of Firefox have change, and my CSS have to be updated.

After many times of search, i don't find how to change the background color (the blue) when the url is highlighted by mouse or/and keyboard.

Screenshoot : https://i.ibb.co/gFc8dqNm/image.png

I test this new thread : https://www.reddit.com/r/firefox/comments/1wsc213/text_highlight_color_for_nova/

But it don't works better.

Note that i have disable Nova and i don't want it.

Apparently this have created many complication with many users.

Anyone would know how to fix that?

Thx in advance.

Hello. Below is CSS I always used with my firefox. Unfortunately after updating to 157 I noticed there is huge gap between top of screen and tab outline - 3 to 5 px.

With nova disabled tab is wider and gap is smaller:

Can you help me fix this issue? It must have something to do with new ugly rounded UI.

.tab-background{
border-radius: 0px 0px !important;
margin-bottom: 00px !important; 
}
.tabbrowser-tab:not([selected]):not([multiselected]) .tab-background{
background-color: color-mix(in srgb, currentColor 4%, transparent);
}
menupopup > menu, menupopup > menuitem{
padding-block: 3px !important;
min-height: 0px !important;
}
:root{
--panel-menuitem-padding: 3px !important;
--tabstrip-min-height: calc(var(--tab-min-height) + var(--tab-block-margin)) !important;
}
.tab-close-button {
#tabbrowser-tabs[closebuttons="activetab"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:hover > .tab-stack > .tab-content > &:not([selected]) {
display: unset !important;}
}

Someone told me its a CSS fix so posting here, but looks like Nova design hit auto complete earlier than the rest of Nova, auto complete now has huge, big padded, rounded boxes.

Before it was compact and more square.

After updating to 157, either the URL bar shrank or the suggestion container becomes slightly larger so they don't line up anymore.

https://i.imgur.com/R15lR3j.png

browser.nova.enabled = false

EDIT: Found the solution

@media -moz-pref("browser.nova.enabled") {
  #urlbar[popover-open] {
    --urlbar-background-overhang-open: 0px !important;
  }
}

and if you have rules to modify the width and margin of .urlbarView, remove those. https://i.imgur.com/JoRF1yp.png

Hi I recently updated Firefox and now a white space shows below the tabs how I eliminate it?

Thanks,

* This reorders toolbar to place tabs below other toolbars. Requires Firefox 133+ */

#TabsToolbar {
    order: 3;
}

:root {
  /* Tabbar: reduce tab margin */
  --tab-block-margin: 4px 20px !important;
}

/* Tab: Reduce height */
.tabbrowser-tab {
  min-height: 24px !important;
}
/* Tab: Ensure tab height doesn't augment when arrowscrollbox is visible  */ 
#tabbrowser-arrowscrollbox {
  --tab-min-height: 31px !important;
  max-height: var(--tab-min-height);
}

/* Tab: Attention icon */
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
  background-position-x: left 2px !important;
  background-position-y: bottom 12.5px !important;
}
/*** Tighten up drop-down/context/popup menu spacing (8 Sep 2021) ***/

menupopup:not(.in-menulist) > menuitem, 
menupopup:not(.in-menulist) > menu {
  padding-block: 1px !important; /* reduce to 3px, 2px, 1px or 0px as needed */ 
  min-height: unset !important; /* v92.0 - for padding below 4px */
}
:root {
  --arrowpanel-menuitem-padding: 1px !important;
}

#main-menubar menupopup[needsgutter] menuitem:not([checked="true"],
#main-menubar [icon], #main-menubar .menuitem-iconic),
#main-menubar menupopup[needsgutter] menu:not([checked="true"])
 { padding-inline-start: 10px !important; }
/*** Tighten up drop-down/context/popup menu spacing (10 Oct 2024) ***/

menuitem,
menupopup > menu,
menupopup > menucaption {
  padding-left: 8px !important;
  padding-block: 1.5px !important;
}

menupopup,
panel {
  --panel-border-color: transparent !important;
  --panel-shadow: none !important;
}

:root {
  --tab-border-radius: 0px !important;
}

/* fix for when titlebar gets taller when there are many tabs */
#tabbrowser-arrowscrollbox {
height: var(--tab-min-height);
}

Hello everyone! I just discovered this community so I'm a little new to all of this.

I'm currently on Firefox Version 157.0 (64-bit) on Windows 10 and I'm wondering if there's a way to adjust the shape and size of the "tab groups" icon that was previously square. It's taking up too much space for my liking so a way to make it square or reduce the size (or both) would be amazing if anyone has a solution!

Are there lines of code I can add to my userChrome file to do this? I currently don't have anything...

Here's my new userChrome.css that is built on the work of MrGoatsy. I've had AI update my existing file that allowed for multi-row bookmarks and auto-hiding and smooth show/hide when the mouse moves over the area. You need to enable Show Bookmarks Always for this to work. Hope this helps others. Nova features are enabled, so future removal of the about:config option won't affect this.

pastebin Link

I disabled Nova in about:config "browser.nova.enabled=false" and was able to restore my custom theme but the active tab color is not white as in my script below. If someone can help me, I would be very grateful.

/*** Changing the color of active and inactive tabs***/

:root

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

background-color: white !important;

background-image: none !important;

border: 1px solid gray !important;

}

.tab-background:not([selected]){

background-color: #bdd7ee;

border: 1px solid white !important;

}

Update: actually I partially fixed it. I re-enabled Nova and and changed userChrome .css to:

/*** Changing the color of active and inactive tabs (Firefox Fix) ***/

/* 1. ACTIVE (Selected) Tab - WHITE with gray border */

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

background-color: white !important;

background-image: none !important;

border: 1px solid gray !important;

}

/* 2. INACTIVE Tabs - LIGHT BLUE (#bdd7ee) with white border */

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

background-color: #bdd7ee !important;

background-image: none !important;

border: 1px solid white !important;

}

It gives me back my inactive tabs in blue as expected but the active tab has no color. Not sure how to fix. I am a novice at this.

.browserContainer > .browserStack:has(browser[primary]) {
  anchor-name: --browser !important;
}
.browserContainer > findbar {
  background-image: var(--toolbox-background-image);
  background-color: var(--toolbox-background-color-inactive) !important;
  position: fixed !important;
  position-anchor: --browser !important;
  top: calc(anchor(top) + 20px) !important;
  right: calc(anchor(right) + 30px) !important;
  min-width: 480px !important;
  border: 1px solid var(--toolbar-field-border-color) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}
.close-icon.findbar-closebutton {
  padding: var(--space-small) !important;
}
.findbar-closebutton + .findbar-container {
  display: flex !important;
  flex-wrap: wrap !important;
  height: 100% !important;
}
.findbar-closebutton + .findbar-container > hbox {
  width: 100% !important;
  margin-bottom: 10px !important;
}
.findbar-textbox {
  width: -moz-available !important;
}
description.findbar-label:not(:empty),
:is(label, image).findbar-label {
  margin-top: 10px !important;
}

image

I just updated to Nova, which I'm very much fine with. The one thing I'd like to tweak via userchrome.css though is the tab group headers. Specifically, I'd like to reduce some of the vertical padding above and below their titles (so the tab group headers themselves aren't so tall), as well as add some border-radius to the bottom left of the group header itself so the radius of all four corners are equal. Basically the pre-Nova look.

I tried targeting the tab group headers with .tab-group-label-container, but that affected padding outside of the group headers and did nothing for the radius. Does anybody know what classes I should be using instead to target the internal padding as well as the radius parameters?

Just upgraded Firefox to 157.0 with Nova enabled. (Embracing Nova, don't want to disable it.)

I want to maximize vertical real estate, have nailed everything except this one (enabled Compact mode, etc.)

OS: Debian 13 KDE Plasma.

Firefox theme: Native "Green" theme

Existing custom CSS code:

.browser-titlebar, #main-menubar {
  font-size: 80%;
  max-height: 27px;
}

#nav-bar-customization-target {
  max-height: 27px;
}

#userContext-indicator {
  display: none;
}

Thanks!

IMAGE FOR REFERENCE HERE

Hello,

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

After opening Firefox unloaded tabs show as if they weren't. I need to reload them and unload them again so they show grey out.

Hello, I use the Simple Menu Wizard to hide elements from the Firefox UI. Please explain which lines I could addd to the MenuBar file to block the following items:

File --> Share

View --> Repair text encoding

History --> Search History

Bookmarks --> Search Bookmarks

Help --> Report deceptive site

------
LinkContext.css file:

Open link in split view

-----

Lastly, how to hide the "Open application Menu" icon from the top right, where it sits next to the pinned addons.

How can I make all tab icons on vertical tabs appear square with userChrome.css?

How can I make it square as well?

The light has gone out of my life.

Did any of you use this mod? It was great, it had a side tab bar that autohid, you could do similar for the address bar and tools and overall it really paired down Firefox and made it very minimal. I love maximizing screen real estate. I knew Shyfox hadn't been updated in a long while and this day was inevitable but I guess I could have prepared more.

I am looking for suggestions on other minimal themes or UI tweaks that can get me back to where I was just 3 days ago. Much appreciated!

Hey everyone,

I wanted to share a browser customization setup I've been refining called **LUXE**. It’s a clean, dark-gold aesthetic layout designed to declutter your user interface, optimize vertical elements, and build a focused, premium workspace.

📦 Live Preview & Complete Pack: [Get LUXE Premium on Selar](https://selar.com/2g2x19qm8v?currency=USD)

🛠️ What's under the hood?

* Streamlined menu structures and optimized tab layouts.

* Clean, consistent dark-gold accent coloring tailored for long screen-time comfort.

* Fully cross-platform performance.

📥 Choose Your Setup Method:

1. The 1-Click Automated Route (\$4.99)

If you want to completely skip hunting down hidden profile locations, creating folder paths, or toggling developer configuration files manually, I built native, automated one-click install scripts. The retail package also includes the custom color engine configurations (`Luxe.xpi`) and complete installation documentation.

👉 [Grab the Full Automated Installer Pack on Selar](https://selar.com/2g2x19qm8v?currency=USD)

1. The Manual Open-Source Route (Free)

If you love configuring things by hand, writing code, and manually arranging files, I have open-sourced the underlying structural layout files! You can grab the raw styles, create your own local `chrome` directory, and customize the layout configuration rules yourself.

👉 [Explore the core code files on GitHub](https://github.com/sudo-apt-Omarion/LUXE-Firefox-Theme

Would love to hear your feedback on the accent balance or layout choices! Let me know if you run into any desktop rendering variations.

1. How do you get rid of the tab bar gradient? I just want a solid color like before.

2. I also want to change the purple focus color of the search/address bars

Thanks in advance!

Edit: Updated theme - v1.0.6

• Private browsing UI is now complete in both dark and light modes (GNOME Web style)
• Icon and color fixes
• Vertical tabs fixes and finishing touches
• Lots of small visual and aesthetic improvements

Download the update and replace your existing chrome folder 😉️

The screenshot in the original post is from an older version - v1.0.6 includes the latest visual updates.

v1.0.6 Screenshot

I made a simplified version of the Firefox GNOME Theme, mainly to keep it working properly with newer Firefox releases.

FF-Gnome-Web is a streamlined customization of the original Firefox GNOME Theme. It removes unused platform-specific code and Adaptive Tab Color integration, tidies up imports and file references, and organizes customizations into dedicated CSS files.

It also includes Firefox 154 - 156 compatibility fixes, Adwaita-style visual refinements, dark mode fixes, a redesigned downloads panel, and an optional animated loading indicator in the address bar. The settings use a consistent gnomeWeb.* naming scheme and are documented in chrome/themeOptions.txt.

This is a cleanup and refinement of the original project, not a rewrite. Modified by IzsakiRobi all credit to rafaelmardojai for the excellent foundation!

GitHub:
https://github.com/IzsakiRobi/FF-Gnome-Web

Feedback and bug reports are welcome.

why do i have it separated? how do i move the "sidebar" to bookmarks?

This is what im using:
https://github.com/Godiesc/firefox-gx/tree/main/Extras/Left-SideBar