Post all questions and feedback into this discussion thread!

[Aris-t2]

Make sure you have updated your configuration to the most recent version of this projects files and are using the latest version of the "options" required by your Firefox version >before< reporting problems!

Continued from #3, #41, #88, #109, #133, #163, #189, #211, #241, #273, #308, #368, #404, #417, #454 and #606

Instead of opening new "issues" for general talk we can use this area for discussions, feedback and questions. Open new "issues" for real bugs and problems.

Custom JS scripts to restore more classic features
https://github.com/Aris-t2/CustomJSforFx

Things this project will not target/recreate

• a CTR like plugin/application to generate ready-to-use CSS
• curved tabs (thanks those are finally gone!)
• old complete themes

Things not possible with CSS

• more toolbars like add-on/status bar (CSS can not create new toolbars)
  • displaying full sized status popup below window content is possible
  • bookmarks toolbar at windows bottom is possible (simulated addon-bar)
• new buttons (CSS can not create new buttons)
• additional menuitems (CSS can not create new items)
• custom/new/different functions for buttons/menuitems/menus
• activity indicator (see 'custom JS scripts')
• preference/options window
• additional location bar
• favicon in location bars identity box (see 'custom JS scripts')
• moving menubar items to a different toolbar
• restart button (see 'custom JS scripts')
• ... many more

[nollinvoyd]

Hi Aris-t2,

v4.6.9

My address bar is vertically off center. I've made vertical space adjustments for my toolbars. I mention that in case that is related?

[TroudhuK]

(repost)

Hi,

Multirow tabs + classic drop indicator + tabs_below_navigation_toolbar (+ ...), and the tab drop indicator is clipped by the tab content (even with z-index 10000), do you know what to do?

(Tab drop indicator with "multirow tabs" works well with the script https://github.com/TroudhuK/userChromeJS/blob/master/MultiRowTabLiteforFx.uc.js, the only problem I have is what I show on the capture.)

[Aris-t2]

See #606 (reply in thread)

I have no fix for this.

[AbdAbd10]

isn't this the same problem that custom_backforward_connected_to_location_bar have that the z-index stop working after the update

[Aleksandra0056]

The "go_button_in_location_bar_hidden.css" hides the Go button, but what about adding a CSS feature (CSS file) with the opposite effect? With effect which would make the Go, button in the address bar always show even if the address bar is unfocused?

It would be very handy to have it because users would not need to click on the location bar to show a pop-up if they already have the URL typed...

I propose the name "go_button_in_location_bar_always_show.css"

[wjtk4444]

Not sure if this is the right place to ask, but I haven't found a better one. It's not really related to this repository in particular, rather to a recent change in Firefox that broke my own custom css. If you like the idea of status in urlbar you're very much welcome to add it to the long list of your own tweaks, otherwise I'm just interested in learning if there's a simple way to restore z-positioning of 2 elements from a couple browser updates ago.

In one of the recent firefox updates (a month? 2 months maybe?) #statuspanel ended up below #urlbar and I've been wondering if it's possible to revert that change using z-index property in userChrome.css (or by some other means). I'm using a custom css that moves #statuspanel-label on top of the urlbar input, effectively covering the urlbar's content with status info instead (when there's any, so basically page loading and hovering over links). Doubt if it's worth sharing a snippet as it's a dirty hack tailored specifically for the window size and browser theme I've been using, but it did work flawlessly for years with just minor changes when megabar got introduced. It still works, execpt for the part where urlbar content is now on the top, making the visible result into 2 lines of text mashed together.

I did try setting various elements to low/negative z-index values as well as high values for others, but to no avail. Hoping that someone with a better knowledge of Firefox UI can give me a hint or two :)

[wjtk4444]

I ended up just removing the popover property with js (which I missed earlier and is most likely the root of my custom css urlbar-related problems)

(function() {
    try {
        document.getElementById('urlbar').setAttribute('popover','auto');
    } catch(e){
        console.log(e)
    }
})();

Not sure if plain CSS could do the trick as well

[rddim]

Hello @Aris-t2,
How can I reduce the height of the 1. Border, 2. URL/Address bar and 3. Bookmarks bar?

For the addon bar I use

:root {
	--addonbar_height: 22px !important;
}

[trofey]

hello again. i asked how to remove tab scroll buttons, you adviced me to add this

#scrollbutton-up[part="scrollbutton-up"][keyNav="false"][data-l10n-id="overflow-scroll-button-backwards"][tooltiptext],
#scrollbutton-down[part="scrollbutton-down"][keyNav="false"][data-l10n-id="overflow-scroll-button-forwards"][tooltiptext] {
display: none !important;
}

and this

#scrollbutton-up[part="scrollbutton-up"][tooltiptext],
#scrollbutton-down[part="scrollbutton-down"][tooltiptext] {
display: none !important;
}

first one workes, but if i drag tab it doesnt scroll, how to fix it?

[joefiesta]

@ Aris-t2 : I don't understand the format of this forum. Why all the articles/questions smashed together into one github entry? For example, when I read the above (about scrollbutton removal) I can not find that user's original question.
(Yes, I will admit other forums have the opposite problem. So many individual questions and sooooooo many asking the same thing over and over again, e.g. Autohotkey.)

[Speravir]

@joefiesta In GitHub there is an area for issue tickets and another for discussions. Right now we are in the latter.

In issues when you write a comment it will be placed on its own in first level. But in discussions there are also replies possible which will appear right below the comment which was replied to, slightly indented and with a different background. For instance, you’ve replied to the question about the scroll arrow buttons, and I just now add a reply to you.

You, instead, should have better used the “Add a comment” field slightly deeper, but I am answering you and so for me using the “Write a reply” is the right choice. (Don’t mind, I had to understand this myself in the past.)

@trofey had asked under the slightly different name @trophhy in the prior, now closed discussion, see on Dec 2, 2024.

[joefiesta]

Thx. I get it. One issues per problem is nicer, but it has the problem of creating hundreds or thousands of separate issues, for example Autohotkey's forum. l
Sadly, that forum has thousands for issues and so many are about the same problem.
they don't seem to understand the value of improving documentation, especially in regard to supplying example

thanks for you reply.
Joe P

[nollinvoyd]

I know custom buttons are not supported here, but I have this one, aboutaddons-button.uc.js, that just stopped working/appearing in Fx 134.

Can I advice about where I might go to get help? Thanks

[Speravir]

We are still in the wrong repository, but I referred to a button for about:addons, as well. The linked script has just to be adapted.

[nollinvoyd]

We are still in the wrong repository, but I referred to a button for about:addons, as well. The linked script has just to be adapted.

So the about:config scripts need to be adapted for about:addons? Are there any plans for this? Are you suggesting I continue my conversation over there?

[Speravir]

So the about:config scripts need to be adapted for about:addons?

Yes, as is written in the beginning of the linked script.

Are you suggesting I continue my conversation over there?

Yes, if you still think you need this.

[nollinvoyd]

So the about:config scripts need to be adapted for about:addons?

Yes, as is written in the beginning of the linked script.

Are you suggesting I continue my conversation over there?

Yes, if you still think you need this.

I tried to edit about_button.uc.js following the instructions.

I don't know what I did wrong. I posted over there.

[Speravir]

… and the link is Aris-t2/CustomJSforFx#127.

[SerhiiSN]

Hi Aris-t2,

Firefox 128.6.0esr
CustomCSSforFx v4.6.9

I use TABS BELOW MAIN CONTENT (TABS ON BOTTOM), /css/tabs/tabs_below_main_content.css.
The page is displayed normally.
But the tabs themselves are large and asymmetrical, so I include /css/tabs/default_tabs_reduce_height.css
In this case, the contents of the window appear behind the tab.
You can easily check this by hovering the cursor over any text containing a link - the link will appear below.

[SerhiiSN]

In black theme TAB with /css/tabs/default_tabs_reduce_height.css, is transparent.

[Aris-t2]

Make sure you are using tabs_below_main_content_fx128-132.css, if you are still on Fx 128.

[nollinvoyd]

Is it possible to move the "Zoom" entry to the top of the menu

[Speravir]

You better should have mentioned that this is the main panel menu.

Add this to your userChrome.css system:

#appMenu-zoom-controls {
	order: -1 !important
}

If you want to re-order more items (including separators) it gets more difficult – or at least effortful.

[nollinvoyd]

Thank you!

You mention the main panel menu. I thought the image was self explanatory. For future reference, where else could I have been referring to?

[Speravir]

I actually did not think of the fact that Aris explicitly asks for screenshots, but in general I consider it better behaviour also mentioning the area of the request in the text. It’s, for instance, possible that the image could not be loaded.

For me: I do not use the panel menu very often and had to look first, whether it was this menu. Think of a situation, where the other side has to guess and is wrong in first or even second instance. This creates bad mood.

[joefiesta]

Just updated to FF 135. I am using a Windows HIGH CONTRAST THEME. The following DOES NOT OCCUR when not using HIGH CONTRAST mode.

The FONT COLOR of the ACTIVE TAB is now 9EB874, a bland, pale grayish. It is now hard to read the tab. With FF135 it was BLACK. How do I get it back to BLACK? I have searched ALL the .css files, and nowhere therein do I find "9EB874". Nor is it a color I have defined for any of the HIGH CONTRAST colors.

attached is my modified color_variables.css file, if that helps.
color_variables.4.5.2.JSP.txt

[Aris-t2]

Is this color part of this project or does this also happen without any CSS files?
Could you provide some screenshots?

[joefiesta]

A. I went from FF 136.04 to 139.01 since first asking this question.
Some colors are different and so I start anew with my explanation.
The color of the FONT of my ACTIVE TABS is now 0xFFFFFF.

 1.  When I use no Userchrome .CSS.
 2.  When I use only Aris 4.5.2
 3.  When I use my .CSS  additions.
 These are all  with Windows10 high-control mode and FF dark reader add-on turned on.

 Note: for cases 1 & 2, the tabs fade from 0xFFFFFF toward black.

B. The font color for INACTIVE TABS is also 0xFFFFF for cases 1 & 2 above.
The font color for INACTIVE TABS in case 3 is 0x035F81 (as shown in the code below).

 The code below was added to  ~Chrome\css\tabs\tabs_below_navigation_toolbar.JSP.css

 Here is one of the additions I made to ~Chrome\css\tabs\tabs_below_navigation_toolbar.css

#TabsToolbar {
position: absolute;
display: block;
bottom: 0;
width: 100vw;
background-clip: padding-box;
/* color: var(--toolbar-color); / / original /
color: #035F81 !important; / dark teal / / jsp /
background-color: #DDAACC !important; / medium mauve * / /* jsp */
z-index: 2;
}

So, basically, all I want to know is:

how do I make the fonts for ALL the possible various tabs (active, inactive and what the others are)
color 0x035F81?

please excuse the lack of code formatting. the "add code" button wasn't working for me today.

[CP1832]

Hi guys:

I'm using container tabs with tab text matching the container tab:

However, after updating to Firefox 135, when selecting a container tab, the tab text color switches from the container color to black:

Is there any way to revert back to the tab text being the same as the container color?

[Aris-t2]

You are looking for this:

.tabbrowser-tab[usercontextid] .tab-text {
  color: var(--identity-icon-color) !important;
}

[Speravir]

In Fx135 there has for addon buttons another level in the DOM – a box with class name unified-extensions-item-row-wrapper – been inserted which apparently breaks more compact button mode.

I’ve for now added this style to my userChrome.css:

:root[uidensity="compact"] .unified-extensions-item-row-wrapper {
	margin-inline: -2px !important
}

May be there is a better way, but it works for me.

Edit:
For another solution that may work confer Camp-Firefox.de user Horstmann in posting from 8 Februar 2025, 10:48. He suggests the following

toolbar .toolbaritem-combined-buttons > .unified-extensions-item-row-wrapper > .toolbarbutton-1 {
    padding-inline: 0 !important;
}

[Aris-t2]

Thanks. I will add this to next update.

[gitmeister]

I added the style above to the bottom of my userChrome.css but i'm still stuck with the same issue:

Edit: Did a clean re-Installed of the code and it significantly improved. Added a few more options and am back to normal. Sorry for the false alarm. Thanks

[Speravir]

Just as first impression and reaction:

In Fx 136 something has changed regarding the tab audio icons, so that the rules do not work anymore.

There is still .tab-icon-overlay, but it is set to display:none resulting in UserChrome rules without effect. On the other hand the audio icons now seem by default not anymore to overlay the site favicon.

And: I have not noticed it yet, but there seems now to exist a .all-tabs-mute-button which could some colours, as well.

Update: Oh, see in Camp Firefox (in German): message from 5 March 2025, 17:07 and answers from the same day. Apparently, some things are not possible anymore with userChrome.css alone. There is a rule suggestion I did not try myself yet, but is marked as most helpful answer: 5 March 2025, 19:11.

[Aris-t2]

A direct translation and copy & paste of the above German code works for me. Except it gives a ghost white SQUARE shadow box on hover. Ref below screenshots. This square hover effect spoils it, I believe.

Not sure, if the translation of the above text is what Mozilla is using. Just hover the muted and unmuted icons an the correct text from your locale will appear.

[Speravir]

Quoting myself:

The vertical position is not centered, though, and I do not know, how to fix this.

Oh, this is easy, I meant easy – use transform:translateY().

.tab-audio-button {
  --button-size-icon-small: 22px !important;
  --button-min-height-small: 22px !important;
  transform: transform: translateY(-3px);
}

[Aris-t2]

I suggest to also use one of these two:

 /* hide the hover box/color */
.tab-audio-button {
  --button-background-color-ghost-hover: transparent !important;
}

 /* border radius: --button-border-radius and border-radius */
.tab-audio-button {
  --button-border-radius: 30px !important;
  border-radius: 30px !important;
}

(^^ If you want a round button in default and hover states.)

[ChasCB]

Thank you Aris-t2. I have done a mix of the two that you provided and added it to my overall audio code, which suits me.

`/* Audio Icon with Sound */
.tab-audio-button[soundplaying] {
color: green !important;
background-color: yellow !important;
border: 2px solid black !important;
border-radius: 30px !important;
scale: .8 !important;
}

/* Audio Icon when Muted */
.tab-audio-button[muted] {
color: red !important;
background-color: gold !important;
border: 2px solid black !important;
border-radius: 30px !important;
scale: .8 !important;
}

/* Border radius and Background Colour on Hover */
.tab-audio-button {
--button-border-radius: 30px !important;
border-radius: 30px !important;
--button-background-color-ghost-hover: color-mix(in srgb, var(--lwt-accent-color) 50%, white) !important;
}
`

[Speravir]

BTW, Aris:

I suggest to also use one of these two:

 /* hide the hover box/color */
.tab-audio-button {
  --button-background-color-ghost-hover: transparent !important;
}

Here I also added

--button-background-color-ghost-active: var(--button-background-color-ghost-hover) !important;

And for the button-border-radius (I’ve added a radial gradient as background-image, so I need this) I use

--button-border-radius: var(--button-size-icon-small) !important;

And for what it’s worth, just as another example see my answer from 12 March 2025, 00:51 in Camp Firefox (so, with German text and comments).

[ChasCB]

Ohhh Welll, Firefox is striking again with elements & ID changes etc. I also came across in that German site (translated) this rule I am not understanding ::part(button) as in;

.tab-audio-button:hover {
    &[soundplaying]::part(button){

Hopefully soon the God of this code, Aris-t2, will come out with an update to the two audio css files, along with my suggestion of .tabbrowser-tab:not([selected]) .tab-icon-overlay {filter: invert(1) important;}

[Speravir]

Ohhh Welll, Firefox is striking again with elements & ID changes etc. I also came across in that German site (translated) this rule I am not understanding ::part(button) as in;

.tab-audio-button:hover {
    &[soundplaying]::part(button){

All these rules containing ::part(…) can unfortunately not be overwritten with userChrome.css. In Camp Firefox they discovered that it works with an additional userChrome.js script, see in ShadowRoot: Neue Aufruf-Methode für CSS-Regeln. Aris mentioned this en-passant above, as well.

[ChasCB]

Yep Right! Thank You. Read it and clear as mud for my very small css, non-java, capabilities. 😳 I'll leave that to you and Aris-t2 👨‍🎓😄

[rebop]

I use Firefox ESR to extend the time of releases for me. Used to be two year, now a little more than one. Eventually, there will be something you want that will not run on that older version. So then I upgrade. Do note, this last to 146 was the FIRST time I did not need to do ANY CSS changes. First time ever for me. Historically something would breakand Aris would lead me to what to change then good again for another year or more. On Dec 21, 2025, at 3:57 PM, Dave Williamson ***@***.***> wrote: https://www.perplexity.ai/search/can-you-force-firefox-to-never-NP_5r_eCRWeBH56jjTpX1g#0 <x-msg://1/url>

[mzso]

Hello!
The spacing of my icons is a tad wonky after updating from FF130 to 135. The spacing have increased for most icons. But not some, these seem to be icons via XUL extensions.
Can I do anything about it? How can I adjust the spacing of icons?
Old look:

New look:

Margin is already set to zero, so I don't know what causes this:

.toolbaritem-combined-buttons{
   height: 5px !important;*/
  padding-block-start: 0px !important;
  padding-block-end: 0px !important;
  margin: 0 0px !important;
}

[CrazieIvan]

goodby message from Aris
#790

[Jagick]

This is very unfortunate, but understandable. I really hope someone else takes up the mantle and forks this.

Personally, I only use it to make it look close to the classic firefox interface before the Australis UI update, so the v4 version, which means I get exactly what I want just by installing this package and using everything as default out of the box.

It will be a shame to see it begin to decay.

[deedub-hub]

@CrazieIvan Thanks for the heads up. It's not likely that I would've discovered the message from Aris otherwise.

[CrazieIvan]

I also almost missed it. I just happened to click on Aris's main page that shows the contributions tracker and noticed one green box from December...
And yes, it is unfortunate because I haven't found another CSS developer that posts CSS files that are ready to use and have commentary. Pretty much you have to assemble your own stuff.

[maryadavies]

Same here, I don't know who will step up now and I don't know enough about it to fix it myself. As it is, I may finally be stuck using the new interface (which will make me cuss a lot b/c I hate that thing, especially for searches)

[deedub-hub]

I thought I would pass this along for anyone interested in styling a component of Firefox's UI that may or may not show itself very often.

It's a notification bar that pops up, and you will likely remember having seen it upon first opening Firefox just after installing a new version.

There are different messages that this same bar will display when triggered by other events, such as:

• After long inactivity: Displays "Welcome back! It looks like you haven’t started Firefox in a while. Do you want to clean it up?" with Refresh button.
• Repeated crashes or corruption: Prompting profile recovery "Firefox detected a problem. Refresh Firefox?" after startup failures.
• Pending update restart: May show "Restart now to keep getting the best Firefox" or similar after background updates.
• Captive portal detection: "You must log in to this network before you can access the internet." Appears on network change (e.g., plugging in USB wireless modem, or joining public Wi-Fi).

---

Since I plug my USB wireless modem into my laptop every day, I see this bar on a regular basis. By default the bar is a plain ugly white, so I created a couple of style rules to give it some color.

You can target the bar with these selectors (as of Firefox version 147). A good place to put the code is in my_userChrome.css

#main-window #notifications-toolbar notification-message {
  background-color: #yourcolor !important;
}

/* This "vbox" is the parent container, so
giving it a darker color makes it look like
a border around the bar. */
#main-window #notifications-toolbar vbox {
  background-color: #yourcolor !important;
}

/* This hides the decorative little color
gradient on the left side of the bar. */
#main-window #notifications-toolbar notification-message::before {
  background-image: none !important;
}

---

A couple of notes about this bar:

• Firefox only renders the bar programmatically when specific triggers occur (as I outlined above). As far as I'm aware there is no documented or reliable way to “spoof” the built‑in triggers in order to trick Firefox into deciding to show the bar on command. Those checks are internal and not exposed via any preferences, WebExtensions, or normal JavaScript APIs. Consequently, you would not be able to view the bar on demand to see the effect of the styles that you had applied to it. Of course you will eventually see the bar during such times as after installing a new version.

• The innermost child elements of the bar, such as the message text and button, are isolated inside of the shadow DOM, so any style rules that you try to create for those parts of the bar will have no effect.

[anzuno]

Complete Set of Bookmark Icons.zip
I have modified bookmark_icons_colorized.css. Please add the icon to the image folder. Please see the attached image for the changes.
icon.zip

/* Firefox userChrome.css tweaks ********************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/

.folder-icon,
#editBMPanel_chooseFolderMenuItem :is(.menu-icon,.menu-iconic-icon),
treechildren::-moz-tree-image(title, container),
treechildren::-moz-tree-image(title, query, hostContainer) {
 list-style-image: url("./../../image/folder-item.png")!important;
}

treechildren::-moz-tree-image(title, open) {
 list-style-image: url("./../../image/folder-item2.png")!important;
}

treechildren::-moz-tree-image(title, container, livemark) {
 list-style-image: url("./../../image/feedIcon16.png") !important;
}

#editBMPanel_folderMenuList:-moz-any([label="Bookmarks Toolbar"],[label="Lesezeichen-Symbolleiste"]) .menulist-icon,
#editBMPanel_toolbarFolderItem :is(.menu-icon,.menu-iconic-icon),
treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksToolbar),
treechildren::-moz-tree-image(container, queryFolder_toolbar_____) {
 list-style-image: url("./../../image/bookmarksToolbar.png") !important;
}

#editBMPanel_folderMenuList:-moz-any([label="Bookmarks Menu"],[label="Lesezeichen-Menü"]) .menulist-icon,
#editBMPanel_bmRootItem :is(.menu-icon,.menu-iconic-icon),
treechildren::-moz-tree-image(container, OrganizerQuery_BookmarksMenu),
treechildren::-moz-tree-image(container, queryFolder_menu________) {
 list-style-image: url("./../../image/bookmarksMenu.png") !important;
}

#editBMPanel_folderMenuList:-moz-any([label="Other Bookmarks"],[label="Weitere Lesezeichen"]) .menulist-icon,
#editBMPanel_unfiledRootItem :is(.menu-icon,.menu-iconic-icon),
treechildren::-moz-tree-image(container, OrganizerQuery_UnfiledBookmarks),
treechildren::-moz-tree-image(container, queryFolder_unfiled_____) {
 list-style-image: url("./../../image/unsortedBookmarks.png") !important;
}

treechildren::-moz-tree-image(title, query),
treechildren::-moz-tree-image(query) {
  list-style-image: url("./../../image/folder-item.png") !important;
}

treechildren::-moz-tree-image(title, query, dayContainer) {
  list-style-image: url("./../../image/calendar.png") !important;
}

treechildren::-moz-tree-image(query, OrganizerQuery_History),
treechildren::-moz-tree-image(query, OrganizerQuery_history____v) {
  list-style-image: url("./../../image/history-XP.png") !important;
}

treechildren::-moz-tree-image(query, OrganizerQuery_allbms_____v) {
  list-style-image: url("./../../image/Fx56-allBookmarks.png") !important;
}

treechildren::-moz-tree-image(query, OrganizerQuery_downloads__v) {
  list-style-image: url("./../../image/downloads.png") !important;
}

toolbarbutton.bookmark-item[container],
.bookmark-item[container] .menu-iconic-left :is(.menu-icon,.menu-iconic-icon) {
  list-style-image: url("./../../image/folder-item.png") !important;
}

toolbarbutton.bookmark-item[container][open],
.bookmark-item[container][open] .menu-iconic-left :is(.menu-icon,.menu-iconic-icon) {
 list-style-image: url("./../../image/folder-item2.png")!important;
}

.bookmark-item[container][livemark] {
  list-style-image: url("./../../image/livemark-folder.png") !important;
}
.bookmark-item[container][livemark] .bookmark-item {
  list-style-image: url("./../../image/livemark-item.png") !important;
}
.bookmark-item[container][livemark] .bookmark-item[visited] {
  list-style-image: url("./../../image/livemark-item2.png") !important;
}

.bookmark-item[container][query],
.bookmark-item[container][query][open],
.bookmark-item[container][query] > .menu-iconic-left > :is(.menu-icon,.menu-iconic-icon),
.bookmark-item[container][query][open] > .menu-iconic-left > :is(.menu-icon,.menu-iconic-icon) {
  list-style-image: url("./../../image/query.png") !important;
}

treechildren::-moz-tree-image(title, query, tagContainer),
treechildren::-moz-tree-image(query, OrganizerQuery_tags_______v),
.bookmark-item[query][tagContainer] {
  list-style-image: url("./../../image/tag.png") !important;
}

.bookmark-item[query][dayContainer] {
  list-style-image: url("./../../image/calendar.png") !important;
}

.bookmark-item[query][hostContainer] {
  list-style-image: url("./../../image/folder-item.png") !important;
}

.bookmark-item[query][hostContainer][open] {
  list-style-image: url("./../../image/folder-item2.png") !important;
}

/* Bookmarks roots menu-items */
#subscribeToPageMenuitem:not([disabled]),
#subscribeToPageMenupopup {
  list-style-image: url("./../../image/feedIcon16.png") !important;
}

/*** Fx143 ***/
#bookmarksToolbarFolderMenu > :is(.menu-icon,.menu-iconic-icon),
#BMB_bookmarksToolbar > :is(.menu-icon,.menu-iconic-icon),
#editBMPanel_toolbarFolderItem > :is(.menu-icon, .toolbarbutton-icon) {
content: url("./../../image/bookmarksToolbar.png") !important;
}

#menu_unsortedBookmarks > :is(.menu-icon,.menu-iconic-icon),
#BMB_unsortedBookmarks > :is(.menu-icon,.menu-iconic-icon),
#editBMPanel_unfiledRootItem > :is(.menu-icon,.menu-iconic-icon) {
content: url("./../../image/unsortedBookmarks.png") !important;
}

#editBMPanel_folderMenuList[selectedGuid="unfiled_____"] {
list-style-image: url("./../../image/unsortedBookmarks.png") !important;
}

#editBMPanel_folderMenuList[selectedGuid="toolbar_____"] {
list-style-image: url("./../../image/bookmarksToolbar.png") !important;
}

#editBMPanel_folderMenuList[selectedGuid="menu________"] {
list-style-image: url("./../../image/bookmarksMenu.png") !important;
}

.bookmark-item[container] > :is(.menu-icon, .toolbarbutton-icon),
.folder-icon > :is(.menu-icon, .toolbarbutton-icon) {
content: url("./../../image/folder-item.png") !important;
}

#editBMPanel_bmRootItem > :is(.menu-icon, .toolbarbutton-icon) {
content: url("./../../image/bookmarksMenu.png") !important;
}

/* "Other Bookmarks" folder in the Bookmarks Toolbar */
#OtherBookmarks > :is(.menu-icon, .toolbarbutton-icon) {
content: url("./../../image/unsortedBookmarks.png") !important;
}

/********************************************************************************************/
/* ::::: Change the >v displayed in the tree in the sidebar to ▼△ ::::: */
treechildren::-moz-tree-twisty {
  list-style-image: url("./../../image/twisty-clsd-aero.png") !important;
  margin-right: -0.3em !important;
  margin-top: 0.0em !important;
}

treechildren::-moz-tree-twisty(open) {
  list-style-image: url("./../../image/twisty-open-aero.png") !important;
  margin-right: -0.3em !important;
  margin-top: 0.0em !important;
}

treechildren::-moz-tree-twisty(hover) {
  list-style-image: url("./../../image/twisty-clsd-hover-aero.png") !important;
  margin-right: -0.3em !important;
  margin-top: 0.0em !important;
}

treechildren::-moz-tree-twisty(hover, open) {
  list-style-image: url("./../../image/twisty-open-hover-aero.png") !important;
  margin-right: -0.3em !important;
  margin-top: 0.0em !important;
}

/********************************************************************************************/
/* ::::: Change the >v displayed in the tree in the sidebar to + - ::::: */
/*treechildren::-moz-tree-twisty {
  list-style-image: url("./../../image/twisty-clsd.png") !important;
  margin-right: -0.3em !important;
  margin-top: 0.0em !important;
}

treechildren::-moz-tree-twisty(open) {
  list-style-image: url("./../../image/twisty-open.png") !important;
  margin-right: -0.3em !important;
  margin-top: 0.0em !important;
}
*/
/* ::::: Dotted line folder tree in sidebar ::::: */
/*treechildren::-moz-tree-line {
  visibility: visible !important;
  border: 1px dotted #999 !important;
}
*/
/* ::::: tree separator. Separator when folder tree is dotted line ::::: */
/*treechildren::-moz-tree-separator {
  border-bottom: 1px solid ThreeDShadow !important;
  margin-top: 1px !important;
  margin-left: 1px !important;
  margin-right: 0px !important;
}
*/
/********************************************************************************************/
/* ::::: tree rows ::::: */
/*treechildren::-moz-tree-row {
  min-height: 2.0em !important;
  border-width: 1px !important;
}

#places treechildren::-moz-tree-row {
  min-height: 2.0em !important;
  border-width: 1px !important;
}

treechildren::-moz-tree-indentation {
  width: 1.4em !important;
}
*/

/****** History icon for "HistorySubmenus2@Merci.chao.uc.js" ******/
/****** https://github.com/Merci-chao/userChrome.js/blob/main/HistorySubmenus2%40Merci.chao.uc.js ******/
/*
.HSM2-submenu {
  list-style-image: url("./../../image/calendar.png") !important;
}

.history-submenu.menu-iconic.bookmark-item > :is(.menu-icon, .toolbarbutton-icon) {
  content: url("./../../image/calendar.png") !important;
}
*/

[anzuno]

twisty + -

[CrazieIvan]

Thanks for the icons. I'll do a shameless little promo here that others may find useful. I've stopped using the default bookmarks side panel and i've switched to Bookmark search plus 2 extension which has an option to change the folder icon to the yellow kind, but more importantly has an excellent bookmark search feature where it shows the actual location of the found bookmark in the bookmark tree and can send you there (this was one of the most annoying things about the default bookmark manager - it cant tell you where the found bookmark is). Also it can search for folders too, not just bookmarks. Once I started using BSP2, I've never had to open the default BB panel.

[archer310]

New laptop - windows 11. Installed latest FF version and downloaded latest release here 4.7.5. Created 'chrome' folder in the profiles directory and copied the 5 files into it. Modified slightly the UserChrome.css file like I have done on other machines. When I re-start FF, nothing happens. It's been a while since I've updated on any of my machines. Has the process changed in any way? Any thoughts as to what I might be doing wrong?

[CrazieIvan]

Process hasn't changed and it works fine here on Win 11. The only thing I can think of is maybe you put it in the wrong folder or wrong profile?

[Jagick]

New laptop - windows 11. Installed latest FF version and downloaded latest release here 4.7.5. Created 'chrome' folder in the profiles directory and copied the 5 files into it. Modified slightly the UserChrome.css file like I have done on other machines. When I re-start FF, nothing happens. It's been a while since I've updated on any of my machines. Has the process changed in any way? Any thoughts as to what I might be doing wrong?

Did you remember to go into About:config in Firefox, find toolkit.legacyUserProfileCustomizations.stylesheets and then set that to True? It won't work without that.

[archer310]

Jagick - I don't remember having to change anything in About:config in the past, but I will try that and see if it works.

CrazieIvan - I followed the instructions for getting to the Profiles folder, so I don't think I went to the wrong folder, but I will double-check.

[archer310]

Jagick - that worked - thank you!

[Jagick]

You're welcome!

Yeah at one point that wasn't a necessary step, but after a certain firefox update it was required and Aris added it to his list of instructions on the main page, very easily missed though!

[MarkRH]

For those that just updated to Firefox 149.0 and noticed their padlock on the left side of the location/URL bar was messed up like:

Clicking on it would do nothing. I did some poking around and in my case, something in the following file was causing it: /css/locationbar/identitybox_colors.css.

After commenting that line out, it now looks like it probably should and can be interacted with using the mouse:

Hope this helps someone else with the same issue.

[maryadavies]

Thanks! I'm still trying to find a good alternate to this project for styling; shame nothing else compares. Oh and no border around the search bar now. ><

[glennpc]

Was doing some checking into it and came across this:

browser.urlbar.trustPanel.featureGate to false in Mozilla Firefox disables the new Trust Panel feature, which is being introduced in Firefox 149 (expected early 2026) to unify the privacy and security information into a single dropdown in the address bar.
How to Disable the Trust Panel
If you wish to revert to the traditional icon behavior in newer Firefox versions (149+ or nightly builds):

Type about:config in the Firefox address bar and press Enter.
Click "Accept the Risk and Continue".
Search for: browser.urlbar.trustPanel.featureGate
Double-click the preference to set it to false.
Restart Firefox if necessary.

That seems to fix it for now using identitybox_colors.css

[maryadavies]

Yay. that fixed it all right, and brought back the lock icon I was using. now if there'd be a updated fork if someone had the courage to dig into the CSS..

[ChasCB]

Thanks for that all fixed - Security Shield and Padlock now back at beginning of URL bar 👏

[MarkRH]

Thanks for pointing out that about:config tweak to get back the Security Shield and Padlock. I've kind of gotten used to that new panel now though LOL.

[Thalon77]

I'm wondering if others here are still using this CSS and if they want to share their files in case they managed to edit them to make the CSS still compatible with new FF releases, because now with V149 things are starting to really break and maybe you can still make some fixes by editing the files.

[maryadavies]

I'd like that too. I'm hoping someone forks it to keep this project going since Aeris isn't anymore.

[ChasCB]

If it is possible - is there css to change the Active border colour and Inactive border colour of the Split View panels ?

All I am finding in the Browser Toolbox is:

#panel-3-3.browserSidebarContainer.split-view-panel-active.split-view-panel

#panel-3-2.browserSidebarContainer.deck-selected.split-view-panel-active.split-view-panel

[ChasCB]

Ok I have solved it with the help from GodieGun on reddit.

/* Change the Split View active panel border colour */
#tabbrowser-tabpanels {
  &[splitview] {
    & .browserContainer {
      .deck-selected > & {
        outline: 3px solid #008000 !important;
      }
    }
  }
}

[ChasCB]

Ok - a bit more code thanks to bitchitsbarbie on reddit. I just changed their outline & border px and colour to suit my own basic Ars-t2 css theme.

I must admit I do love the Split View, it save me having to open a new Window all the time.

/* Change the Split View selected & non-selected panel border colour */
#tabbrowser-tabpanels {
  &[splitview] {
    & .browserContainer {
      outline: 3px solid #ff0000 !important;

      .deck-selected > & {
        outline: 3px solid #008000 !important;
      }

      &:first-child {
        outline: none !important;
        border: 3px solid #ff0000 !important;

        .deck-selected > & {
          outline: none !important;
          border: 3px solid #008000 !important;
        }
      }
    }
  }
}

[Thalon77]

Quick about:config fix if you keep an "oldstyle" search prompt on the address bar and if you see it like in the attached image (with a gray icon breaking your aero theme and without border): just set browser.search.widget.new to false.

[Jagick]

Edit: I managed to fix all of this myself with some diligence and tinkering. It's not perfect, but it's well enough for me.

As of the latest Firefox Update 152.0, starting to really see some issues that I hope someone might have an idea of how to remedy. Look to the top left of the image here, my current tab becomes transparent and the old orange firefox button is overlapping with the tab bar. Turning off the menu bar (File Edit View etc.) makes half the first tab half obscured by the orange button entirely. I have no coding experience and have always used Aris' stuff the way it comes out of the box with no alterations. Any pointers?

[AbdAbd10]

iam using classic_squared_tabs so what i did is search for bg in the file than change it too background-
example --tab-selected-bgcolor changed it to --tab-selected-background-color
or --toolbar-bgimage to --toolbar-background-image

and so on i did this to everything that had bg in the file and it fixed it for me

[rebop]

I am on ESR so have not made changes in 2 years or more. I will be forced to 153 on Sept 15th. Have you folks found most things still work on 153? Anything in particular that does not?

[JIPG2]

I am still in 140 ESR, but I am preparing the changes for 153 ESR in other PC to be ready for the change in Ocotober. I have tried the path of using AI, but I have spent a lot of hours without success. Using the inspector in firefox (in the menu developer tools) has been on the other hand very helpful.

First of all, I have changed several variables in about:config page:

• browser.urlbar.trustPanel.featureGate --> false (to maintain the padlock icon separate from the shield)
• browser.nova.enabled --> false (to avoid new nova "enhancements")
• browser.search.widget.new --> false (to change the new search engine selector in the search bar)
• browser.search.widget.removeAfterDaysUnused --> 5000 (to avoid the search bar being removed after 12 days of not using it !!!)
• browser.urlbar.scotchBonnet.enableOverride --> false (to keep the old way of selecting the search engines in the list)

After that, I have tried to keep the same appearance I have now in 140 ESR (just for reference, as it can vary for each one):

I can show the files I needed to change to have same appearance in 153 ESR:

• In css/tabs: tabs_below_navigation_toolbar.css, classic_squared_tabs.css and I have created a new one for the new "Split view".
• In css/locationbar: urlbar_border_roundness.css and urlbar_restore_visible_border.css
• In css/generalui: findbar_close_at_findbars_start.css, findbar_compact.css, popup_compact_menus.css, popup_menus_menu_background.css, popup_ menus_space_before_label.css, bookmark_icons_colorized.css, and I created two new ones findbar_not_found_color.css (an error in ESR 153 that is not solved by the moment, where the findbar color does not change to red when the text is not found), and input_search_border_radius_ and_offset_1.css (in some menus of the history or bookmarks, the focused state of the search bar has an offset of two pixels).
• In css/aboutpreferences: I have created a new file: input_search_border_radius_ and_offset_2.css (the search boxes in preferences menus has an offset of two pixel when in focus)

As I have no time just know, I include here the new file for the findbar (when the text is not found and the colour should be red) and the two files for the offset of the focused search bars. I will continue later with the additional content:

findbar_not_found_color.css
.findbar-textbox[status=notfound] {
background-color: rgba(226, 40, 80, 0.3) !important;
color: inherit; !important;
}

.findbar-textbox[flash="true] {
background-color: rgba(255, 233, 0, 0.3) !important;
color: inherit !important;
}

input_search_border_radius and_offset_1.css_
/* search container offset corrected (when in focus) for bookmarks and History menus.
Radius change is to my like */

#input {
&.with-icon, &[type="search"] {
border-radius: 8px !important;
&:focus-visible {
outline-offset: 0 !important;
}
}
}

input_search_border_radius and_offset_2.css_
@-moz-document url-prefix("about:preferences") {
input[type="text"][readonly],
input[type="search"],
.search-input {
border-radius: 8px !important;
&:focus-visible {
outline-offset: 0 !important;
}
}
}

@-moz-document url-prefix("about:preferences"), url-prefix("about:addons") {
input[type="text"][readonly],
input[type="search"],
.search-input,
search-addons input {
border-radius: 8px !important;
&:focus-visible {
outline-offset: 0 !important;
}
}
}

[rebop]

This is a fabulous post. Thank you so much. I am doing exactly the same and trying to be ready for 153 ESR. I have roughly 18 issues I could not solve. Today discovered enabling compact mode again, even though it says NOT Supported, fixed half the issues. You have fixed another two or three.

Happy to share what I have learned though could not possibly post it all in a ny useful form. But ask and if I can help I will. And likely tomorrow, I shall post whatever remains after working on things today.

I truly fear what will happen if Compact Mode goes away totally. My changes require that for most to work as I desire.

💬 Bob

[JIPG2]

I will try little by little to explain what I have found. To be honest, I am a little bit lost, because I started making the changes in Firefox 153-release, but when I finished the changes, I realise that I was in Firefox 154-release (it updated automatically). And FX 154-release is different to 153 ESR. For instance, the files I posted are OK for firefox 154-release, but for firefox 153 ESR, only the part of the border-radius change is applicable:

input_search_border_radius and_offset_1.css_
/* search container offset corrected (when in focus) for bookmarks and History menus.
Radius change is to my like */
#input {
&.with-icon, &[type="search"] {
border-radius: 8px !important;
&:focus-visible {
outline-offset: 0 !important;
}
}
}

input_search_border_radius and_offset_2.css_
@-moz-document url-prefix("about:preferences"), url-prefix("about:addons") {
input[type="text"][readonly],
input[type="search"],
.search-input,
search-addons input {
border-radius: 8px !important;
&:focus-visible {
outline-offset: 0 !important;
}
}
}

On the other hand, the file:

findbar_not_found_color.css
.findbar-textbox[status=notfound] {
background-color: rgba(226, 40, 80, 0.3) !important;
color: inherit; !important;
}
.findbar-textbox[flash="true] {
background-color: rgba(255, 233, 0, 0.3) !important;
color: inherit !important;
}
Is to solve a problem that exists in firefox 153-release and firefox 153 ESR, but it is already solved in in firefox 154-release.
I will try to continue tomorrow.

[JIPG2]

I forgot to specify that the code in input_search_border_radius and_offset_2.css_has to be included as part of userContent.css. The rest correspond to userChrome.css.

Another glitch I have found in FX 153ESR is that my lwtheme Strata Theme 3.5 B (see above) leaks in part of the menu "Customize toolbar":

I have corrected it in userChrome.css with:
customize_toolbar_space_grey_color.css

/* The lwtheme can leak in part of the menu "Customize toolbar"
/* Force a gray background /
#customization-container,
#customization-palette-container,
#customization-palette {
background-color: #f0f0f4 !important; / Firefox standard light grey */
background-image: none !important;
}

/* top margin adjusted to avoid any void space */
#customization-container #customization-palette-container {
margin-top: 10px !important;
}

[JIPG2]

Another glitch with my previous css code: the border radius of the search engine switcher does not match the one of the url bar.

Solved with this code:

/* Border radius of search engine switcher to match url bar border radius*/
@layer tokens-foundation {
:root,
:host(.anonymous-content-host) {
--button-border-radius: 3px !important;
}
}

Note: this can affect to other items roundness, as the change is not specific to this element. Anyhow, I have not found any colateral effect by now.

[phantomflanflinger]

Still looking 99% fine for me on FF 154.

But how I customise it with Aris's code may be very different to what you do. YMMV.

[rebop]

Can anyone tell me why 153 (maybe earlier versions, I am coming from 140) has this shadow / phantom scroll bar on the sidebar and how to remove it?

Thanks!

[ChasCB]

Though I do not have an answer for you and as Aris-t2 has stepped away from his own code, you might get a better answer from: https://www.reddit.com/r/FirefoxCSS/

[AbdAbd10]

add this blow line 27 #sidebar-box {

margin-inline-start: -2px !important;

[rebop]

Thanks! Will try it.

[rebop]

Thanks. Did not know it was on reddit. Appreciate that. And I fixed it. It was theme dependent! On Aug 19, 2026, at 8:37 PM, FineWine ***@***.***> wrote: Though I do not have an answer for you and as Aris-t2 has stepped from his own code, you might get a better answer from: https://www.reddit.com/r/FirefoxCSS/ — Reply to this email directly, view it on GitHub <#722?email_source=notifications&email_token=ADJFPUQWHCZPGS4BRGANGQD5KZB6NA5CNFSNUABIM5UWIORPF5TWS5BNNB2WEL2ENFZWG5LTONUW63SDN5WW2ZLOOQXTCOBQHA2TSMZWUZZGKYLTN5XKOY3PNVWWK3TUUVSXMZLOOSWGM33PORSXEX3DNRUWG2Y#discussioncomment-18085936>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADJFPUTK2X2TIN7SP3I6KZT5KZB6NAVCNFSNUABHKJSXA33TNF2G64TZHMYTANJXGQ3TAOBXHNCGS43DOVZXG2LPNY5TONZQGM3DON5BOYBA>. Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS <https://github.com/notifications/mobile/ios/ADJFPUQIIW32KF7YVY223RL5KZB6NA5CNFSNUABIM5UWIORPF5TWS5BNNB2WEL2ENFZWG5LTONUW63SDN5WW2ZLOOQXTCOBQHA2TSMZWUZZGKYLTN5XKOY3PNVWWK3TUUVSXMZLOOSVGM33PORSXEX3JN5ZQ> and Android <https://github.com/notifications/mobile/android/ADJFPURZPUB5ZQIBGGTZTKT5KZB6NA5CNFSNUABIM5UWIORPF5TWS5BNNB2WEL2ENFZWG5LTONUW63SDN5WW2ZLOOQXTCOBQHA2TSMZWUZZGKYLTN5XKOY3PNVWWK3TUUVSXMZLOOSXGM33PORSXEX3BNZSHE33JMQ>. Download it today! You are receiving this because you commented. [ { ***@***.***": "http://schema.org", ***@***.***": "EmailMessage", "potentialAction": { ***@***.***": "ViewAction", "target": "#722?email_source=notifications\u0026email_token=ADJFPUQMXIUZUUHFYSTQ6D35KZB6NA5CNFSNUABIM5UWIORPF5TWS5BNNB2WEL2ENFZWG5LTONUW63SDN5WW2ZLOOQXTCOBQHA2TSMZWUZZGKYLTN5XKOY3PNVWWK3TUUVSXMZLOOSVWO3LBNFWF6Y3MNFRWW#discussioncomment-18085936", "url": "#722?email_source=notifications\u0026email_token=ADJFPUQMXIUZUUHFYSTQ6D35KZB6NA5CNFSNUABIM5UWIORPF5TWS5BNNB2WEL2ENFZWG5LTONUW63SDN5WW2ZLOOQXTCOBQHA2TSMZWUZZGKYLTN5XKOY3PNVWWK3TUUVSXMZLOOSVWO3LBNFWF6Y3MNFRWW#discussioncomment-18085936", "name": "View Discussion" }, "description": "View this Discussion on GitHub", "publisher": { ***@***.***": "Organization", "name": "GitHub", "url": "https://github.com" } } ]