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;

}

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! 😂

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

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

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

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 ?

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.

Hello,

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

Any suggestions or ideas ?

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

Following on from another of my posts concerning #urlbar . urlbar-input text affects, I have now achieved the effect I want. These affects matches up with all my other rainbow changes, mainly rainbow loading bar modified from u/moko1960 Add a loading progress bar to the toolbars and rainbow borders of all popup menus and panels.

The #urlbar . urlbar-input text now has a shimmering rainbow effect. To adjust the speed to your liking change the animation: shimmer-move time.

Anyway enjoy

urlbar text animation

#urlbar .urlbar-input,
#urlbar .urlbar-search-input {
  /* Set the background size broad enough to allow the position shift to animate */
  background-size: 200% 100% !important;
  background-image: linear-gradient(
    90deg, 
    red 0%, orange 14%, yellow 28%, green 42%, blue 56%, indigo 70%, violet 84%, red 100%
  ) !important;

  /* Use standard Firefox color override for text clipping */
  color: transparent !important;
  background-clip: text !important;
  -moz-background-clip: text !important;

  animation: shimmer-move 4s infinite linear !important;  
  transition: opacity 1.2s ease-out !important;
}

@keyframes shimmer-move {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: -200% 0; /* Shifts the full gradient length for a seamless loop */
  }
}

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.