Hello.
Recently tried out the Browser Fork "Floorp".
While trying out some new CSS Modifications, i noticed that Floorp allows having css Files in a Sub Folder called "CSS". Placing any css Files in this Folder will load the code from them, just like if you put the code into the "UserChrome.css" File.

The Chrome Folder:

Files in the CSS Folder:

This is really great for quickly testing stuff out, and also for not overpacked "UserChrome.css" File.
However, i tried this out with Vanilla Firefox, LibreWolf, and some other Browsers, and i couldn´t replicate that.
The Folder is there, CSS Codes in the "UserChrome.css" File work just fine, only CSS Files inside the CSS Sub Folder doesn´t get recognized.
And yes, i also made sure that "toolkit.legacyUserProfileCustomizations.stylesheets" is set to True.

Is there an option in the "about:config" i have to check, so it would work on other Browsers too?
Maybe it´s exclusive to the Floorp Browser, i don´t know, there must be a way thou.

I recently purchased a macbook and have been finding apps and stuff to fix all the little things about the OS that are frustrating, however in firefox I can't seem to find a solution. When in fullscreen mode, if your cursor overshoots the tabs then the top bar with the "traffic lights" opens, pushing your tabs down. But if the window is maximized without being in fullscreen, it has this perfect layout.

Hi! I faced an unexpected problem. Before, when I was scrolling through the tabs(with mouse-wheel or touchpad), it was smooth and the scrolling behaved like the scrolling of apps on phones.
But now the scrolling comes in portions.
Is there a way I could make it scroll like before?

How to make the text bigger in URL field?
Example in the image below shows yahoo address.

Also my History and Bookmarks show Bold text in the dropdown menu.
How to have normal text as my File, Edit, View, Tools, Help do?
Firefox 137.0 & Windows 10 Pro 22H2

I made a clean and minimal userChrome with a bit of glassmorphism. Feel free to check it out! [Fuji Fox](https://github.com/xeji01/fujifox).

hi when i move the mouse over anything (toolbar elements, bookmarks, etc.) the text boxes that appear are flickering

It makes my screen jitter every time I move over it.

Hay guys, just curious on what the deal is with not being able to get userChrome.css and userContent.css working?

I been trying to get the Toolbars/menubar/tabs/urlbar to stop Auto Popping up when I mouse over the top of the page in fullscreen mode.

I have tried the following:

1. Installed and userContent.css, and userChrome.css in my profile in C:\Users\User\AppData\Roaming\Mozilla\Firefox\Profiles\xxxxxx.default-esr\chrome
2. Set toolkit.legacyUserProfileCustomizations.stylesheets to True.

Nothing is absolutely working, it's like FF is just doing whatever it wants.
I am on FF ERS release 115.20.0esr (64-bit) w/ Windows 7 64bit SP1

Code I'm trying to use is to get the GUI Toolbars/address bar/ menu bar to not auto show when mousing over the top of the screen.

I did research and found discussions on how to do it but It's not working.

Can someone please check my code to make sure its working okay?
userContent.css

@namespace url(http://www.w3.org/1999/xhtml);

userChrome.css

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

Hey Guys, I recently updated my Firefox and my FF Última theme, and since then I've had to update a few codes, from rounded speed dials to the size and things of that nature.

The only thing I haven't been able to adjust is the positioning of my icons, no matter what code I try, what HTML/ID I use on the code it will not center my icons. They are shifted to the left side while the Firefox logo is dead center, I haven't been able to center them. Is there a new code y'all can provide me to center them.

It would be greatly appreciated. 🙏🏻

Hey all. After update to 137, my minimize, maximize and close buttons disappeared. I use the following css code. Can someone assist me?

:root{ --uc-toolbar-height: 32px; }

:root:not([uidensity="compact"]){--uc-toolbar-height: 38px}

tabbrowser-tabbox {

outline: none !important;

box-shadow: none !important;

}

I'm new to this subreddit and I don't know how deep can we customize the FF UI.

I've recently started using zen browser and there mods are amazing and I'm kind of jealous of it.

Few things I need to customise in my FF

1. Url bar
2. Something similar to essential available in the zen browser ( I know pin is kind of same but I'm unable to move the pin tabs at the bottom)
3. Customising the close minimize and resize window buttons

Is it possible to customise those things ???

Is it possible to change the purple color to something that respects the prefers color scheme and without any purple flash on page load. Just a white page for light theme and dark page for dark theme?

With the new update to Firefox, my tab center reborn addon overlaps on the page. Previously, it would not overlap on the page and when I hover over it, it then overlaps on the page to not resize content when hovering. My CSS is here: https://pastebin.com/uBv7BrLL
There was an update previously where I had to update #appcontent, but not sure what I would need to fix. I am not using the built in sidebar tabs until they allow me to hover over the content and see what the website is.

On the github page it tells me to set this setting to true but I don't know how to do it.

* Shows tabs and main toolbar side-by-side.

* By default, tabs are on left side, you can change that by setting pref

* "userchrome.navbar-tabs-oneliner.tabs-on-right.enabled" to true

https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/oneline_toolbar.css

I can get the tabs quite thin but it leaves a gap underneath that I can't work out how to get rid of.

for example

navigator-toolbox {

min-height: 30px !important; /* Adjust this value as needed */

}

doesn't do anything on 137.

css sheet is here

https://pastebin.com/TWEfD62Y

The Firefox New Tab page can display your local weather. I want to remove the separator from the weather display. I couldn't find it in the inspector. How can I get rid of the separator? This is the separator indicated by the red arrow in the image.

Vivaldi has this feature that allows you to rename tabs. When I first double-clicked and activated it when trying out Vivaldi, I thought it was an ingenious way of having the address bar be tied to double-clicking the actual tab, and being able to search using the text usually reserved for tab names. It was a fun thought. A thought Vivaldi seemed to throw in the trash in favor of "organization". Here is video of renaming, when clearly it should be searching: https://www.youtube.com/watch?v=ZnjoLPU3_j0

This gif from Tagggar's Firefox Alpha css is the closest I could find in Firefox to what I wanted. "New Tab" being a tab and not the action of opening a tab. As far as I could test, it doesn't work for me (OS dependent? I have Windows 11 and it looks like a fancy apple doodad) https://github.com/Tagggar/Firefox-Alpha

I want it! Or at least a CSS code close to it.

This would save space and be more efficient. There is plenty enough room for searches, maybe not for a full address bar, but most people don't need that at all times anyway. Each tab also already has its own address bar when toggled into, so tying it to a place you can reach it while in other tabs could open up a whole world of possibilities.

Is this possible? Am I a fool? Does this make any sense?

Can someone tell me what's going on?

Here's the code I put:

```css

urlbar-background {

background-color: rgba(255, 255, 255, 0.2) !important; box-shadow: black 0px 1px 5px !important;

backdrop-filter: blur(5px); } ```

The filter attribute works properly and putting a !important doesn't change anything... I don't know what the issue could be

live light/dark theme compare: https://rainbowflesh.github.io/html/mimicfox.html

code: https://github.com/rainbowflesh/mimicfox

not zen, pure firefox css magic

issues and PR are welcome

And the background color of the address box?

The only CSS I had was from this thread here and like many things it broke with 137. Is there any updated code that fixes this or emulates it?

This is the specific code from my userChrome.css file

/* prevent audio playing tabs from modifying tab width */
.tabbrowser-tab {
&:is([muted], [soundplaying], [activemedia-blocked]) {
    #tabbrowser-tabs[orient="horizontal"] &:not([pinned]) {
        --tab-min-width: unset !important;
    }
}

}

/* hide favicon when audio is playing (like FF 135) */
#tabbrowser-tabs:is([orient="vertical"][expanded],[orient="horizontal"]) .tabbrowser-tab:not([pinned]):not([crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
.tab-content .tab-icon-image {
    display: none;
}

.tab-audio-button {
    --button-size-icon-small: 18px !important;
    --button-min-height-small: 16px !important;
    margin: auto 4.5px auto -1px !important;
    transform: translateY(-2px);
}

}

Is there a new Chome.css cause i would like to have my tab below the address bar and seems this update screwed it up again. version is 137.0 and maybe it might have been Windows but idk much about all this coding stuff.

Anyone know if it's possible to put the new tab button at the top of the vertical tabs bar? Like in a fixed/static position, not moving around

Question: How to widen the right click menu? How to have a fix width?
Right now the menu is too animated as I move the highlight. It widens then shrinks then widens.
Windows 10 Pro 22H2
Firefox 137.00

Only code I have involving the right click menu:

/* changes the right click menu hover color */

menu:where([_moz-menuactive="true"]:not([disabled="true"])), menuitem:where([_moz-menuactive="true"]:not([disabled="true"])) {

background-color: #66CDAA !important; /* green hover color */

color: #000000 !important; /* text color */

/* if font-weight: bold; is added here instead of above code, the File, Edit, View etc will also be bold when highlighted */

}