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

Does W10 treat .css files differently than W7? Trying to get tabs on bottom, and old solution not working in W10

  • 4 replies
  • 2 have this problem
  • 5 views
  • Last reply by CatsinQ

more options

Hi all, I just got a new laptop and am trying to get FF the way I like it. This new laptop is W10, and the FF version is 78.0.1.

My old laptop (W7) also has FF 78.0.1.

I created a Chrome folder and a userChrome.css file in my new computer. I copied and pasted the "tabs on bottom" code I have been using on my W7 computer into the new file on my new computer and it is not working.

I have looked all over the web for several hours now and have tried several different versions of the code, tried turning the "legacy toolkit" line (in about:config) on and off and nothing has worked. I also can't find any information on why this code would work in W7 but not W10.

Does anyone have any thoughts?

Hi all, I just got a new laptop and am trying to get FF the way I like it. This new laptop is W10, and the FF version is 78.0.1. My old laptop (W7) also has FF 78.0.1. I created a Chrome folder and a userChrome.css file in my new computer. I copied and pasted the "tabs on bottom" code I have been using on my W7 computer into the new file on my new computer and it is not working. I have looked all over the web for several hours now and have tried several different versions of the code, tried turning the "legacy toolkit" line (in about:config) on and off and nothing has worked. I also can't find any information on why this code would work in W7 but not W10. Does anyone have any thoughts?

Chosen solution

Did you copy userChrome.css from the old device to the new device or did you create a new userChrome.css ?

You can open userChrome.css in a Firefox tab to check the file.

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.

You can find this button 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 this folder (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 file extension and you end up with a file named userChrome.css.txt.
To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".

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

See also:

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

  • toolkit.legacyUserProfileCustomizations.stylesheets = true

See:


Can you post the content of your userChrome.css file ?

Read this answer in context 👍 1

All Replies (4)

more options

Generally speaking, the differences in how Firefox looks on Windows 7 and Windows 10 are small.

The chrome folder should be all lower case (no capital C).

Can you confirm that the full file name is userChrome.css and Windows/Notepad didn't tack on .txt on the end? You may want to turn on display of all file extensions to better work around that problem. See: https://www.bleepingcomputer.com/tutorials/how-to-show-file-extensions-in-windows/

Do any of your userChrome.css rules work at all? If you need another sample rule to try, you could put this at the top of your file -- you should notice the difference when clicking the bookmark star in the address bar:

/*** Add/Edit Bookmarks Drop-down ***/
/* Taller Folder List */
#editBMPanel_folderTree {
  min-height: 350px !important; 
}
/* Hide Giant Thumbnail and Favicon */
#editBookmarkPanelImage, 
*|div#editBookmarkPanelFaviconContainer {
  display: none !important;
}
more options

Thanks for responding so quickly! Actually, unless you guys all use the same pic, I am pretty sure you helped me with something about two years ago. :)

I checked and I do have the chrome file in all little letters. The .css file DID have a .txt attached to it, so renamed it without the txt extension and hopefully that took care of that.

I added the code you provided and closed FF and reopened a new window, and didn't notice anything different about the bookmark star icon or anything in the dropdown.

Could I have added the chrome file to the wrong place? I am navigating to the place by clicking the three bars in the upper part of FF, going to "help" and then "troubleshooting" and when I get that kind of weird looking page I click on "profile folder/open folder." I put the chrome folder in that list. This is where I put it: C:\Users\Owner\AppData\Roaming\Mozilla\Firefox\Profiles\7bakwgn6.default-release. Is that incorrect perhaps?

I have the feeling you will respond right away, but I have to go to bed, so I will reply in the morning.

Thank you so very much!!

Modified by CatsinQ

more options

Chosen Solution

Did you copy userChrome.css from the old device to the new device or did you create a new userChrome.css ?

You can open userChrome.css in a Firefox tab to check the file.

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.

You can find this button 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 this folder (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 file extension and you end up with a file named userChrome.css.txt.
To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".

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

See also:

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

  • toolkit.legacyUserProfileCustomizations.stylesheets = true

See:


Can you post the content of your userChrome.css file ?

more options

A big thank you to both you guys for helping. I went back and checked and my .txt wasn't actually removed. Got that straightened out and now it's back to normal. THANK YOU.