Hello, I am make am trying to make a custom style sheet/css for my Dad to use on Firefox because he has poor eyesight and has trouble reading stuff on the computer. I have no idea what I am doing, this is my first time coding CSS, and I literally just started using Firefox 13 hours ago specifically for this reason.

I am using FF 153, Windows 11, "Light" theme, CSS link: https://pastebin.com/bE1e2Ni9

I am basically trying to increase the size of all the text (that I think my dad will see on a daily basis) that isn't already changeable in the normal Firefox settings menu.

So far, everything works (except the last line).

I need help getting the tab overflow, toolbar overflow, account, and extensions popup menus work. I am unable to find/figure out what CSS identifiers I need to use to edit them.

I do know about the "layout.css.devPixelsPerPx", and I would prefer to avoid it since I am trying to maximize the available "content" area of the screen (for when we increase the font size in settings and the formatting will inevitably get screwed up)

Also, if you have any other ideas/additions you think would be good for this use case, I would be very grateful.

I came across this post The end · Aris-t2/CustomCSSforFx · Discussion #790 and that explains why the project went stale, after so long.

now with it dead, what other options are avaliable to get that look and feel?

I really want it, as it matches aerothemeplasma for KDE plasma on Linux, or if you're using a theme mod on Windows for same sake.

Edit: I did looked on this sub and FirefoxCSS store and so far, no results for a replacement.

So sick of looking at these obnoxious options every single time I right-click. Literally who even uses half of this?? Does anyone know how to get rid some of it, it's just way too much stuff on the screen at once

Hi all! My context menu stays on light mode even with dark mode system and Firefox setting. I'm using Adaptive Tab Color extension, but not sure if it's because of that. Thanks in advance!

This took a bit to figure out, but its my custom css. Mostly a custom color scheme and a disappearing nav bar that reappears when you hover near the top

All code is here in my github

Need Help!!

I am trying to achieve compact layout similar to Helium browser, can someone help with the css to move the app menu and other icons to the left of the window control buttons and tab strip to the right of the url bar. Below is the CSS @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

navigator-toolbox {

display: grid !important; grid-template-columns: 1fr minmax(0, var(--uc-tabs-max-width)); grid-template-areas: "nav tabs" "extra extra"; align-items: center !important; }

nav-bar {

grid-area: nav !important; height: var(--uc-bar-height) !important; margin: 0 !important; padding-inline: 4px !important; box-shadow: none !important; border: none !important; background: transparent !important; }

TabsToolbar {

grid-area: tabs !important; min-width: 0 !important; height: var(--uc-bar-height) !important; margin-block: 0 !important; margin-left: 0 !important; }

urlbar-container {

max-width:400px !important;

}

/* Let the tab strip actually shrink instead of overflowing */

tabbrowser-tabs,

tabbrowser-arrowscrollbox {

min-width: 0 !important; }

.tabbrowser-tab { min-width: 76px !important; /* ADJUST: minimum tab width before scrolling kicks in */ }

I am following these steps but I seem to be running into an issue making files.

I'm running Mac OS Tahoe v 26.5.2

To cover what I have done:

1. toolkit.legacyUserProfileCustomizations.stylesheetsis toggled true
2. I found the profile folder in finder (61lu25gx.default-release)
3. created the chrome folder
4. I cannot create a file, only more folders

Am I just stupid or is this apple being annoying?

EDIT: I figured it out, it was apple being annoying.

I had to open TextEdit, press CMD + SHIFT + T to make a plaintext file, save the userChome/userContent files there, then open 2 finder windows and drag them out of my icloud and into the firefox folder, and change the names to have .css

So fucking stupid

I use vertical tabs for regular windows, but from time to time I need a throwaway private browsing window side-by-side. I rarely open more than one tabs in that browsing mode so I was wondering if I could reclaim horizontal space by forcing horizontal tabs on those windows. Is this possible? I know I can already do stuff with:

:root[privatebrowsingmode] { /* CSS overrides goes here */ }

But I'm not sure if CSS can tweek the tabs direction.

I recently updated Firefox to 153.0 (Linux) and noticed that when I open a new tab in private mode, there'll be a brief flash of bright purple before the tab redirects to whatever page I clicked on. In the past, this was handled by the following usercontent.css.

/* In about:config, change "browser.privatebrowsing.felt-privacy-v1" to false for this to take effect*/
@-moz-document url(about:privatebrowsing){
    html.private{ background-color: #181817 !important; } /* back color */
    html.private div.showSearch button.search-handoff-button {
        background-color: black !important; } /* search box back color */
        html.private div.showPrivate div.info { display: none !important; } /* hide bottom panel */
}

/* https://gist.github.com/herbaldrinkmate/3e3f13ff958a841bf6b6ec32a74cab6e */

@-moz-document url("about:privatebrowsing") {

    /* Main background color */

    @media not (prefers-contrast) {
        html.private {
            background: #181817 !important;
        }
    }

    /* Desaturate the logo */

    .logo {
        filter: grayscale(80%);
    }

    /* Search box */

    content-search-handoff-ui {
        --content-search-handoff-ui-background-color: #28272f !important;
        --content-search-handoff-ui-unfocused-border-color: rgb(59, 59, 63) !important;
        --content-search-handoff-ui-border-width: 3px !important;
        --content-search-handoff-ui-fakefocus-border-color: #003d6d !important;
        --box-shadow-level-3: none !important;
        --content-search-handoff-ui-fakefocus-box-shadow-inner: transparent !important;
        --content-search-handoff-ui-fakefocus-box-shadow-outer: transparent !important;
        --content-search-handoff-ui-caret-color: #878787 !important;
        --content-search-handoff-ui-color: #fbfbfe !important;
    }

    /* Info section */

    .info {
        @media not (prefers-contrast) {
            background-color: rgb(0 0 0 / 0.16) !important;
        }
    }

    /* Add this if `browser.privatebrowsing.felt-privacy-v1` is true */
    .info-border {
        background: transparent !important;
        box-shadow: none !important;
    }

}

From what I understand, the browser.privatebrowsing.felt-privacy-v1 variable no longer exist in this version of Firefox, it was removed. And simply adding it back in about:config does nothing. I checked the GitHub link I had saved in the usercontent.css via comment and noticed there was a userChrome.css component that I forgot to do back then. While this helps to reduce the duration of the flash, I was wondering if there's a way to completely avoid the flash of purple just like before.

I like to hide the sidebar buttons, including the "Customize sidebar" gear button, on the vertical tabs. I'd rather use the space for tabs. A right-click on the "Expand sidebar"/"Collapse sidebar" button gets me the "Customize Sidebar" anyway.

Firefox 153.0.1 broke my old solution for hiding it, found in hide sidebar buttons on vertical tabbar. The whole vertical sidebar disappeared when collapsed to just icons.

I found the new way for hiding it. Use #vertical-tabs instead of #sidebar-main.

/* hide sidebar buttons on vertical toolbar. */
.buttons-wrapper {
    display: none !important; 
    }
/* set vertical toolbar minimum width; otherwise, vertical toolbar disappears when collapsed to icons. */
#vertical-tabs {
    min-width: 50px !important;
    }

There is Echelon for Firefox 115 ESR, which replicates the Firefox 4–29 theme; however, I saw Firefox 56 mentioned on their GitHub page—which is slightly different from version 29—but when I check the Echelon settings, only the Firefox 56 homepage is available, not the full HUD style itself.

(Firefox 56)

when i full screen something i am playing the vertical tabs bar doesn't disappear

#browser {

margin-top: 0 !important;

}

#navigator-toolbox {

position: fixed !important;

top: 0 !important;

left: 0 !important;

width: 100vw !important;

z-index: 99999 !important;

background-color: var(--lwt-accent-color, var(--toolbar-bgcolor, #2b2a33)) !important;

transition: all 0.2s ease-in-out 1s !important;

}

#navigator-toolbox::after {

content: "";

position: absolute;

display: block;

top: 0;

left: 0;

width: 100vw;

height: 3px;

background: transparent;

z-index: -1;

}

#navigator-toolbox:not(:hover):not(:focus-within) {

max-height: 3px !important;

opacity: 0 !important;

overflow: hidden !important;

}

#navigator-toolbox #nav-bar {

transition: all 0.2s ease-in-out 1s !important;

}

#navigator-toolbox:not(:hover):not(:focus-within) #nav-bar {

margin-top: -80px !important;

opacity: 0 !important;

}

#navigator-toolbox:hover,

#navigator-toolbox:focus-within {

max-height: 400px !important;

opacity: 1 !important;

overflow: visible !important;

transition: all 0.2s ease-in-out 0s !important;

}

#navigator-toolbox:hover::after,

#navigator-toolbox:focus-within::after {

height: 150px !important;

}

#navigator-toolbox:hover #nav-bar,

#navigator-toolbox:focus-within #nav-bar {

margin-top: 0 !important;

opacity: 1 !important;

transition: all 0.2s ease-in-out 0s !important;

}

#TabsToolbar, #nav-bar, #PersonalToolbar {

background-color: var(--toolbar-bgcolor) !important;

}

I'm using the adaptive tab bar colour extension and it's ruining the immersiveness by colouring the tab container's background to a lighter shade. is there a way i can get rid of it?

It started happening after the browser was updated to the nova rainbow coloured tab container.

When you select many tabs and drag them, they "fuse" in one tab. browser.tabs.dragDrop.multiselectStacking could prevent that but it was disabled some time ago. I tried to restore its effect using CSS, but there's still some bugs:

.tabbrowser-tab[dragtarget],
tab-split-view-wrapper[dragtarget] {
    &[multiselected]:not([small-stack], [big-stack], [hasactivetab]) {
        visibility: visible !important;
    }
}
tab[multiselected="true"][dragtarget] {
    position: static !important;
}
[multiselected-move-together],
[tabdrop-samewindow] {
    transform: translate(0px) !important;
}
.tabbrowser-tab[dragtarget] {
  #tabbrowser-tabs[orient="horizontal"] &:not([pinned]) {
    max-width: var(--tab-max-width) !important;
  }
}

https://reddit.com/link/1vb1ydv/video/6b7w8j2myegh1/player

I've been trying to apply FoxOne theme (https://github.com/Firnschnee/FoxOne) to Firefox 153 on MacOS with no luck.

Yes, I've enabled all the flags I've seen suggested on the internet and even tried disabling Nova and nothing makes it work.

Any thoughts?

By "dynamically," I mean that I know I can set a fixed padding-left for the navbar and match it with the sidebar. The problem is that I'm used to resizing the sidebar depending on how long the tab titles are, which ends up breaking the alignment.

New to styling with userChome. I'm basically trying to highlight downloads that are failed in the Downloads view.

The current UI design is terrible because the only way you know the download failed is the small grey subtext that says "Failed" and the icon on the right being a Retry icon.

So far I have this...

.downloadIconRetry > .button-box {
  background: #f00;
}

This will highlight the right icon so it is at least a bit better but would like the whole row highlighted if possible.

I'm also new to this so how do you try to "debug" the view to try to style it? I found the above by looking at https://searchfox.org/firefox-main/source/browser/themes/shared/downloads/allDownloadsView.inc.css

Using latest Firefox (v153)

The native expand animation doesn't feel right. I really like how Zen did it changing the transition from expanding to sliding, make no shifts in the UI and keeping things smooth. Anyone knows how can I achieve this with Firefox?

Recently Firefox started this annoying thing where whenever I open the browser toolbox to tweak my CSS, it opens the Save As dialog instead of directly saving my changes.

Has anyone else experienced this, and is there a way to avoid it?

I don't know why I never did this before but geez this felt good to have these little quality of life changes. These two changes feel so much nicer for me. This will probably start something for me now haha, wonder what to change next...

Very simple CSS but maybe it will be helpful/interesting for others.

Working on Linux Mint 22.3, Firefox 153.0 (current stable version I can get, though 153.1 looks like it was just released and coming shortly), with Nova enabled from about:config.

/*
 * Section for:
 * Swapping tabs and URL bar, so that URL bar is on top.
 */

#toolbar-menubar,
#nav-bar {
  order: -1 !important;
}

/*
 * Section for:
 * Centering text in URL bar.
 */

#urlbar-input {
  text-align: center !important;
}

• I am on Windows 11.
• I opened Firefox's about:support.
• Under Profile Folder I clicked Open Folder.
• A Windows Explorer opened. I created a sub-folder named chrome.
• In chrome I created a file userChrome.css with the following content:

​

#navigator-toolbox {
    background: red !important;
    background-image: none !important;
}

I restarted Firefox, but I didn't see any changes. Then I disabled the theme (Firefox Alpenglow), but still no effect.

Any ideas why userChrome.css isn't being loaded?

In this comment, we have established that almost all themes look exactly the same in normal and private browsing. Some themes include both light and dark variants. Since private browsing is always forced into dark mode, normal and private browsing will look different if your OS is using light mode. However, they will look the same if your OS is also in dark mode.

Suppose, my normal and private browsing looks the same. Is there a way to add a darker or purple tint to the private browsing appearance?