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)
No, it's still supported.
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).
- Help -> More Troubleshooting Information -> Profile Folder/Directory:
Windows: Open Folder; Linux: Open Directory; Mac: Show in Finder - https://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data
In Firefox 69 and later you need to set this pref to true in about:config to enable userChrome.css and userContent.css.
- about:config => toolkit.legacyUserProfileCustomizations.stylesheets => true
- https://support.mozilla.org/en-US/kb/about-config-editor-firefox
I see nothing here about userContent.css much less userchrome.css.
What am I missing?
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.
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.
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 */
- 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,3px))))) !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) 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?
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
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.
This code is more complex, but it was updated 4 weeks ago, so maybe it is up-to-date for Firefox 128:
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!
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+.
- about:config => toolkit.legacyUserProfileCustomizations.stylesheets => true
- https://support.mozilla.org/en-US/kb/about-config-editor-firefox
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; }
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?
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.)
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.
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.