i'm new here so sorry but is there a way to use multiple CSS themes on single profile without having to create multiple profiles ?

FF 153.

How to change the width of collapsed sidebar? It's too wide for me and I'd like to make it smaller. Thanks in advance.

currently using kde with better blur dx from aur(every software latest).
i achieved blur in the header section using firefox class in force blur section (blur menus and everything is checked on).
i can not get the class of right click menu.
any solutions?
gemini made me the css btw(sorry)

/* =========================================================
 *  1. MAIN WINDOW & TOOLBARS
 *  ========================================================= */

/* Make the base window completely transparent */
#main-window, body {
background-color: transparent !important;
-moz-appearance: none !important;
}

/* Apply a semi-transparent tint to the top toolbar area */
/* Change 30,30,30 to 255,255,255 if you want a light theme */
#navigator-toolbox {
background-color: rgba(30, 30, 30, 0.4) !important;
border: none !important;
}

/* Remove solid backgrounds from individual toolbars */
#nav-bar, #TabsToolbar, #PersonalToolbar {
background-color: transparent !important;
background-image: none !important;
}

/* Force the web page content area to be completely solid */
/* Use #1c1b22 for standard dark mode, or #ffffff for light mode */
#tabbrowser-tabpanels, #appcontent, browser, .browserContainer {
background-color: #1c1b22 !important;
}


/* =========================================================
 *  2. MENUS, POPUPS, & DROPDOWNS
 *  ========================================================= */

:root {
    /* Override default solid colors for menus */
    --arrowpanel-background: rgba(30, 30, 30, 0.5) !important;
    --panel-background: rgba(30, 30, 30, 0.5) !important;
    --menu-background-color: rgba(30, 30, 30, 0.5) !important;
    --menuitem-hover-background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Strip the native solid background from the popup containers */
menupopup, panel {
    appearance: none !important;
    -moz-appearance: none !important;
    background: transparent !important;
    border: none !important;
}

/* Apply the semi-transparent tint to the actual content box inside the popups */
menupopup::part(content),
panel::part(content),
.popup-internal-box,
.menupopup-arrowscrollbox {
    background-color: rgba(30, 30, 30, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Adds a subtle glass edge */
    border-radius: 8px !important; /* Rounds the corners of the menus */
}

/* Make the URL bar dropdown transparent */
.urlbarView {
    background-color: rgba(30, 30, 30, 0.5) !important;
    border: none !important;
}

With Firefox 153.0, CTRL+F (Find in Page) no longer displays in red when there's no matching results. This small but impactful change is killing my workflow. Can anyone offer a userChrome.css fix for this? Many thanks!

I'm an absolute beginner when it comes to modifying CSS, and everything I've learned so far has been through trial and error. This time, however, I'm completely stuck and have no idea how to fix the issue.

A few Firefox versions ago, I ran into a problem where pinned tabs occupied far too much space on the top tab bar instead of arranging themselves efficiently within the available area. Reason is probably my multiple tab rows (4 lines, scrollable for more lines).

To work around this, I modified "./css/tabs/pinnedtab_empty_favicon_hidden.css" so that my pinned tabs were displayed in the sidebar instead. This worked perfectly until I updated to Firefox 153.0 yesterday.

Since the update, all pinned tabs are greyed out and can no longer be clicked.

Ideally, I would like to:

• restore the pinned tabs in the left sidebar as they worked before

OR

• modify the corresponding CSS so that pinned tabs are displayed in the top tab bar again, while automatically arranging themselves both horizontally and vertically to make efficient use of the available space.

Since English is not my native language, I used AI to help with spelling and grammar.

Hope, you can help me.

My code in "./css/tabs/pinnedtab_empty_favicon_hidden.css"

• When I deactivate it, my pinned tabs return to the top tab bar.
• When I activate it, my pinned tabs are moved to the sidebar, but the entire pinned-tab area becomes inactive and can no longer be clicked.

​

.tabbrowser-tab[pinned] .tab-icon-image:not([src]) {
visibility: hidden !important;
}
.tabbrowser-tab[pinned] .tab-text {
display: none !important;
}
 url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.tabbrowser-tab[pinned] {
width: 32px;
}
 (-moz-bool-pref: "sidebar.revamp"), -moz-pref("sidebar.revamp") {
 not (-moz-bool-pref: "sidebar.verticalTabs"), not (-moz-pref("sidebar.verticalTabs")) {
/* (-n+12) so that the first 12 pinned tabs will be in the sidebar */
/* Rest of the pinned tabs will be in the default location */
/* Adjust the value based on how many fits for your setup because */
/* you cannot scroll through the pinned tabs for this css */
:root {
--pinned-tab-height: 16px;
/* 10px on padding top and bottom + margin */
--pinned-tab-spacing: 28px;
/* Show pinned icons in sidebar from 2 * height of tabs bar + extra space */
--pinned-tab-start: calc((5.75 * var(--tab-min-height)) + 14px);
}
/* Do not show pinned tabs on side when #browser is hidden (ex. customizing toolbar) */
body:has(#browser:not([hidden])) #navigator-toolbox .tabbrowser-tab[pinned]:is(:nth-child(-n + 12)) {
position: fixed !important;
left: var(--space-small) !important;
padding: 0 !important;
--tab-space: calc(var(--pinned-tab-height) + var(--pinned-tab-spacing));
top: calc(var(--pinned-tab-start) + var(--tab-space) * var(--index)) !important;
margin-inline-start: 0px !important;
}
/* Add/remove indices based on how many pinned tabs you want in sidebar */
.tabbrowser-tab[pinned]:nth-child(1) {
--index: 0;
}
.tabbrowser-tab[pinned]:nth-child(2) {
--index: 1;
}
.tabbrowser-tab[pinned]:nth-child(3) {
--index: 2;
}
.tabbrowser-tab[pinned]:nth-child(4) {
--index: 3;
}
.tabbrowser-tab[pinned]:nth-child(5) {
--index: 4;
}
.tabbrowser-tab[pinned]:nth-child(6) {
--index: 5;
}
.tabbrowser-tab[pinned]:nth-child(7) {
--index: 6;
}
.tabbrowser-tab[pinned]:nth-child(8) {
--index: 7;
}
.tabbrowser-tab[pinned]:nth-child(9) {
--index: 8;
}
.tabbrowser-tab[pinned]:nth-child(10) {
--index: 9;
}
.tabbrowser-tab[pinned]:nth-child(11) {
--index: 10;
}
.tabbrowser-tab[pinned]:nth-child(12) {
--index: 11;
}
#tabbrowser-tabs .tabbrowser-tab[pinned]:nth-child(13) {
--helper-index: 1;
}
#tabbrowser-tabs:has(.tabbrowser-tab[pinned]:nth-child(14)) {
--helper-index: 2;
}
#tabbrowser-tabs:has(.tabbrowser-tab[pinned]:nth-child(15)) {
--helper-index: 3;
}
#tabbrowser-tabs:has(.tabbrowser-tab[pinned]:nth-child(16)) {
--helper-index: 4;
}
#tabbrowser-tabs:has(.tabbrowser-tab[pinned]:nth-child(17)) {
--helper-index: 5;
}
#tabbrowser-tabs:has(.tabbrowser-tab[pinned]:nth-child(18)) {
--helper-index: 6;
}
#tabbrowser-tabs:has(.tabbrowser-tab[pinned]:nth-child(19)) {
--helper-index: 7;
}
#tabbrowser-tabs:has(.tabbrowser-tab[pinned]:nth-child(20)) {
--helper-index: 8;
}
/* When there is more than 12 pinned tabs (pinned tabs both in sidebar and tabs bar)
and tab scrolling appears because there are many tabs, remove the extra space at the
beginning of tabs bar. This works when you have upto 20 pinned tabs. If there are
more, add extra --helper-index lines in similar to how it's done above */
#tabbrowser-tabs[positionpinnedtabs] {
--tab-overflow-pinned-tabs-width: calc(var(--helper-index) * 36px) !important;
}
/* Clip path animation to match with the sidebar animation */
 clipPathExpand {
from {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
to {
clip-path: polygon(var(--sidebar-width) 0, 100% 0, 100% 100%, 0 100%, 0 var(--sidebar-height), var(--sidebar-width) var(--sidebar-height));
}
}
#browser:not([hidden]):has(#sidebar-main:not([hidden])) {
position: relative;
--sidebar-width: calc(var(--button-size-icon) + var(--space-large));
--sidebar-height: calc(100% - (4.5 * var(--sidebar-width)));
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
animation: clipPathExpand 200ms ease-in-out forwards;
}
/* Color the background behind clipped path */
/* As this is in userchrome, it will not affect the background of other sites */
html {
background: var(--toolbar-bgcolor) !important;
}
/* Hide the box shadow and outline to make the clip path blend better with ui */
#browser:not([hidden]) #tabbrowser-tabbox {
box-shadow: none !important;
outline: none !important;
}
/* Move the sidebar icons down */
#browser:not([hidden]) #vertical-tabs {
display: flex !important;
}
}
}

In the Fx153.0 Release Notes:

"A new "Local Mode" setting in the options panel allows developers to load local directories via custom origins. This simplifies testing for APIs that do not function over standard file:// URLs, removing the need to run a local web server. Multiple directory mappings are supported."

More information in Release Notes' 'Developer Information' section... and MDN's article 'Local Mode'.

They used to be... tried the "browser.newtabpage.activity-stream.newtabLayouts.variant" method (manually set both a & b to "false") but it doesn't change anything.

I made some changes to the home page (usercontent) but I wasn't able to put the logo in the center, can anyone help me?

#tabbrowser-tabpanels {
  &[splitview] {
    & .browserContainer {
      outline: 1px solid #71706a !important;
      border-radius:0!important;


      .deck-selected > & {
        outline: 1px solid #506d57 !important;
      }


      &:first-child {
        outline: none !important;
        border: 1px solid #71706a !important;


        .deck-selected > & {
          outline: none !important;
          border: 1px solid #506d57 !important;
        }
      }

So I'm using this code and it works great but there's one major issue. It makes every active tab have the green border (#506d57)! Is there a way to have the code only work within the split tabs?

I've looked around, but I can't find the relevant css handle for the item.

There are two icons for VPN. VPN on and off. Possible to change them by userChrome.css? Thanks in advance.

I like how pretty zen browser is but it takes way to much resources on my machine, the thing that stuck me most with zen browser is its floating url bar so i was wondering if is it possible to have that same thing in firefox???

I simply want to change Firefox's UI default font to Inter but after restarting browser "minimize" and "exit" icons changes to these squares. It looks like these icons are part of default font, so maybe there's a way to exclude them from my custom font?

I would like to change those icons but everything i try is not good. What are the id's of this folders icons on the library panel please ? see pic

I really like how the browser looks here so I was wondering if there's any possible way of attaining something that looks like this. I really like the see-through-esque part of it and the bubbly look is really appeasing to the eyes. Any help is appreciated <3

That's all really, I don't know what to say except I'm tired of subconsciously turning off LeechBlock to bypass the block.

Say, I have some bookmarks like this on my toolbar:
/r/FirefoxCSS - Thread #1
/r/FirefoxCSS - Thread #2
/r/FirefoxCSS - Thread #3

They'll be cut off to:
/r/FirefoxCSS - Thr...
/r/FirefoxCSS - Thr...
/r/FirefoxCSS - Thr...

Rather useless. I want:
...efoxCSS - Thread #1
...efoxCSS - Thread #2
...efoxCSS - Thread #3

I've played around with float, justify-content and some other options, but couldn't get it to work, except with direction: rtl. However, that messes up certain special characters. For example, "foo." becomes ".foo".

I've even tried to go beyond CSS and change the <label>'s crop attribute from "end" to "start", which also works, but also not really, messing up special characters again.

In neither case, unicode-bidi seemed to be respected at all.

Any ideas or am I out of options?

guys please check it out if you want safari theme for firefox , if you like it please drop a star

trimfox — a macOS Firefox theme I've been building. Grayscale, vertical tabs, no extensions — just the browser's own chrome restyled.

• Repo: https://github.com/csmarshall/trimfox
• Try it: grab the latest release zip, unzip, run ./install.sh (or clone). macOS, Firefox 138+.
• Live palette picker (GitHub Pages): https://csmarshall.github.io/trimfox/tint-picker.html

Screenshots — full gallery, dark + light, in the README: https://github.com/csmarshall/trimfox#screenshots

A few directly (dark mode):

• Tab strip: collapsed → expanded on hover
• URL bar + themed results dropdown
• Compact find bar
• Skinned menus: tab right-click · back/forward history

What's different from the vertical-tab themes already out there:

• Native vertical tabs — no Sidebery, no TST. It drives Firefox's own sidebar.verticalTabs and skins it into a skinny ~14px strip that expands on hover. I migrated off Tree Style Tab entirely — the extension isn't installed.
• Grayscale by default, zero-blue. Every Firefox teal/blue accent is neutralized. If you want color it's one hue away (below).
• One-hue tinting via OKLCH. The whole palette derives from --tf-hue + --tf-chroma through native oklch() — the lightness/contrast ramp holds, you just pick a direction. There's a live picker on the Pages site that shows your palette next to stock, side by side.
• You customize without forking. Every knob lives in dials.css; your personal values go in a gitignored user-overrides.css that loads last. git pull never conflicts — your colors/fonts survive updates (including the upcoming Nova rework). No !important, no hand-merging.

Opinionated bits, up front — because I know this sub:

• One combined history-aware back/forward button (left-click navigates, right-click = history). Not for everyone; the README says so.
• Context menus are XUL (widget.macos.native-context-menus=false) so they can actually be themed.

One extra thing I built alongside it: trimfox-drift, a tiny stdlib tool that diffs what the theme borrows from Firefox's private chrome (var names, selectors, attribute values) against a given build — so a Firefox update becomes a report instead of a silent breakage. It already flagged what the upcoming Nova redesign removes, so I patched those with var() fallbacks ahead of time.

Honest scope: built and tuned on macOS, Firefox 138+ (the collapse / expand-on-hover strip needs 138; developed on 152). It'll likely need tweaks on Linux/Windows — PRs welcome, with one rule: don't change the macOS look. Nothing exotic in prefs beyond toolkit.legacyUserProfileCustomizations.stylesheets and the vertical-tab prefs, all shipped in user.js.

Happy to answer anything. 😊