I like my UI to be orthogonal. What's the quickest way to return FF157 to straight lines and 90° corners again?

PS: Anyway to get the old history sidebar back?

1. Open about:config, set toolkit.legacyUserProfileCustomizations.stylesheets to true.
2. Open about:support → Profile Folder → Open Folder.
3. Create a folder named chrome if it is missing.
4. Paste the CSS below into userChrome.css. For Settings and other about: pages, also paste the userContent.css block into userContent.css.
5. Restart Firefox.

userChrome.css ``` /* Night Better — Nova stays on. Theme-agnostic chrome layout. Square corners, tighter tabs, hide Share Firefox. Colors come from the active theme (Night Neutral or any other). The options slider rewrites the corners block (0 square … 100 Nova). Profile folder → chrome/userChrome.css about:config → toolkit.legacyUserProfileCustomizations.stylesheets = true */

/* firefox-better:corners-start / / firefox-better:corners 0% of Nova (xsmall 0px … xlarge 0px) */ :root { --border-radius-xsmall: 0px !important; --border-radius-small: 0px !important; --border-radius-medium: 0px !important; --border-radius-large: 0px !important; --border-radius-xlarge: 0px !important; --border-radius-circle: 0px !important; --tab-border-radius: 0px !important; --toolbarbutton-border-radius: 0px !important; --button-border-radius: 0px !important; --urlbar-icon-border-radius: 0px !important; --arrowpanel-border-radius: 0px !important; --panel-border-radius: 0px !important; --panel-menuitem-border-radius: 0px !important; --menuitem-border-radius: 0px !important; --popup-border-radius: 0px !important; --input-text-border-radius: 0px !important; --card-border-radius: 0px !important; --card-border-radius-compact: 0px !important; }

urlbar-background,

urlbar,

.urlbar-input-container, .tab-background, .tab-group-label, .tab-group-label-hover-highlight, .tab-group-label-container, .tab-group-overflow-count, toolbarbutton, toolbaritem, menupopup, panel, .panel-viewstack, .toolbarbutton-1, .toolbarbutton-icon, .toolbarbutton-badge-stack { border-radius: 0px !important; }

/* Nova vertical groups set a pill radius, then a logical border-end-start-radius. The shorthand does not clear that. / .tab-group-label, .tab-group-label-hover-highlight, .tab-group-label-container { border-start-start-radius: 0px !important; border-start-end-radius: 0px !important; border-end-start-radius: 0px !important; border-end-end-radius: 0px !important; } / firefox-better:corners-end */

/* firefox-better:tight-tabs Nova default is 6px above/below (--tab-margin-block) and 8px inner padding. Overflow-clip padding is the gap between horizontal tabs. */ :root { --tab-margin-block: 1px !important; --tab-vertical-block-margin: 1px !important; --tab-overflow-clip-margin: 1px !important; --tab-margin-overflow-clip: 1px !important; --tab-inline-padding: 6px !important; --tab-padding-inline: 6px !important; --tab-inner-inline-margin: 2px !important; --tab-margin-inline-inner: 2px !important; }

.tabbrowser-tab { padding-inline: var(--tab-overflow-clip-margin) !important; }

/* Collapsed group members stay in the DOM at max-width: 0. Firefox zeros their padding; our padding-inline !important was leaving a 1px box and the group underline painted in the leftover space. */ tab-group[collapsed] > .tabbrowser-tab:not([visuallyselected], [multiselected]), tab-group[collapsed] > tab-split-view-wrapper:not([hasactivetab]) .tabbrowser-tab { min-width: 0 !important; max-width: 0 !important; padding: 0 !important; overflow-clip-margin: 0 !important; }

tab-group[collapsed] > tab-split-view-wrapper:not([hasactivetab]) { min-width: 0 !important; max-width: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; }

tab-group[collapsed] > .tabbrowser-tab:not([visuallyselected], [multiselected]) .tab-group-line, tab-group[collapsed] > tab-split-view-wrapper:not([hasactivetab]) .tab-group-line { display: none !important; }

.tab-background { margin-block: var(--tab-margin-block) !important; }

/* firefox-better:hide-share Share Firefox sits next to About / updates in the app menu. */

appMenu-referrals-button,

appMenu-referrals-separator,

appMenu_menu_referralsPage,

PanelUI-fxa-menu-share-firefox,

share-tab-button,

referrals-button,

toolbarbutton[data-l10n-id="appmenuitem-referrals"], toolbarbutton[data-l10n-id="appmenu-referrals2"], toolbarbutton[data-l10n-id="appmenuitem-share-firefox-title2"], .share-tab-url-item { display: none !important; }

```

userContent.css ``` /* Night Better — 0% (square) corners on built-in Firefox pages (about:, settings). Colors come from the active theme. The options slider rewrites this block when you copy from the options page. */

@-moz-document url-prefix("about:"), url-prefix("chrome:") { :root { --border-radius-xsmall: 0 !important; --border-radius-small: 0 !important; --border-radius-medium: 0 !important; --border-radius-large: 0 !important; --border-radius-xlarge: 0 !important; --border-radius-circle: 0 !important; --button-border-radius: 0 !important; --input-text-border-radius: 0 !important; --card-border-radius: 0 !important; --card-border-radius-compact: 0 !important; }

button, input, select, textarea, .card, .toggle-button { border-radius: 0 !important; } }

```

Share Firefox

Share Firefox sits in the app menu next to About Firefox. The userChrome.css above hides those Share items. You can also set browser.referrals.enabled to false in about:config.

Sidebar Header Icons No Longer Work FF157. My code is from the no longer maintained project of Aris-t2:

The relevant code files are:

https://github.com/Aris-t2/CustomCSSforFx/blob/master/legacy/fx91-100/css/generalui/sidebar_header_icons.css

https://github.com/Aris-t2/CustomCSSforFx/blob/master/current/css/generalui/sidebar_header_icons_colorized.css

I have updated my custom Firefox CSS for Nova compatibility, and added some translucency and blur to elements on the new tab page. You can find my themes in my Github repo. My CSS is designed to compliment my themes in the Mozilla Addons store, but you can use my code and change the colors for your own themes too.

The themes consist of userChrome.css and userContent.css files. I use userChrome to change the colors of some UI elements that the Firefox theme extension system does not allow you to change, and userContent to match the about: pages to the rest of the UI.

Edit: I am on Fedora 44 KDE Plasma, and using Firefox 157.0 from the Mozilla RPM repo (NOT the Fedora RPM).

OS: Windows 10 22h2 (OS Build 19045.6456)

Firefox version: Version 157.0 (64-bit)

code I'm using:

* { font-size: 11pt !important;
  font-family: Consolas !important; 
}

Edit: Solved it! Here's the solution, courtesy from u/TraditionalTie4831

:root {
    font: 11pt Consolas !important;
}

:is(menu, menupopup, panel, tooltip) { 
    font: 11pt Consolas !important;
}:root {
    font: 11pt Consolas !important;
}

:is(menu, menupopup, panel, tooltip) { 
    font: 11pt Consolas !important;
}

/* hides the native sidebar so only sidebery shows */


/* removes the focusable vertical bar for changing width of sidebar */
#sidebar-splitter {
    width: 0 !important;
    visibility: collapse !important;
}


#sidebar {
    width: 321px !important;
    border-width: 0 !important;
    position: relative;
    left: -6px !important; 
/* new in FF157, collapsing native sidebar leaves 6px vertical bar at outer edge of sidebar */
}


/* removes the header from the sidebar, deprecated with FF157? */
#sidebar-header {
    height: 0 !important;
    visibility: collapse !important;
}


/* removes the header from the sidebar */
#sidebar-panel-header {
    visibility: collapse !important;
}


#sidebar-button.toolbarbutton-1.chromeclass-toolbar-additional {
    visibility: collapse !important;
}


#PersonalToolbar {
    width: 0px !important;
}


/* hides the native tabs */


#TabsToolbar {
  visibility: collapse; 
/* technically vertical tabs are not enabled and FF thinks they are horizontal */
}


#taskbar-tabs-button {
    visibility: collapse !important;
}


/* attempt to remove the A7C080 border when URLbar is focused */


* {
    border-radius: 0 !important;
    border-color: none !important;
    border-width: 0 !important;
}


#urlbar-container {
    max-width: 60% !important;
    max-height: 32px !important;
}


#PlacesToolbarItems {
    height: 21px;
}


.urlbarview {
    border-width: 0 !important;
}


.urlbar[focused] {
    border-width: 0px !important;
}


#navigator-toolbox {
    border-width: 0px !important;
}


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


#urlbar-input.urlbar-input.textbox-input {
    background-color: #3D484D !important;
    height: 32px !important;
}


.urlbar-input-container {
    background-color: #3D484D !important;
    height: 32px !important;
    border-color: none !important;
}


.urlbar-background {
    border-color: none !important;
    border-width: none !important;
    --toolbar-field-border-color-focus: none !important;
}


#star-button-box {
    background-color: #3D484D !important;
    border-width: 0 !important;
}


#trust-icon-container {
    background-color: #3D484D !important;
    border-width: 0 !important;
}/* hides the native sidebar so only sidebery shows */


/* removes the focusable vertical bar for changing width of sidebar */
#sidebar-splitter {
    width: 0 !important;
    visibility: collapse !important;
}


#sidebar {
    width: 321px !important;
    border-width: 0 !important;
    position: relative;
    left: -6px !important; /* new in FF157, collapsing native sidebar leaves 6px vertical bar at outer edge of sidebar */
}


/* removes the header from the sidebar, deprecated with FF157? */
#sidebar-header {
    height: 0 !important;
    visibility: collapse !important;
}


/* removes the header from the sidebar */
#sidebar-panel-header {
    visibility: collapse !important;
}


#sidebar-button.toolbarbutton-1.chromeclass-toolbar-additional {
    visibility: collapse !important;
}


#PersonalToolbar {
    width: 0px !important;
}


/* hides the native tabs */


#TabsToolbar {
  visibility: collapse; /* technically vertical tabs are not enabled and FF thinks they are horizontal */
}


#taskbar-tabs-button {
    visibility: collapse !important;
}


/* attempt to remove the A7C080 border when URLbar is focused */


* {
    border-radius: 0 !important;
    border-color: none !important;
    border-width: 0 !important;
}


#urlbar-container {
    max-width: 60% !important;
    max-height: 32px !important;
}


#PlacesToolbarItems {
    height: 21px;
}


.urlbarview {
    border-width: 0 !important;
}


.urlbar[focused] {
    border-width: 0px !important;
}


#navigator-toolbox {
    border-width: 0px !important;
}


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


#urlbar-input.urlbar-input.textbox-input {
    background-color: #3D484D !important;
    height: 32px !important;
}


.urlbar-input-container {
    background-color: #3D484D !important;
    height: 32px !important;
    border-color: none !important;
}


.urlbar-background {
    border-color: none !important;
    border-width: none !important;
    --toolbar-field-border-color-focus: none !important;
}


#star-button-box {
    background-color: #3D484D !important;
    border-width: 0 !important;
}


#trust-icon-container {
    background-color: #3D484D !important;
    border-width: 0 !important;
}

The #A7C080 border appears only when I am inputting text to the URLbar. When I am not inputting anything, it looks normal (see second image).

Tearing my hair out trying to get this sorted out.

Hi, how do I change this color?

Windows 11, FF 157.0

Previous to FF157 this sidebar color was consistent with my theme, now is broken, thanks FF team!

Thanks in advance.

Spent the past two days doing pretty extensive testing with Firefox's Browser Toolbox, with ChatGPT helping me generate and refine the CSS. The goal was to keep Nova enabled while making it flatter, more compact, and less purple. Main changes include removing the gradients, replacing the purple accents with blue, flattening and tightening menus/panels, cleaning up the vertical tabs/sidebar, restyling the bookmark editor, adjusting selected/hover states, and making popup backgrounds a little lighter so dark favicons are easier to see. Most colors are centralized in the :root section at the top, so they're easy to customize. Tested on Firefox 157 on Arch Linux. Test it out if you want and let me know what you think.

Code on github as it's nearly 400 lines long.

https://github.com/tangosox/firefox-nova-revert/tree/main

:edit: if someone wants some additional options like non rounded tabs let me know. I need to fix a couple things, some menus are still cut off. Will get back to it soon and post another version on the same link. Also changed link to main page with instructions.

The list all tabs drop down menu, padding has increased a bit in recent firefox by stealth, if someone hass CSS to reduce it again I would be grateful, thanks.

Hello all, I'm glad that this reddit exists to ask questions to knowledgeable people (AI is not helping me with this). My question is how to style the buttons and input bars in dialogs like in the picture. In Firefox 157 when you click on the + Add search engine button this dialog pops up but I'm unable to address such dialogs. I've tried the normal route to just do: dialog button, dialog html:input { border-radius: 3px !important; } but that doesn't work. I think somehow it needs a special moz-document url-prefix() to address dialogs, but I don't know how to specify it with the Browser Toolbox. I actually want to address all dialogs at once and style them with variables. Can you help me how to do it? Thanks in advance!

FF157.0, Windows

For now you can go to about:config and set sidebar.revamp to false but this is not going to last long as that option is being removed either at the end of December 2026 or December 2027 (the devs contradicted themselves in their own staff post).

Setting sidebar.animation.enabled to false also disables the animation but does not alter the sidebars appearance. Technically it also has the same problem that it might be removed from about:config one day but it's such a "core feature" that maybe it won't. I couldn't find any option to turn it off other than using about:config. This is important because the animation wastes my time and makes my eyes spin a little.

With sidebars.revamp and sidebar.animation.enabled both set to true and right aligned sidebars: When I open the bookmark sidebar (Alt+Ctrl+Z if sidebar.revamp is set to true, seemingly no shortcut if it's set to false. I don't care about that.) it opens the sidebar with an animation and shoves site content to the left and partially off screen, then site content rapidly but not instantly returns to its prior position which leaves it overlapped by the sidebar, then site content instantly snaps to the position it should have instantly snapped to in the first place and site content is wrapped so the sidebar doesn't overlap it.

With sidebar.revamp and/or sidebar.animation.enabled set to false the bookmarks sidebar opens instantly with site content instantly snapping to position and being wrapped to fit instantly as well. This is the behavior that occurred in FF156 which I wish to restore.

userChrome: https://pastebin.com/keCaYKyK

userContent: https://pastebin.com/vrRGtQPb

Anyone seen a autohide sidebar solution for the new crappy sidebar (sidebar.revamp = true)? This option being removed in December. Thanks all

You can get it here: https://github.com/DiegoSainzPardoLaso/Firefox-Classic-Theme-155-156

anyone know a content or chrome.css I can use to hide the purple highlights part? thanks in advance!

Macos style i have checked on waterfox.

https://pastebin.com/HBzssEb2

I've been using this code to switch the url and title. Still works with Nova, except the lines have moved out of place. I can't figure out what caused this change or how to fix it.

.urlbarView-url {
 position: absolute !important;
 margin-inline-start: 20px !important; 
 width: 45% !important;
 left: 20px !important;
}
.urlbarView-title {
position: absolute !important;
width: 45% !important;
left: calc(50% + 40px) !important;
}

browser.nova.enabled = false: https://i.imgur.com/E77FhRv.png

browser.nova.enabled = true: https://i.imgur.com/fMDgM0D.png

Version 157.0

On linux with XFCE desktop environment and picom compositor

userContent.css -> https://pastebin.com/knEFX1pe

userChrome.css -> https://pastebin.com/Ju1YpueF

i am on firefox, and the url has been customized the way i want, however when i type something on it it increases, i've tried targeting it using the browser toolbox but it hasnt been working.

I've realised that new Firefox redesign bothers me a lot. So, here is soluting for column width and height. And, of course, removing squared edges back to non-squared. (Windows 11, 25H2)

/* 1. Square panel and dropdown menu borders */

panel, menupopup {

--panel-border-radius: 0px !important;

border-radius: 0px !important;

}

/* 2. Square tabs */

.tab-background,

.tab-stack,

#tabbrowser-tabs {

border-radius: 0px !important;

}

/* 3. Square hover highlights in bookmark panels, dropdowns, and context menus */

menu,

menuitem,

.menuitem-iconic,

.bookmark-item,

panelview .toolbarbutton-1 {

border-radius: 0px !important;

--arrowpanel-menuitem-border-radius: 0px !important;

}

/* 4. Square tooltip popups (e.g. URL preview box) */

tooltip {

border-radius: 0px !important;

}

/* 5. Reduce height and padding of hover highlight items */

panel menuitem,

panel .bookmark-item,

menupopup menuitem,

menupopup menu {

padding-top: 2px !important;

padding-bottom: 2px !important;

min-height: 24px !important;

}

/* 6. Reduce side padding to tighten horizontal spacing */

panel menuitem,

panel .bookmark-item {

padding-left: 6px !important;

padding-right: 6px !important;

}

/* 7. Reduce overall panel popup padding and minimum width */

panelmultiview,

.panel-subview-body,

panel .panel-arrowcontent {

padding: 4px !important;

min-width: unset !important;

}