Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

userchrome.css

  • 15 replies
  • 0 have this problem
  • 4 views
  • Last reply by AIVAS

more options

Trying to recover from a hard drive crash. Had to buy a new desktop with Windows 11 Pro (looking to be a bad move). I downloaded/updated to Firefox 126.0 (maybe also looking to be a bad move).

Have my last "working" userChrome file (it took me weeks to perfect this to my needs).

I am looking for: C:\Users\<user>\AppData\Roaming\Mozilla\Firefox\Profiles\<profile>\

but there is no "AppData" folder. And there is no existing userChrome.css file, anywhere!

Is the functionality I am looking for a thing of the past?

Is Firefox not completely supported by Windows 11?

If so, what is the last version of Firefox that will still support userChrome.css?

Trying to recover from a hard drive crash. Had to buy a new desktop with Windows 11 Pro (looking to be a bad move). I downloaded/updated to Firefox 126.0 (maybe also looking to be a bad move). Have my last "working" userChrome file (it took me weeks to perfect this to my needs). I am looking for: C:\Users\<user>\AppData\Roaming\Mozilla\Firefox\Profiles\<profile>\ but there is no "AppData" folder. And there is no existing userChrome.css file, anywhere! Is the functionality I am looking for a thing of the past? Is Firefox not completely supported by Windows 11? If so, what is the last version of Firefox that will still support userChrome.css?

All Replies (15)

more options

No, it's still supported.

more options

You need to place userChrome.css and userContent.css in the chrome folder in the Firefox profile folder.

You can use the button on the "Help -> More Troubleshooting Information" (about:support) to go to the current Firefox profile folder or use the about:profiles page (Root directory).

In Firefox 69 and later you need to set this pref to true in about:config to enable userChrome.css and userContent.css.

more options

I see nothing here about userContent.css much less userchrome.css.

What am I missing?

more options

Possibly nothing in case you have no purpose for using userChrome.css. I'm not sure why you asked this question.

Both userChrome.css and userContent.css do not exist by default and you need to create the chrome folder in the Firefox profile folder and within this folder userChrome.css/.userContent.css if you want to customize Firefx.

more options

Thank you for your help. One more thing on my recreation list.

Per your link, I was able to create the “chrome’ folder then drop my userChrome file (from my backups) into it. Now it works!

Note: "Mark it as solved" does not seem to work but it is solved.

Thank you again.

more options

My bookmarks used to "wrap".

They still do on my laptop. It has Windows 8.1 and Firefox 115.123.0esr.

The same file (copied) does not "wrap" on my new desktop. It has Windows 11 and Firefox 128.0.

Code:

/* Makes bookmarks toolbar span multiple rows */

  1. PersonalToolbar{
 --multirow-bmb-n-rows: 3; /* Control how many rows are shown before scrolling */
 --multirow-bmb-row-margin: 2px; /* Control how much spacing is between rows */
 max-height: none !important;

}

  1. PlacesToolbar > hbox{
 display: block;
 width: 100vw;

}

  1. PlacesToolbarItems{
 display: flex;
 flex-wrap: wrap;
 /* --uc-bm-padding is defined in autohide_bookmarks_toolbar.css */
 max-height: calc(var(--multirow-bmb-n-rows) * (5px + 1em + (2 * (var(--multirow-bmb-row-margin) + var(--uc-bm-padding,3px))))) !important;
 overflow-y:auto;
 scrollbar-color: var(--lwt-accent-color) var(--toolbar-bgcolor) ;
 scrollbar-width: thin;

}

/* Hide the all-bookmarks button */

  1. PlacesChevron{ display: none }

/* Add some spacing between rows */

  1. PlacesToolbarItems > .bookmark-item{ margin: var(--multirow-bmb-row-margin) 2px !important; }

/* --> Remarked out to return Bookmarks names 07-17-2020 --> #personal-bookmarks .bookmark-item > .toolbarbutton-text { display:none !important; }*/

What is it about either Windows 11 or Firefox that I am not seeing?

more options

I'm sure a lot of style rules have changed between Firefox 115 and Firefox 128. You could look at the following file and see whether these rules still work:

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

more options

I tried to cut what appeared to be the pertinent lines in my semi-working userChrome file and paste the code you referenced.

No help.

Thank you for replying.

more options

This code is more complex, but it was updated 4 weeks ago, so maybe it is up-to-date for Firefox 128:

https://github.com/Aris-t2/CustomCSSforFx/blob/master/current/css/toolbars/bookmarks_toolbar_multiple_lines.css

more options

No change.

Maybe I am doing something wrong.

I backup my userChrome.css file then cut/pasted this code into where I think it belongs in the userChrome.css file. Then I open FireFox.

I’ve been doing this each time I find “new” code.

Is there something intricately wrong with what I do?

FYI: I may be slow to respond…grandchildren!

more options

Isn't anything in the code working?

Note that you need to set this pref to true in about:config to enable userChrome.css and userContent.css in Firefox 69+.

This code works properly for me in Firefox 128, if I make the window wider and smaller it automatically wraps.

#PersonalToolbar{
  --multirow-bmb-n-rows: 3; /* Control how many rows are shown before scrolling */
  --multirow-bmb-row-margin: 2px; /* Control how much spacing is between rows */
  max-height: none !important;
}

#PlacesToolbar > hbox{
  display: block;
  width: 100vw;
}

#PlacesToolbarItems{
  display: flex;
  flex-wrap: wrap;
  /* --uc-bm-padding is defined in autohide_bookmarks_toolbar.css */
  max-height: calc(var(--multirow-bmb-n-rows) * (5px + 1em + (2 * (var(--multirow-bmb-row-margin) + var(--uc-bm-padding,2px))))) !important;
  overflow-y:auto;
  scrollbar-color: var(--lwt-accent-color) var(--toolbar-bgcolor) ;
  scrollbar-width: thin;
}

/* Hide the all-bookmarks button */
#PlacesChevron{ display: none }

/* Add some spacing between rows */
#PlacesToolbarItems > .bookmark-item{ margin: var(--multirow-bmb-row-margin) 3px !important; }
more options

I've come to the conclusion that I am doing something wrong.

Nothing I do changes the display.

I've used:

    1.) userChrome from my Windows 10 desktop (R.I.P);
    2.) userChrome (it works) from my laptop (FireFox 115.13.0esr & Windows 8.1);
    3.) each of the codes listed here.

I've added the codes to my file and/or used the code by itself.

I've made toolkit.legacyUserProfileCustomizations.stylesheets preference false/true.

I've tried the userChrome in:

    C:\Users\xxx \AppData\Roaming\Mozilla\Firefox\Profiles
    C:\Users\xxx \AppData\Roaming\Mozilla\Firefox\Profiles\Chrome
    C:\Users\xxx \AppData\local\Mozilla\Firefox\Profiles
    C:\Users\xxx \AppData\local\Mozilla\Firefox\Profiles\Chrome

I even tried putting the userChrome in each place.

And I removed the userChrome file completely.

Nothing I do changes the display.

Please....What is the secret?

more options

The "chrome" folder needs to be inside your current profile folder. You can use the Troubleshooting Information page to verify the precise folder. (Except for the Windows store version, where that information is not accurate.)

more options

Note that the name of the folder is all lowercase chrome.

It is not that difficult to create userChrome.css if you have never used it.

The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder with the random name (xxxxxxxx.default-release).

You can find the button to go to the profile folder under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in the profile folder with the random name (name is all lowercase). In the chrome folder you need to create a plain text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted.

In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt or .css file extension and you end up with a file like userChrome.css.txt or userChrome.css.css. To avoid this, you need to make sure to select "All files" in the "Save File" dialog in the text editor.

You need to close (Quit/Exit) and restart Firefox when you create or modify the userChrome.css file.

more options

Thank you, cor-el.

Between making "chrome" lowercase and selecting the correct Profile (of 3), my Bookmarks and Tabs seem to be working the way I want.

As I suspected the problem was not all in my userChrome.

Thank you. You always come through.