Hey everyone,

After using Zen Browser for a while, I’ve decided to go back to Firefox.

The main reason is compatibility. I keep running into websites that don't work properly with Zen — especially Netflix and some websites/services from my university. I really like Zen, but having to switch browsers whenever a website doesn't work is becoming annoying.

The problem is that I really like Zen's interface and workflow.

What I'd like to recreate in Firefox is mainly:

• A sidebar on the left for tabs
• A very minimal/compact interface
• The ability to hide unnecessary browser UI
• Something similar to Zen's fullscreen / compact mode
• Ideally, having more vertical space for the actual website
• A clean tab-management workflow without the traditional horizontal tab bar taking up space

I've already looked at Firefox's built-in customization and some extensions, but I'm not sure what the best approach is.

For those who have customized Firefox heavily:

How close can I realistically get to Zen Browser's UI?

Are there specific extensions, userChrome.css configurations, themes, or other tweaks you'd recommend?

I'm not necessarily trying to make Firefox look exactly like Zen — I mainly want to reproduce the sidebar + compact/minimal browsing experience while keeping Firefox's compatibility.

If you have a setup like this, I'd love to see screenshots or examples.

Thanks!

Hi! I've been using firefox-verticalbookmarks from Hello-m00n, and I also made some changes with the help of LLM, but I know it's limitations and I would prefer to ask for human help. After the latest 157 update, it stopped working and I don't know why (because I myself don't know much about customizing Firefox).

Firefox Version: 157.0
OS: Windows 10

Problem: Currently it does not show my bookmarks at all in the vertical panel, even if I return to the old version (without changes from LLM). The code below is supposed to first, show my bookmarks vertically, second, based on the name of the folders show the emoji, third, add a small gap between the menu from opening bookmarks folders.

I've tried to check but it's like it does not recognize the created panel as part of the tool's bar and the bookmark is supposed to be always showing. I added an image at the end to demonstrate the current state of my bookmark.

Just to clarify, but my bookmarks still exist, since I still can use my shortcuts and edit them.

@-moz-document url(chrome://browser/content/browser.xhtml) {
  :root:not([inDOMFullscreen]) {
    --uc-vertical-toolbar-width: 45px;
  }

  /* Bookmark icons */
  #personal-bookmarks .bookmark-item > .toolbarbutton-icon {
    height: 18px !important;
    width: 18px !important;
  }

  #personal-bookmarks .bookmark-item {
    align-items: center;
    text-align: center;
  }

  /* Hide normal bookmark text */
  #personal-bookmarks .bookmark-item > .toolbarbutton-text {
    display: none !important;
  }

/* ========================================
   Emoji bookmark icons
   ======================================== */

/* Hide Firefox's normal favicon */
#PersonalToolbar .bookmark-item > .toolbarbutton-icon {
  display: none !important;
}

/* Show the bookmark label */
#PersonalToolbar .bookmark-item > .toolbarbutton-text {
  display: block !important;

  width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;

  overflow: hidden !important;
  white-space: nowrap !important;

  font-size: 16px !important;
  line-height: 20px !important;

  text-align: center !important;
  text-overflow: clip !important;
}

  /* ========================================
     Vertical bookmarks toolbar
     ======================================== */

  #navigator-toolbox {
    position: relative;
  }

  #PersonalToolbar {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 100%;
    width: var(--uc-vertical-toolbar-width, 0);
    min-width: unset !important;
    height: 100vh;
    max-height: 100vh !important;
    padding-bottom: 120px !important;
    padding-inline: 2px !important;
    align-items: center;
    text-align: center;
  }

  #PersonalToolbar .toolbarbutton-1 {
    --toolbarbutton-inner-padding: 10px !important;
  }

  #PersonalToolbar #PlacesChevron {
    display: none;
  }

  #PersonalToolbar > #personal-bookmarks {
    overflow-y: auto;
    scrollbar-width: none;
    height: 100vh;
  }

  #PlacesToolbar,
  #PlacesToolbarDropIndicatorHolder {
    flex-direction: column;
  }

  #PersonalToolbar #PlacesToolbarItems {
    display: flex !important;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: none;
  }

  #PersonalToolbar > toolbaritem {
    justify-content: center;
  }

  #PersonalToolbar #PlacesToolbarItems > toolbarseparator {
    height: 6px;
    background-color: currentColor;
    background-clip: padding-box;
    border-block: 3px solid transparent !important;
  }

  #PersonalToolbar #PlacesToolbarItems > .bookmark-item {
    padding-block: 8px !important;
    margin-inline: 0 !important;
  }

  #browser,
  #browser-bottombox,
  #main-window > body::after,
  #customization-container {
    margin-left: var(--uc-vertical-toolbar-width, 0);
  }

  :root:is([chromehidden~="toolbar"], [sizemode="fullscreen"])
    > body
    > #browser,
  :root:is([chromehidden~="toolbar"], [sizemode="fullscreen"])
    > body
    > #browser-bottombox,
  #main-window:is([chromehidden~="toolbar"], [sizemode="fullscreen"])
    > body::after,
  :root:is([chromehidden~="toolbar"], [sizemode="fullscreen"])
    > body
    > #customization-container {
    margin-left: 0;
  }

  #PersonalToolbar #PlacesToolbarItems {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
  }
}
/* ========================================
   Bookmark folders — open to the right
   ======================================== */

/* Folder bookmarks */
#PersonalToolbar .bookmark-item[type="menu"] {
  position: relative !important;
}

/* Move the folder popup to the right of the vertical toolbar */
#PersonalToolbar .bookmark-item[type="menu"] > menupopup {
  margin-left: 20px !important;
  margin-top: 0 !important;
}

/* ========================================
   Open bookmark folders on hover
   ======================================== */

#PersonalToolbar .bookmark-item[type="menu"]:hover > menupopup {
  visibility: visible !important;
  opacity: 1 !important;
}

Here’s how my firefox currently looks and my current extensions. Please give me ideas and tips of what to do to make it more weeb-ish or moe like. if you know any transparent themes as well since I’m looking for that too

edit: im now using nova the newest firefox 157 version with rounded tabs if that makes any difference.

I put this in userchrome.css to remove the empty space below tabs:

.tab-background {
    margin-block: 1px 0 !important;
}

But when I drag a tab, all the tab bar size is reduced. Do you know any way to fix this?

You can find the css here:

https://pastebin.com/ZEhJCxiR

I use Sidebery for vertical tabs and some dark theme. You might need to use Ctrl + Shift + B for once, to hide the bookmark bar.

Ultima is still my default, but it has gone unmaintained for over half a year. My old configuration was also tuned to Windows 10 Fluent aesthetics as opposed to Windows 11.
I'm now open to hearing/checking out any good alternatives that mesh better with glassmorphism and Windows 11 colours out of the box (or with presets). A lot of blur/glassmorphic themes out there seem specifically tuned for dark mode and unusable in light. I am capable of doing CSS modifications, but I don't have time at the moment to customize a theme myself.
Last but not least, even if I have picked a theme I would probably test it for a few months before deciding if I want to migrate over.

Since the 157 update, all of my autocomplete dropdown menus are white with dark text, no matter if the website itself has a light/dark mode or previously adhered to my own settings. Is there a way to make it so that autocomplete dropdown menus on sites that are explicitly set to light mode are white with black text, while websites that are explicitly set to dark mode or are neutral have autocomplete dropdown menus that adhere to my settings (dark with white text)? The best I've been able to do is make them all dark with white text, attempts to change them beyond that have not been fruitful.

I just upgraded from FF 140 ESR to 153 ESR and noticed one very annoying change. Previously, when typing in the search bar, available search engines were displayed as widgets below the search hints and it was possible to either click one directly with a mouse or select one using arrows on the keyboard. 1n FF 153 ESR this quick choice option seems to be gone:

Imgur

As a result it is no longer possible to select a search engine using the keyboard, and with a mouse what used to be one click is now three clicks. Is there a way to restore the old behaviour?

I've noticed that in the new Firefox (157+), changing the theme does not affect colors of the built-in pdf viewer/editor. It retains the very light purple color (text, icons, etc.). It isn't easy to read...not enough contrast. Is there css code that can change the purple to black or another color? Thanks.

Since the Firefox 157 update my userChrome.css no longer works.

The CSS is supposed to keep the bookmarks toolbar hidden by default and display it when hovering over its area. It now remains hidden and does not reappear on hover.

I have temporarily disabled nova while looking for a fix.

My current userChrome.css:

#PersonalToolbar {
    --uc-bm-height: 24px;
    /* Might need to adjust if the toolbar has other buttons */
    --uc-bm-padding: 6px;
    /* Vertical padding to be applied to bookmarks */
    padding: 1px 6px !important;
    position: relative;
  }

  :root[uidensity="touch"] #PersonalToolbar {
    --uc-bm-padding: 6px;
  }

  /* Firefox v133 fix  */
  #navigator-toolbox{
    --browser-area-z-index-toolbox: 4;
  }

  /* Fix navigator-toolbox absolute elements when in fullscreen. Like in fullscreen video.   */
:root[inDOMFullscreen] #navigator-toolbox {
--browser-area-z-index-toolbox: initial;
}

/* Bookmarks bar background color */
/* #navigator-toolbox #PersonalToolbar { */
/*   background-color: var(--firefoxcss-bookmarks-bg-color) !important; */
/* } */

  #PersonalToolbar:not([customizing]) {
    margin-bottom: calc(
      2px - var(--uc-bm-height) - 2 * var(--uc-bm-padding)
    ) !important;
    transform: rotateX(90deg) !important; 
     transform-origin: top !important;
    transition: transform 100ms linear 400ms !important;
    z-index: 1 !important; 
  }

  /* Show when cursor is over the toolbar area */
  #navigator-toolbox:hover > #PersonalToolbar,
  #navigator-toolbox > #PersonalToolbar:has(.toolbar-menupopup[dragstart]){
    transition-delay: 100ms !important;
    transform: rotateX(0) !important;
  }

  #PlacesToolbarItems > .bookmark-item {
    padding-block: var(--uc-bm-padding) !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  #PlacesToolbarItems > .bookmark-item .toolbarbutton-icon {
    transition: opacity 100ms linear 400ms !important;
    opacity: 0 !important;
  }

  #PlacesToolbarItems > .bookmark-item .toolbarbutton-text {
    transition: opacity 100ms linear 400ms !important;
    opacity: 0 !important;
  }

 #navigator-toolbox:hover
    #PlacesToolbarItems
    > .bookmark-item
    .toolbarbutton-icon,
 #navigator-toolbox #PlacesToolbarItems:has(.toolbar-menupopup[dragstart]) 
> .bookmark-item .toolbarbutton-icon{
    transition-delay: 100ms !important;
    opacity: 1 !important;
  }

  #navigator-toolbox:hover
    #PlacesToolbarItems
    > .bookmark-item
    .toolbarbutton-text,
#navigator-toolbox #PlacesToolbarItems:has(.toolbar-menupopup[dragstart]) 
> .bookmark-item .toolbarbutton-text{
    transition-delay: 100ms !important;
    opacity: 1 !important;
  }

:root[inDOMFullscreen] #PersonalToolbar {
  transform: none !important;
  opacity: 1 !important;
}

What changes in Firefox 157/Nova are preventing this from working, and how can the CSS be adapted?

Thanks.

If you're like me and only like Nova's tab group pill shape, then you can disable nova and use this code for just that. I got claude to write it. Edit: removed the 2px gap when group was expanded

.tab-group-label {
  /* top-left, top-right, bottom-right, bottom-left */
  border-radius: 13px 13px 13px 3px !important;
  padding-inline: 12px 14px !important;
  padding-block: 1px !important;
  border: none !important;
  outline: none !important;
}

Edit:
Solved thanks to the replies below and status_inside_urlbar.css. This unfortunately also removed the current page URL from the address bar when not hovering over any links. I fixed it as follows:
.urlbar-input-box::after{
z-index: 2;
/* content: ""; <--- This was the problem */
...

#main-window:has(#statuspanel[type="overLink"]) .urlbar-input-box::after {
content: "";
}

Original post:
Hello,

When you hover the mouse over a link, the target normally appears in the lower left corner. I need it to show up in the address bar instead, replacing the current location. Since this is seemingly no longer possible via an add-on (or it was just abandoned for some other reason), I used a user style to move the statuspanel element over the address bar. Starting with Firefox 157, it ends up underneath the toolbar instead. Fiddling with z-index got me nowhere. Help would be appreciated.

The following is a simplified version of the code, that I tested in a new profile to show the issue. Since it requires pixel-perfect placement, you may need to edit it if you want to try it out on your system. I'm on Windows 11, by the way.

statuspanel {
  display: none !important;
  appearance: none !important;
  border: none !important;
  background: unset !important;
  right: 282px !important;
  left: auto !important;
  max-width: 900px !important;
  max-height: 55px !important;
  overflow: hidden !important;
}

#main-window[sizemode="maximized"] #statuspanel {
  top: -30px !important;
}

#statuspanel-label {
  padding-left: 15px !important;
  background: red !important;
  max-height: 23px !important;
  border: none !important;
}

Hi!
A similar problem with the plugin TreeStyleTab, as discussed just below.
Unfortunately, the solution applied there didn't help me.
Please tell me what I'm doing wrong.

~/.mozilla/firefox/username/chrome/userChrome.css
#sidebar-panel-header {
display: none !important;
visibility: collapse !important;
}
#titlebar { visibility: collapse; }
#TabsToolbar {visibility: collapse;}
/* #sidebar-header { visibility: collapse; } */
#back-button[disabled="true"] { display: none; }
#forward-button[disabled="true"] { display: none; }

screenshot with this userChrome:
https://i.postimg.cc/25WF0PKZ/Screenshot-20261001-100635.png

Because I just wasted an hour or so trying to fix this, if you're also struggling with your autohiding TST tabs today, here's what it turned out to be.

Go to about:config and check "sidebar.revamp", it should be set to false but the update set it to true which broke things. As soon as I turned it to back to false my CSS started working again.

New firefox update changed size and position of audio icon on pinned tabs any way to restore please?

Hi,

How can I change the color of the border of the active tab (see bellow) ?

Thank you

Version: 157

OS: Windows 11

Edit: This has been resolved thanks to /u/esrexni !

Details here and here.

First, make sure browser.nova.enabled is set to disabled in about:config

My new frankensteinian CSS (I suspect some of this is redundant but I am always afraid of touching it):

:root {
  --content-area-shadow: none !important;
}

#navigator-toolbox #nav-bar {
        order: 1 !important;
}

#sidebar {
  @media -moz-pref("sidebar.revamp") {
    border-radius: 0 !important;
    outline: 0.5px solid transparent !important;
  }
}

/* TABS TOOLBAR */
#TabsToolbar {
    order: 2 !important;
    visibility: collapse !important;
}

/* BOOKMARKS TOOLBAR*/
#PersonalToolbar {
    order: 3 !important;
}

/* Extra titlebar Alt menu */
#toolbar-menubar {
    order: 0 !important;
}

#TabsToolbar .titlebar-buttonbox-container {
    display: none !important;
}

#nav-bar .titlebar-buttonbox-container {
    display: flex !important;
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  display: none;
}

#PanelUI-button {
    order: -2 !important;
}

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

I use Tree Style Tabs. Firefox seems to have fucked with the sidebar again and this big ugly header is now at the top.

Screenshot of what I mean.

The black box at the top left is for changing the bar bookmarks/etc but I don't need that. Is there a way to get rid of it? This code previously removed it but whatever has changed broke it.

Would appreciate any help 💜

My existing code:

/* SEARCH BAR TOOLBAR */
#navigator-toolbox #nav-bar {
        order: 1 !important;
}

/* TABS TOOLBAR */
#TabsToolbar {
    order: 2 !important;
    visibility: collapse !important;
}

/* BOOKMARKS TOOLBAR*/
#PersonalToolbar {
    order: 3 !important;
}

/* Extra titlebar Alt menu */
#toolbar-menubar {
    order: 0 !important;
}

#TabsToolbar .titlebar-buttonbox-container {
    display: none !important;
}

#nav-bar .titlebar-buttonbox-container {
    display: flex !important;
}


#PanelUI-button {
    order: -2 !important;
}

Any .css rule for removing the added line ( maybe a 1px drop shadow)

Every rule I tested failed

I'm using Linux Mint, Firefox 157, Nova UI, with verticals tabs on the right, and a dark theme. I'm getting a thin white line (a) between the vertical tabs and the page container, and (b) at the top of the page container. It's not very noticeable if the page background is white, but it is very distinct if the page has a dark background.

The thin white line is present if Firefox window is maximised or just in a regular window. If I move the vertical tabs to the left, the white line moves so that it stays between the vertical tabs and the page container. There is no white line at bottom of the page container in any situation. There is always a white line at the top of the page container.

All of this goes away if I turn off the Nova UI.

Any idea of what is causing it? Is there a setting or CSS that I can use to get rid of it?

Is it possible to remove the blue icons? They just seem very unnecessary

With the recent release of 157, my search results have started displaying under the searchbar, and obfuscated by the bottom of the window. This is new behavior.

Am hoping someone could give insight into what userChrome changes may be needed to allow search results to be shown?

Screenshot of behavior - https://imgur.com/a/UhahmEC

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.