With the new update 159, toolbar menus—such as the bookmarks and history menus—are EXTRA ROUNDED again. Does anyone know how to fix this?

This no longer works for menus

https://www.reddit.com/r/FirefoxCSS/comments/1whkjin/nova_rounding_borderradius_adjustment_variables/

The dot that appears on a new/updated tab now no longer bright contrasting colour after the 159.0 update on any theme that's not the default. Makes it hard to tell at a glance when vertical tabs are collapsed to icons.

I was wondering if there was a way to change this dot?

I am currently trying to theme librewolf i have customized my userchrome.css and userContent.css to load colors from my current theme i but whenever i change my theme i have to restart firefox I found this script online and customized it a little by using chatgpt it Hotreloads userChrome.css it updates the browser colors (but i still have to paste it in browser's consol CTRL SHIFT J) I am wondering if there is some kind of bashscript that could send a signal to the browser to hotreload so currently I am having two problems

1. the script does not load userContent.css
2. how do i execute the script

this here is the script

(() => {
    const Cc = Components.classes;
    const Ci = Components.interfaces;

    const sss = Cc["@mozilla.org/content/style-sheet-service;1"]
        .getService(Ci.nsIStyleSheetService);

    const io = Cc["@mozilla.org/network/io-service;1"]
        .getService(Ci.nsIIOService);

    const ds = Cc["@mozilla.org/file/directory_service;1"]
        .getService(Ci.nsIProperties);

    // Locate current-theme.css in the profile's chrome folder.
    const file = ds.get("UChrm", Ci.nsIFile);
    file.append("current-theme.css");

    if (!file.exists()) {
        console.error("File not found:", file.path);
        return;
    }

    const uri = io.newFileURI(file);

    // Unregister the existing stylesheet.
    if (sss.sheetRegistered(uri, sss.USER_SHEET)) {
        sss.unregisterSheet(uri, sss.USER_SHEET);
        console.log("Unregistered:", file.path);
    }

    // Register the stylesheet again.
    try {
        sss.loadAndRegisterSheet(uri, sss.USER_SHEET);
        console.log("Registered:", file.path);
    } catch (e) {
        console.error("Failed to register stylesheet:", e);
    }
})();

can i get some suggestions on how i should approach this or some sources
I know there is something called fx-config which allows you to add JS to the browser but it comes with security concerns

librewolf version: LibreWolf 158.0-1
OS Arch Linux

I can't find any working css for this since the nova update, does anyone know a way?

I'm new so please don't flame me 😂 I checked other posts regarding sidebar color and none of their fixes worked. I'm trying to get the sidebar to match the color of the rest of the bars and nothing has worked. below is my userchrome.css. Any help would be appreciated. FF158.01 Win10

/* ==========================================================================

1. Active & Inactive Accent Colors

========================================================================== */

#TabsToolbar,

#navigator-toolbox,

#nav-bar,

#tabs-newtab-button,

#titlebar toolbarbutton:not(:hover):not(:active),

#scrollbutton-up:not(:hover):not(:active),

#scrollbutton-down:not(:hover):not(:active),

.titlebar-color {

background: AccentColor !important;

color: AccentColorText;

fill: AccentColorText !important;

}

#TabsToolbar:-moz-window-inactive,

#navigator-toolbox:-moz-window-inactive,

#nav-bar:-moz-window-inactive,

#tabs-newtab-button:-moz-window-inactive,

#titlebar toolbarbutton:not(:hover):not(:active):-moz-window-inactive,

#scrollbutton-up:not(:hover):not(:active):-moz-window-inactive,

#scrollbutton-down:not(:hover):not(:active):-moz-window-inactive,

.titlebar-color:-moz-window-inactive {

background: unset !important;

color: unset;

fill: unset !important;

transition: none !important;

}

/* ==========================================================================

1. Layout: Menu/Nav on Top, Tabs on Bottom, Push Nav Bar Right

========================================================================== */

#navigator-toolbox {

display: flex !important;

flex-direction: column !important;

}

/* Force the Menu Bar to stay on the top-left */

#toolbar-menubar {

order: 1 !important;

display: flex !important;

align-items: center !important;

position: absolute !important;

top: 0px !important;

left: 10px !important;

z-index: 10 !important;

}

/* Place the navigation bar at the top AND push it to the right */

#nav-bar {

order: 1 !important;

margin-left: 320px !important;

}

/* Adjust titlebar elements and push tab bar to the bottom */

#titlebar {

order: 2 !important;

}

#TabsToolbar {

order: 2 !important;

margin-left: 45px !important;

}

/* ==========================================================================

1. Sidebar

========================================================================== */

#sidebar-box {

background-color: AccentColor !important;

color: AccentColorText !important;

}

#sidebar-main {

background-color: var(--lwt-accent-color) !important;

}

#sidebar-header {

background: AccentColor !important;

color: AccentColorText !important;

border-bottom: 1px solid color-mix(in srgb, AccentColor 70%, black) !important;

}

#sidebar-splitter {

background-color: transparent !important;

border-inline-color: color-mix(in srgb, AccentColor 60%, black) !important;

}

/* Inactive window state fallback for the sidebar */

#sidebar-box:-moz-window-inactive,

#sidebar-header:-moz-window-inactive {

background-color: unset !important;

color: unset !important;

}

hi guys, i actually used to be a chrome user, so i am not too familiar with Firefox.

Why is the search result so small? How can i turn the text size bigger?

(font size in setting did not work)

I've always had a soft spot for the old Firefox interface from around 2004–2005.

The colourful icons, chunky green Back button, blue Reload button, grey toolbars... everything seemed to have so much more personality than modern software.

So I decided to try bringing some of that back!

Introducing RetroFox 2004! 🦊

It's a free, open-source userChrome.css theme that recreates the appearance of Firefox 1.0 while keeping modern Firefox running underneath.

Rather than recreating the icons, I managed to get hold of the original Firefox 1.0 files and extract the genuine Mozilla Winstripe artwork.

I've also made two versions:

☀️ Classic Edition — Traditional silver/grey toolbars, colourful icons and that lovely early-2000s appearance.

🌙 Dark Edition — An interpretation of what Firefox 1.0 might have looked like if Mozilla had released a dark theme back in 2004.

Both versions retain the original colourful icons.

The project includes installation instructions, theme-switching scripts and an uninstaller.

It's currently been tested on Firefox 158.0.1 on Windows.

GitHub: github.com/andyquann123/RetroFox2004

Version: v1.0.0

This started as a little nostalgia project, and I ended up enjoying it enough to put it on GitHub for other people to try.

It's not a pixel-perfect recreation, but I'm pretty happy with how it turned out.

I'd love to hear what people think, particularly anyone who remembers using Firefox back in the early 2000s!

Feedback, suggestions and contributions are welcome.

Hopefully I'm not the only person who misses those glorious green arrows! 😂

Only noticed this as do not use it that often but I have lost the border surrounding the ac popup megabar results.

I have tried various CSS code nothing is working. The following I have found on searching.

#urlbar[breakout][breakout-extend] > .urlbarView {
  padding: unset !important;
  margin: unset !important;
    border: 2px solid #008000 !important;
}

and original code by Aris-t2

:root {

    --toolbar-field-border-color: #008000 !important;
    --toolbar-field-focus-border-color: #008000 !important;
}

.urlbar[breakout][breakout-extend] {
    box-shadow: inset 0 0 0 1px #008000 !important;
    border: 2px solid #008000 !important;
}

and

#urlbar[breakout][breakout-extend] #urlbar-background {
 border: 2px solid #008000 !important; 
}

and

.urlbar-background {
  border: 2px solid #008000 !important;
}

and

#urlbar[focused="true"] #urlbar-background,
#urlbar[breakout][breakout-extend] #urlbar-background {
  border-color: #008000 !important;
}

Thank you

what the title said thanks in advance

I just put

* { border-radius: 4px !important; }

in my userContent and it made everything a 100 time better looking imo

Do you like more squared off corners or do you like everything to be a pill?

I asked Google AI. Nothing worked. I have a lot of search engines. This was not a problem until fairly recently, but with the way it is now, I cannot scroll down to the last nine search engines in the list.

On the new tab page, if you attempt to upload a custom picture with transparency, for whatever reason FireFox converts the image's transparency to white, instead of preserving it (even tho its preserved when its auto generated). Unfortunately this bug has not been fixed, and its been at least 4 nearly 5 years, according to bug 1758932. I have found a workaround however

• Get your desired icon's png, and put it in the chrome folder. the same one with userChrome.css and userContent.css

• In userContent.css, paste in the following code, replacing the placeholders with what is needed:

  @-moz-document@-moz-document url("about:newtab"), url("about:home") {   a.top-site-button[href*="[DOMAIN OF SHORTCUT]"] .top-site-icon {     background-image: url("[NAME OF ICON FILE]") !important;     background-color: transparent !important;     background-size: contain !important;     background-position: center !important;     background-repeat: no-repeat !important;   } }

you can use just the domain, or the whole link if you have multiple shortcuts with the same domain, but want different icons. to do multiple icons, just paste in the code a few more times, changing the domain and file names, respectively

I'm using FireFox v158, and Windows 11, however I'm sure that it would work the same on MacOS and Linux

I want to remove "Not Secure" icon and text at the address bar, to save space when accessing local addresses (and never thought of that message as really useful!)...

I tried (userChrome.css), Firefox/Arch Linux, v.158.0:

``` @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

trust-icon-container { display: none; }

```

but it doesn't seem to work?

Hello. Can anyone recommend any themes similar to Zen? I like how the search bar is neatly positioned above the pinned tabs. I fully understand that Zen is based on Firefox, but I don't like how it's optimized

hi, all is in the title !

i did it by the past but they changed the visual of the page and of course the ID's !

I used claude, chatgpt and gemini but without success to change it by my own svg

Any help please ?

What's improved:

• Fixed address bar shifting and suggestion popup issues.
• Removed duplicate toolbar backgrounds and unwanted tab borders.
• Improved popup menu spacing, rounded corners, and hover effects.
• Refined search provider rows and account menu styling.

Note: Set browser.theme.dark-private-windows to false for light private windows, or true for Firefox's default dark mode.

Download: GitHub

Is there any way to style scrollbars through userChrome.css? I am working on a retro-style theme for firefox and I want to recreate the scrollbars of my MATE theme (linux). I have the border image and the arrow images ready. But I can't focus the scrollbar in the remote browser debugging session. It seems like the scrollbars are a part of the page content. If I can't style them through userChrome.css I'd also be okay with using some other solution to get the scrollbar looking like the left window in the image.

It's kinda exactly what it sounds like... I'm new to customizing with CSS and i was just trying to apply FF ultima's floating navbar/full size floating/autohide. When i check the box, the navbar does in fact disappear but when i move my mouse upwards, it doesnt detect anything... i also noticed that it isnt a problem with the drop down itself because when I press ctrl + L, it does drop down. I've attached a video as well. I've been at it since 7 am bro its chewing my head off. Please if anyone knows a fix let me know.

FF ultima version 4.3

Thanks to this wonderful community I think I've arrived at the last part of my Firefox Update Journey from the old ESR branch to the new one. However this time I can't really post my own code as I am using this old Sidebar CSS with the Sideberry Addon: https://github.com/macleod-ee/FirefoxSidebar

It still works on 153 ESR however there is some weird excess padding in the sidebar to the right side now as you can see here:

https://ibb.co/0RNxLTmS

The sidebar used to end at the faint, vertical line. I don't actually mind the rounded inner-corner and I would like to keep it if possible but would anyone know how to remove the excess padding in my setup?

Thanks for help in advance, everyone here has been super helpful to me the past few days.

Hello,

Here is my vision for vertical tabs: https://tangled.org/mykiwi.dev/firefox-compact-tabs

Any suggestions or ideas ?