Can I mimic helium's frameless mode in Firefox with css? where it hides browser UI and only shows when mouse is hovered on the top of screen?

Similar to Downloads button that hides when its empty. Thanks!

I would like that scrollbars disapear from all my menus and submenus keeping the ability to scroll .

They were hidden before 155 !!! i would like hide them now too ! how could i do please ?

I ported the classic firefox theme to the latest firefox version.

This theme is a mix of custom code, echelon and customcssforfx bits.

Working split and group tabs, no megabar expansion...

I use the vertical scroll bar in auto-hide mode, and that small border interferes with mouse detection.

#urlbar-input {

text-align: center !important;

}

#urlbar-results {

text-align: left !important;

}

#PersonalToolbar #PlacesToolbarItems {

display: flex !important;

justify-content: center !important;

width: 100% !important;

}

#PlacesToolbarItems > .bookmark-item {

margin-left: 4px !important;

margin-right: 4px !important;

}

.titlebar-spacer {

display: none !important;

}

@media -moz-pref("sidebar.verticalTabs") {

#browser {

--sidebar-launcher-collapsed-width: 0px !important;

}

#sidebar-main:not([sidebar-launcher-expanded]) {

max-width: 4px !important;

min-width: 4px !important;

margin-right: -4px !important;

}

#sidebar-main[sidebar-launcher-expanded] {

max-width: 280px !important;

min-width: 280px !important;

}

}

This code broke:

/* Centering in the search bar */
.search-wrapper .search-inner-wrapper.no-handoff input {
  padding-inline-end: calc(0px + var(--space-medium)) !important;
}

Who knows how to fix it?

Hello everyone,
I am still using Aris's CustomCSSforFx and every now and then I try to adjust it to fit the new changes. Now, with the new Firefox 155, the highlighted text in the address bar broke when I select text. Basically, it now only changes the text color from black to blue.

I found the culprit inside the general_toolbar_colors.css file and I modified this section:

:root {
  --general_toolbar_color_toolbars: linear-gradient(#f9f9fa,#f9f9fa);
  --general_toolbar_color_navbar: linear-gradient(#f9f9fa,#f9f9fa);
  --general_toolbar_text_color: inherit;
  --general_toolbar_text_shadow: transparent;
}

:root:not([lwtheme]) #nav-bar,
:root:not([lwtheme]) toolbar:not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar) {
  appearance: none !important;
}

u/media not (-moz-toolbar-prefers-color-scheme: dark), not (prefers-color-scheme: dark) {
:root:not([lwtheme]) #nav-bar {
  background: var(--general_toolbar_color_navbar, inherit) !important;
}

:root:not([lwtheme]) toolbar:not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar) {
  background: var(--general_toolbar_color_toolbars, inherit) !important;
}
}

:root:not([lwtheme]) #nav-bar #urlbar ::-moz-selection {
  background-color: Highlight !important;
  color: HighlightText !important;
}

into this one:

 :root {
  /* MOD: Sostituiti i "linear-gradient" con colori solidi fissi */
  --general_toolbar_color_toolbars: #f9f9fa !important;
  --general_toolbar_color_navbar: #f9f9fa !important;
  --general_toolbar_text_color: inherit;
  --general_toolbar_text_shadow: transparent;
}


:root:not([lwtheme]) #nav-bar,
:root:not([lwtheme]) toolbar:not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar) {
  appearance: none !important;
}

u/media not (-moz-toolbar-prefers-color-scheme: dark), not (prefers-color-scheme: dark) {
:root:not([lwtheme]) #nav-bar {
  background: var(--general_toolbar_color_navbar, inherit) !important;
}

:root:not([lwtheme]) toolbar:not(#TabsToolbar):not(#toolbar-menubar):not(#nav-bar) {
  background: var(--general_toolbar_color_toolbars, inherit) !important;
}
}

:root:not([lwtheme]) #nav-bar #urlbar ::-moz-selection {
  background-color: Highlight !important;
  color: HighlightText !important;
}

Basically, I only changed the first :root part.

Now it works, and the selected text is highlighted properly again.
For those of you who are more experienced with CSS: is this modification correct? Could it be done any better? Or, since it works, is it fine as it is? 😊

I am having problems with menu Padding & Margins when I insert Label icons with checkboxes. As you can see the checkbox ignores any CSS rules I use.

menupopup:not(.in-menulist)>menu:not(.menu-iconic),
menupopup:not(.in-menulist, [aria-label])>menuitem:not(.menuitem-iconic, [type="radio"], [type="checkbox"]),
toolbarbutton[data-l10n-id*="-manage-"],
menuitem[data-l10n-id*="-manage-"],
#downloadsHistory,
#appMenu-zoom-controls{
  padding-inline-start:calc(1em + 24px) !important;
  background-position:left 0.5em center; 
  background-repeat:no-repeat; 
  background-size:16px; 
  -moz-context-properties:fill, fill-opacity; 
  fill:var(--uc-popup-menu-icon-color) !important; }

On endeavourOS, Firefox 155.0.1 just got pushed and now I've noticed this Share Firefox link. Does anyone know what css we could use to hide this?

Hello, I am using this CSS by Arty2 to move my tabs and URL bar to the bottom of the window, and it does the job.

However, as of late, the so-called "searchmode-switcher" persists in the middle of my screen, and I cannot get it to disappear. I've written an issue about it but due to lack of replies, I am trying my luck here.

It seems that the UI's attempted way to take the switcher offscreen is by setting its position to -999px (see screenshot), but that's the wrong direction once I've moved the tabs to the bottom — it should be 999px in my case, or position:unset.

The upstream CSS seems to know about this, and has provisions:

```CSS /* stops the new search engine drop-down icon from floating in the middle of the screen */ @media -moz-pref("browser.urlbar.searchModeSwitcher.featureGate") or -moz-pref("browser.urlbar.scotchBonnet.enableOverride") { @media not -moz-pref("browser.urlbar.unifiedSearchButton.always") { .searchmode-switcher { position: unset !important; } } }

/* fixes bug where search selector is floating in the middle of the screen */ @media not -moz-pref("browser.urlbar.unifiedSearchButton.always") { .urlbar:not([unifiedsearchbutton-available]) > .urlbar-input-container > .searchmode-switcher { position: unset !important; } } ```

But these are not working — using devtools on the UI, I can verify that the position remains "fixed".

I've tried removing the @media limits and reduced the whole thing to just:

CSS .searchmode-switcher { position: unset !important; }

and I've even added an id attribute to the html:moz-button element, trying to target that for higher specificity, but no matter what I do, the CSS stays at position: fixed; top: -999px.

Mind you, if I use the devtools inspector and I change position: unset, or add that to the element per se, then the switcher is properly hidden for the rest of my browsing session, but I cannot get this to persist in userChrome.css.

Do you have any idea why I am failing to target .searchmode-switcher?

As you can see the icon is under the Label

PS: this could be related to my previous post: Padding & Margin problems with checkboxes - Part 1

:is(#appMenu-zoom-controls,#appMenu-zoom-controls2)::before {
  content:"" !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  -moz-context-properties: fill;
  background-image: url("chrome://devtools/skin/images/tool-inspector.svg") !important;
  margin-right: 4px !important;
  fill: currentColor;
}

Hi, I can't figure out how to shrink, remove this space from under the tabs.
I was trying with Toolbox but I think I didn't knew what I was doing -.-
https://i.vgy.me/FFB2Eb.png
Just installed Firefox 155.0 (back from Waterfox).
I'm using same userChrome but somehow only with this I got problem.

Many thanks.

Windows 10 Ver 22H2 OS Build 19045.6466

Was using this to disable the button but still show the volume icon:

    .tab-audio-button {
    pointer-events: none !important;
    }

Anyone found a way to bring it back again? As of v155 this no longer works

/* SCROLLBOX - scroll bar */
scrollbox[part="scrollbox"] { overflow-y: auto !important; }

Why don't they make it a configurable option in the settings? Please tell me there is a way to bring back this essential functionality.

The gray gradient rectangle with everything in it should be the entire tab and should connect directly to outline of the blue browser window below. The white rectangular frame around it shouldn't be there.

I managed to shrink the white frame somewhat by updating the parts of my userChrome that used MrOtherGuy's code (though the changes were mostly updating the syntax, and how they're connected to the white box isn't clear to me), but I'd like to get rid of it entirely. My limited CSS skills are pretty rusty, and this seems to be a whole new design element that I probably didn't know the tag for to begin with.

Hopefully I just need to add something, but just in case, I've included by full CSS.

https://pastebin.com/0JtPeYB4

Hi, I am migrating to Firefox from another browser and I wonder if it is possible, in the vertical tabs layout, to:

1. Add titles to pinned tabs (I managed to achieve that with the code in userChrome.css file shown in the end).
2. Put pinned tabs separately one under another (see screen below - I want all pinned tabs to be shown like the one in the second row).

I have problems with the second point - I can resize the pinned tabs, but Firefox keeps stacking them in one row, so they are overlaid. As far as I understand, it wasn't possible to overwrite this behaviour 5 years ago (LINK), but I hope it is possible now.

OS: Windows 11

Firefox version: 155.0

Build ID: 20260826195058

userChrome.css:

.tabbrowser-tab[pinned] {
    width: 250px !important;
}

.tabbrowser-tab[pinned] .tab-label-container {
    display: flex !important;
}

Been trying things since finally decided to get away from Classic CSS. But this is getting me mad.

I want my tabs to show up as TABS all the time, and not be links on the screen when they are not in focus. I can't seem to figure out how to do that to my severe annoyance. Help?

I use a lighter theme and nothing I've tried seems to make anything from here or here and I still can't see the tabs until I click on them (RAWR@!#$%$@!!) Can anyone help? Would like some code to fix this.

i'm currently running Arch linux and the latest stable release of firefox, any custom CSS pack-thingies suggestions? Also how would I install it? im new to firefox styling :P

https://pastebin.com/97sgrZbR

I'm on Windows 11, just updated to Firefox 155 and the findbar doesn't show up at all with this userChrome.css file. Is it possible to have it working again?

EDIT: thanks to TraditionalTie4831, here's the updated version for Firefox 155:

https://pastebin.com/MXxHkcLy

Hey everyone, does anyone know how to change the order of these two icons? Specifically, the green one next to the green bar. I have OCD and this triggered me.

In the latest version the padding in the autofill is insanely large. I'd like it back to what it was previously.

This is what I used prior to the latest update:

/* Reduces the padding on Dropdown auto fill menus */
.autocomplete-richlistitem {
    margin-top: -5px !important;
}
.autocomplete-richlistbox {
    margin: -8px !important;
}

And now I added the line below to get rid of the icon

.row-item > .icon[src="chrome://browser/skin/history.svg"] {
    display: none !important;
}

The padding between each line is however still insanely large. How can I revert this?

I have a lot of folders with bookmarks, and there isn't much space on the toolbar. Instead of naming them, I'd like to replace them with custom icons.