userChrome.css is not working with toolkit option enabled
I been reading various guide about how to use CSS to override the hyperlink color. But it is not working, Firefox are not grabbing the userChrome.css from the folder. I am not sure if there is other step that I have to do since I did everything to enable it through multiple guides.
- toolkit.legacyUserProfileCustomizations.stylesheets is enabled
- chrome folder is created and located in my profile root folder
- userChrome.css and userContent.css is in chrome folder
- restarted Firefox multiple times even checking the task manager to ensure that Firefox is absolutely shut down.
Based on those above, it should be working. I thought it was the CSS code, however Stylus have no issue with the code. Yes, there are two empty rules in there because I got the impression that CSS strongly relies on inheritance. So I set this way to ensure that that nothing will be overridden by the website CSS. I created a clean fresh profile and set the same thing above and restarted Firefox. Unfortunately, it didn't work. So the addons are ruled out. my default profile is ruled out since the clean fresh profile having the same issue.
I don't know what is the possible issue of this? I don't know if my CSS is defined correctly since Stylus does not have a issue with it and applying CSS on all websites. Anyone have a clue?
My CSS content:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
a: link {} a: visited {
color: #ffa500 !important;
} a: hover {} a: active {
color: #ffa500 !important;
}
Chosen solution
Thank you, thank you, thank you so much for your help. I managed to get userContent working. I thought it was the permission or file access issue. Cued me opening up ProcMon and checking if Firefox can access it. And Firefox accesses the file just fine. I checked the CSS code, and I realized the error. There is a spacing between a: and visited:
a:" "visited {color: #ffa500 !important;}
That happened because I used Notepad++ beautifier to clean it up. I realized that it is for html and JS, not CSS *head desk repeatedly*. I fixed the spacing and it is working. To be fair, I am extremely novice with CSS, it is my first time working with CSS. That is an interesting journey for me. Thank you so much for helping me out and your patience with my incompetency.
Read this answer in context 👍 0All Replies (6)
I always forget to include the specs. I have Firefox 91.0.2 and Windows 10.
Just to confirm, this --
darkestdream said
- chrome folder is created and located in my profile root folder
-- should be the folder listed in the table on the Troubleshooting Information page, Profile Folder row. The chrome folder should slot in below the bookmarkbackups folder and above the crashes folder:
- bookmarkbackups
- browser-extension-data (not always present)
- chrome (folder you created)
- chrome_debugger_profile (not always present)
- crashes
I thought it was the CSS code, however Stylus have no issue with the code.
userContent.css should be able to do what Stylus does.
My CSS content:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
Don't use the XUL namespace for web pages, it limits the scope of your rules to legacy non-standard tags. Actually, I recommend not using it in userChrome.css either. https://www.userchrome.org/adding-style-recipes-userchrome-css.html#namespaces
jscher2000 said
-- should be the folder listed in the table on the Troubleshooting Information page, Profile Folder row. The chrome folder should slot in below the bookmarkbackups folder and above the crashes folder:
My apologies, English is not my native language. That is what I meant, the chrome folder is in my profile folder. I am assuming I am using the phrase incorrectly? Because about:profiles called my profile a root directory.
To confirm, the directory and the file are listed: ~\Users\<user_profile>\AppData\Roaming\Mozilla\Firefox\Profiles\<main_profile_folder>\chrome\userChrome.css?
userContent.css should be able to do what Stylus does.
Ok, so I just copy and paste my custom CSS in userContent.css?
Don't use the XUL namespace for web pages, it limits the scope of your rules to legacy non-standard tags. Actually, I recommend not using it in userChrome.css either. https://www.userchrome.org/adding-style-recipes-userchrome-css.html#namespaces
I see, thank you for this. Every guide I came across always scream to have the XUL includes, even there are multiple ready-made CSS with examples file that came with those same namespaces in GitHub and extensions.
I don't need to have the namespace set up? Keep it empty will applies on every website?
It sounds like your profile folder is correct. To modify the user interface, use a userChrome.css file and to modify websites (or built-in web pages like the Firefox Home / new tab page), use a userContent.css file.
A XUL namespace declaration can be used in userChrome.css files when you are styling XUL tags like <menuitem> but it is not applicable to HTML tags like <a> which you want to style. You can use two namespaces (XUL and HTML) as a workaround, but I recommend simply not using one at all.
Chosen Solution
Thank you, thank you, thank you so much for your help. I managed to get userContent working. I thought it was the permission or file access issue. Cued me opening up ProcMon and checking if Firefox can access it. And Firefox accesses the file just fine. I checked the CSS code, and I realized the error. There is a spacing between a: and visited:
a:" "visited {color: #ffa500 !important;}
That happened because I used Notepad++ beautifier to clean it up. I realized that it is for html and JS, not CSS *head desk repeatedly*. I fixed the spacing and it is working. To be fair, I am extremely novice with CSS, it is my first time working with CSS. That is an interesting journey for me. Thank you so much for helping me out and your patience with my incompetency.
Glad you found it, and sorry for not noticing that.