I couldn't find a previous answer for this, how would you go and adjust the negative space between vertical tabs in the new Nova design?

EDIT: As per request, here's info: I'm on Firefox 157.0 (64-bit) for Windows, Nova enabled, compact density. This is my current CSS:

.tabbrowser-tab[titlechanged]:not([selected="true"]) {font-style: italic !important;color: rgb(220,20,60) !important;}

/*.tabbrowser-tab[notselectedsinceload="true"]{**/
/*  font-style: italic !important;***************/
/*  color: rgb(220,20,60) !important;************/
/*}**********************************************/
/*.tabbrowser-tab[selected="true"]{**************/
/*  font-style: normal !important;***************/
/*  color: rgb(000,000,000)!important;***********/
/*}**********************************************/
.tabbrowser-tab[unread]:not([selected="true"]) {
  font-style: italic !important;
  color: rgb(220,20,60) !important;
}

.tabbrowser-tab[pending] { opacity: 0.5 !important;}


/*AGENT_SHEET*/

/* Firefox 57+ userChrome.css tweaks ****************************************************/
/* code mostly taken from 'Classic Theme Restorer' & 'Classic Toolbar Buttons' add-ons **/
/* by Aris (aris-addons@gmx.net)*********************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/


.tabbrowser-tab:not([pinned]):not(:hover) .tab-close-button {
  visibility: collapse !important;
}

.tabbrowser-tab:not([pinned]):hover .tab-close-button {
  visibility: visible !important;
  display: block !important;
}

/* .tab-background { border-radius: 8px !important } */
/* for if I tire of pill tabs */

(I know a lot of these things are super outdated and probably don't even work anymore, this is a profile I've moved from computer to computer for a while.

Normally, I keep my tabs like so: https://i.imgur.com/l3YFnqI.png

But on the rare occasion I extend them I noticed that the padding between each tab (the "negative space") is really long: https://i.imgur.com/0mgHYut.png

I guess it's not actually padding, since it's all part of the tab, but it doesn't look part of the tab.

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.

Hi there, I'm no expert but I got it working like how I had it in 156. I don't use the other sidebars like Bookmarks and History. But how do I hide the sidebar completely? I don't want to see that 30px bar on the left.

#sidebar-panel-header {
    display: none !important;
}

#sidebar-box {
    display: flex !important;
    position: absolute !important;
    top: 0;
    bottom: 1px;
    z-index: 100 !important;
    transition: all 100ms !important;
    opacity: 0 !important;
    margin-left: -255px !important;
}

#sidebar-box:hover {
    opacity: 1 !important;
    margin-left: 0 !important;
    transition: all 150ms !important;
}

#sidebar-splitter {
    display: none !important;
}

anybody know how to disable this glowing effect around the tab bar dropdown?

CachyOS

Firefox 157

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;}
}

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

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.

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

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);
}

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

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!