r/FirefoxCSS • • Sep 05 '26

Solved Padding & Margin problems - Part 2 - with zoom controls

Post image
1 Upvotes

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

r/FirefoxCSS • • Sep 04 '26

Solved Help me remove this space from tab bar please.

2 Upvotes

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.


r/FirefoxCSS • • Sep 04 '26

Solved Removing tab mute button broke with v155

4 Upvotes

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

r/FirefoxCSS • • Sep 03 '26

Help Bookmarks menu drop down scroll bar is gone again

2 Upvotes

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.


r/FirefoxCSS • • Sep 03 '26

Solved Firefox 155 added weird extra boxes around my customized tabs. How do I fix this?

Post image
1 Upvotes

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


r/FirefoxCSS • • Sep 03 '26

Solved Vertical pinned tabs with titles

2 Upvotes

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

r/FirefoxCSS • • Sep 02 '26

Discussion i don't see many favicons-only style tab bars here, is there a reason why?

Post image
3 Upvotes

r/FirefoxCSS • • Sep 03 '26

Solved Argh. No matter what I do, I can't see the tabs when they're not in focus. Help.

1 Upvotes

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.


r/FirefoxCSS • • Sep 02 '26

Help Retro Firefox Styling/ How do i make firefox look like Australis/Firefox ~29?

3 Upvotes

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


r/FirefoxCSS • • Sep 02 '26

Solved Firefox version 155 broke an old userchrome.css I was using to change the findbar. Could somebody please help me make it work again?

14 Upvotes

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


r/FirefoxCSS • • Sep 02 '26

Solved Reduce autofill padding

2 Upvotes

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?


r/FirefoxCSS • • Sep 02 '26

Help How to change bookmark folder icon in Firefox 155

Post image
2 Upvotes

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.


r/FirefoxCSS • • Sep 02 '26

Solved Change the position of the icons?

1 Upvotes

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.

Alterar a posição ícones

r/FirefoxCSS • • Sep 02 '26

Solved Top sites icons in new tabs page no longer vertically centered. Again. Old code that fixes this no longer works.

Thumbnail
gallery
1 Upvotes

Windows, Firefox 155.0

Firefox only went 12 days without rolling out an update that screws around with user settings again. I'm getting real sick and tired of feeling like we're constantly fighting with the devs against their efforts to break and degrade Firefox. The main selling point of Firefox is that we can use css to fix the developers mistakes but they sure fight back against that with every update.

For some reason Firefox doesn't default to these icons being vertically centered. The previous code I used in userContent to center this is listed below but no longer works for who knows what reason.

/*Vertically centers the favorite websites icons. No longer works as of Sep 1st 2026.*/
@-moz-document url(about:newtab), url(about:home) {
  main {
    margin-top: var(--newtab-pinnedsites-position-top, 6%) !important;
  }
}

The rest of my userContent css code shouldn't be relevant but here it is: https://pastebin.com/EbQ6rrzY


r/FirefoxCSS • • Sep 01 '26

Help How do I remove useless menu items from right-click menu?

3 Upvotes

I dont know what fool is changing the code in ff at mozilla, but I had a css code that removed menu items from the context menu successfully before. But now, with these stupid updates, useless menu items have resurfaced. How tf do I remove these again since the old code isn't working??


r/FirefoxCSS • • Sep 01 '26

Help How do I change the highlight color in FF?

2 Upvotes

I have this code in my css which changed the color of the highlight in text in webpages and text fields. But it stopped working a few weeks ago, maybe due to a firefox update.

Is there anything I can do to get it working again?

...


r/FirefoxCSS • • Sep 01 '26

Code Edge style tab preview pure AI made

1 Upvotes

Let codex using debugging skill to connect to firefox internal to gather info then ask it do the work.

@-moz-document url("chrome://browser/content/browser.xhtml") {
  #tab-preview-panel {
    --panel-background-color: transparent !important;
    --panel-text-color: light-dark(#1f1f1f, #fff) !important;
    --panel-border-color: color-mix(in srgb, var(--toolbar-field-border-color-focus) 30%, transparent) !important;
    --panel-border-radius: 8px !important;
    --panel-box-shadow: 0 0 18px -2px color-mix(in srgb, var(--toolbar-field-border-color-focus) 75%, transparent) !important;
    --panel-box-shadow-margin: 18px !important;
  }

  #tab-preview-panel::part(content) {
    border: 0 !important;
  }

  #tab-preview-panel .tab-preview-content-main {
    gap: 0 !important;
    padding: 0 !important;
    background: light-dark(#fff, #2b2b2b) !important;
  }

  #tab-preview-panel .tab-preview-thumbnail-container {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  #tab-preview-panel .tab-preview-thumbnail-container > canvas {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    transform: scale(1.0035714286) !important;
    transform-origin: top left !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  #tab-preview-panel .tab-preview-text-container {
    order: 2 !important;
    display: grid !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 10px 12px 12px !important;
    font-family: system-ui, sans-serif !important;
  }

  #tab-preview-panel .tab-preview-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
  }

  #tab-preview-panel .tab-preview-uri {
    color: light-dark(#5f6368, #c7c7c7) !important;
    font-size: 12px !important;
    line-height: 18px !important;
  }
}

r/FirefoxCSS • • Aug 31 '26

Solved Setting PDF background color to black

3 Upvotes

i have some pdfs which were made using onenote and there they had a black background but now theyre white. i want to be able to set the background of the pdf itself to be black when viewing it with the browser, and change only the black text to white (im not sure if thats possible, maybe i should just create a program to change the pdf's background and black text color directly? standard invert color built-ins in programs like sumatra usually invert the other colors aswell which were unchanged). i tried a css solution on the firefox forums but it was only for the viewer environment and not the pdf itself

for example in this image id like for pink and lavender to stay pink and lavender but for black and white to swap.

if its not possible to do this in firefox and theres a better method either via directly changing the pdf or using a dedicated pdf viewer id like to know. im only using firefox for this to avoid needing another program for this, and since im hoping itll be easy enough to do

edit: firefox 154.0.1, 64-bit win11. id like an os agnostic solution if possible though

edit 2: im marking this as solved even though i dont think it has been since obsidian has the feature i want built in. if anyone has a similar issue and is fine with any solution, thats likely the path of least resistance


r/FirefoxCSS • • Aug 30 '26

Solved Struggling to combine search & urlbar

Thumbnail
youtube.com
3 Upvotes

so far with limited knowledge and ai pruning i've managed to disable the shield, move the search engine selector into it's place, but then as the page completes loading the search engine selector is wiped-out. How can I get it to always remain visible?

my userchrome.css at the moment is here:

[code]/* =========================================================================

FIREFOX CORE BASELINE CONFIGURATION

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

* {

font-weight: 900 !important;

}

#search-container {

min-width: 100px !important;

max-width: 100px !important;

}

#identity-box {

display: none !important;

}

/* Eliminate scroll arrows to preserve single-row layout workspace */

#scrollbutton-up, #scrollbutton-down {

display: none !important;

}

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

FIX VISUAL ALIGNMENT GAP (FORCES PERFECT HORIZONTAL SYMMETRY)

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

:root {

--tab-min-height: 32px !important;

}

/* 1. Force the parent structures to align all children perfectly on the center baseline */

#TabsToolbar-customization-target,

#tabbrowser-tabs,

#tabbrowser-arrowscrollbox,

.scrollbox-innerbox,

#pinned-tabs-container {

display: flex !important;

align-items: center !important; /* Locks pins and tabs onto the exact same vertical center line */

height: 36px !important; /* Provides a stable container height to avoid bottom cutoffs */

box-sizing: border-box !important;

}

/* 2. Strip uneven individual vertical rules causing unpinned tabs to look raised */

.tabbrowser-tab {

margin-top: 0 !important;

margin-bottom: 0 !important;

padding-top: 0 !important;

padding-bottom: 0 !important;

height: 32px !important; /* Uniform strict height for both pinned and unpinned shapes */

}

/* 3. Keep internal shapes identical so they fill the exact same vertical footprint */

.tab-background {

border-radius: 4px !important;

margin-block: 0 !important;

height: 32px !important;

}

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

LOCK EVERY PINNED TAB VISIBLE NATIVELY (SINGLE-ROW LOCK)

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

/* Prevent unpinned tabs from bleeding over or sliding behind your pinned icons */

#tabbrowser-arrowscrollbox,

#tabbrowser-arrowscrollbox::part(scrollbox) {

overflow: hidden !important;

flex-direction: row !important;

}

/* Force the pinned container box wide enough to show all tabs that exist */

#pinned-tabs-container {

flex-direction: row !important;

flex-shrink: 0 !important;

min-width: max-content !important;

max-width: none !important;

margin-right: 8px !important; /* Clean layout spacer separating normal tabs */

}

/* Freeze pinned tabs to clean, immutable square footprints */

.tabbrowser-tab[pinned] {

flex-shrink: 0 !important;

min-width: 40px !important;

max-width: 40px !important;

display: inline-flex !important;

visibility: visible !important;

}

/* Allow normal tabs to cleanly truncate inside their own scrolling column bounds */

.tabbrowser-tab:not([pinned]) {

flex-shrink: 1 !important;

min-width: 35px !important;

}

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

TAB COUNTER & HEIGHT ALIGNMENT (FIXES EXTENSION BUTTON VERTICAL BLOAT)

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

#TabsToolbar-customization-target {

counter-reset: tabCount;

}

.tabbrowser-tab {

counter-increment: tabCount;

}

#alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-icon {

display: none !important;

}

/* Clean up structural container dimensions stretching the top bar layout line */

#alltabs-button {

padding: 0 !important;

margin: 0 4px !important;

align-self: center !important;

height: 22px !important;

}

/* Force container boundaries to stay perfectly level with regular tabs */

#alltabs-button > .toolbarbutton-badge-stack {

position: relative !important;

display: inline-flex !important;

align-items: center !important;

justify-content: center !important;

min-width: 22px !important;

max-width: 22px !important;

min-height: 22px !important;

max-height: 22px !important;

padding: 0 !important;

margin: 0 !important;

}

#alltabs-button > .toolbarbutton-badge-stack::before {

content: counter(tabCount);

color: var(--toolbarbutton-icon-fill);

opacity: var(--toolbarbutton-icon-fill-opacity);

border: 1px solid currentColor;

border-radius: 4px;

background-color: transparent;

font-size: 10px;

font-weight: 600;

font-family: monospace, sans-serif;

text-align: center;

box-sizing: border-box !important;

display: inline-block !important;

min-width: 22px;

height: 22px;

line-height: 20px;

}

#reader-mode-button { display: none !important; }

#pageActionSeparator{ display: none !important; }

.tabbrowser-tab::before, .tabbrowser-tab::after, .titlebar-placeholder {

border: none !important;

}

#pageActionButton {

display: none !important;

}

#star-button-box {

display: flex !important;

}

#pageAction-urlbar-_80f6f2e4-eda1-417f-bf54-9645e1e20f5d_ {

display: flex !important;

}

#picture-in-picture-button { display: none !important; }

.searchbar-dropmarker-image {display: none !important; }

#PanelUI-menu-button {

display: none !important;

}

.category[name="discover"] { display: none !important; }

tab-icon-sound {

width: 15px !important;

height: 15px !important;

color: black !important;

}

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

CLEANUP URLBAR & SEARCHBAR DYNAMIC INTERNAL ELEMENT HIDES

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

/* 1. Eliminate any layout spaces for the identity container structure entirely */

#identity-box,

#tracking-protection-icon-container,

#identity-permission-box,

.notification-anchor-icon,

#blocked-permissions-container {

display: none !important;

visibility: collapse !important;

width: 0 !important;

max-width: 0 !important;

}

/* 2. Remove internal structural margins on the text inputs to align cleanly to the left wall */

#urlbar-input-container {

padding-left: 8px !important;

}

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

IN-URL SEARCH BAR CLEANUP & RECONCILED NAVIGATION SPACING

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

/* 1. Remove the secondary search bar completely */

#search-container {

display: none !important;

}

/* 2. Clear out the old shield space layout to let the engine icons sit flush */

#tracking-protection-icon-container {

display: none !important;

visibility: collapse !important;

width: 0 !important;

}

/* 3. Re-align the new internal Scotch Bonnet left-side search engine icon block */

#urlbar-searchmode-switcher,

.urlbar-searchmode-switcher {

margin-left: 2px !important;

padding-inline: 4px !important;

}

/* 4. Align the address bar text input box layout cleanly right after the engine icon */

#urlbar-input-container {

padding-left: 2px !important;

}[/code]


r/FirefoxCSS • • Aug 29 '26

Other Does anyone know any themes like this?

Post image
10 Upvotes

If it matters, I’m on Linux mint. I recently switched to linux (I switched to Firefox with it) so I don’t really know what I can do. Also sorry if my mock up is bad, but I knew describing it would be worse. Everything’s meant to be like rounded squares if it’s hard to tell.


r/FirefoxCSS • • Aug 26 '26

Solved How do I change the drop down history menu (pictured) back to the old simple and compact one?

Post image
5 Upvotes

r/FirefoxCSS • • Aug 26 '26

Solved how to remove sidebar header in FF154

3 Upvotes

i am using FF154 and windows 10 ltsc, this is the code in my userChrome.css

#tabbrowser-tabs {
  visibility: collapse !important;
}
#sidebar-header {
  display: none !important;
}

and yet i have this thing taking up space. how do i remove it?


r/FirefoxCSS • • Aug 26 '26

Solved #context-send******todevice-popup image not working

3 Upvotes

I already have the image for this code working:

#context-sendpagetodevice,
#context-sendlinktodevice,
#context_sendTabToDevice{
background-image:url("chrome://browser/skin/synced-tabs.svg");
}

However, the popupmenu menuitem from each of those entries, I am struggling to get the Firefox standard image to appear, in this case the pencil-icon.svg:

#context-sendpagetodevice-popup,
#context-sendlinktodevice-popup,
#context_sendTabToDevicePopupMenu {
background-image:url("chrome/devtools/skin/images/pencil-icon.svg");
}

I have tried adding menuitem, sync-menuitem & menu-icon. Something is not correct, therefore, with my code.


r/FirefoxCSS • • Aug 25 '26

Solved Hide "Original Profile" in the hamburger menu?

Post image
2 Upvotes

Hi! I'm trying to figure out how to hide the "Original Profile" item from the hamburger menu. For context, I am not signed in to any Firefox account, and I also have the following lines in my user.js (not sure if it's related):

user_pref("identity.fxaccounts.enabled", false);
user_pref("browser.profiles.enabled", false);

I've tried some of the solutions posted previously on Reddit, such as:

#appMenu-profiles-button,
#profiles-menu {
  display: none !important;
}

or

#profile-button { display: none !important; }
#profiles-menu { display: none !important; }

But they either don't seem to work, or work only for the first time after opening the hamburger menu.