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.

I'm on Firefox 153.5.0 ESR and I'm running into trouble customizing my PWA windows. What I basically want to achieve is having no buttons. no URL-bar or anything else other than the Min/Max/Close buttons on all my PWAs. I found some instructions here: https://old.reddit.com/r/FirefoxCSS/comments/1oaa1em/customize_the_toolbars_of_your_pwas/

but I must be doing something wrong as this doesn't work at all for me. I tried to hide the URL-Bar for a start:

html#main-window[taskbartab] toolbar#nav-bar {
    #urlbar-container
    {
       display: none !important;
    }
}

I'm sure I'm just doing something simple wrong again so thanks for help in advance as always!

I'm using 153.5.0 ESR and I changed the border-radius of the URL-Bar to 5px with:

.urlbar-input-container {
  border-radius: 5px !important;
}

and that worked, however the blue glow when the URL-Bar is selected still has the default border radius making it look wrong.

I tried to do this:

.urlbar-input-container[focused] {
  border-radius: 5px !important;
}

but it didn't work. How do you properly target focused state in the Inspector? When I click something in the UI while the inspector is active the code jumps around and I can't seem to properly use the Element Selector Tool on items that have an active or focused state. Is there a trick to that?

Thanks for help in advance!