For #1, I don't know that I've seen one of those before, so as the first step, I generated one. Is this the kind of message you meant?

It looks like the first thing is to put your rules in a userContent.css file:

https://support.mozilla.org/questions/1367543

Does that help? I haven't tried it myself (can't restart Firefox at the moment).

For #2, I have some rules on my page here:

https://www.userchrome.org/what-is-userchrome-css.html#colorbookmarkfolder

Unfortunately, they add folders to blank items in the Library window, but I don't know how to stop that from happening. ??

Yes, userContent.css changes colours in the Inspector.

Thank you both. I cannot figure the CSS out then. I renamed the userChrome.css to userContent.css and placed the profile dirctory under "chrome" folder.

@ Terry Can you please share the CSS file. Mine does not work at all. I renamed it to userContent.css.

@ jscher2000 For #2, that's one of the solutions I tried to follow. I couldn't get it to work. I will try again, but not tonight as it is getting late.

Code for the user interface and the Bookmarks Manager (Library) still goes in userChrome.css. Only code for webpages and that includes the developer tools and about: pages needs to be placed in userContent.css.

See also:

• https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox

I'm not sure what code in my file changed those colours. I think it was a stanza referring to chrome pages plus various elements such as div.

@-moz-document url-prefix("chrome:"){
    div { background-color: #eadbc8 !important;
    color: #000080 !important;
    font-size: 17px !important; }
}

For the Info message colors, you can try this:

/*** Dev Tools - Web Console ***/
@-moz-document url-prefix(chrome://devtools/content/webconsole/index.html){
  /* Info message background, text, and icon colors */
  .message.info {
    background-color: #bff !important;
  }
  .message.info .message-body > .objectBox-string {
    color: #00b !important;
  }
  .message.info .icon {
    color: #00b !important;
    fill: #00b !important;
  }
}

Sorry for the late reply. Only managed to get back to the issue today.

@co-rel Great tool. Very useful tool. Thanks

Well none of the solutions seem to work. I even tried to edit the normal message (console.log). Tried a few themes and they seem to edit the console without issue,. but it edits the whole firefox theme. Slight changes to console seem to a bit more difficult.

It seems that I need to set toolkit.legacyUserProfileCustomizations.stylesheets to true, to enable leagacy stylesheets.

It seems that I need to set toolkit.legacyUserProfileCustomizations.stylesheets to true, to enable leagacy stylesheets.

Yes, sorry, I assumed you already knew all the details on setting up userChrome.css /userContent.css files.

Is it working now? If not, please cross-check my checklist: https://www.userchrome.org/how-create-userchrome-css.html

I followed your instruction and it still does not work. Does it work for you?

It is not that difficult to create userContent.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).

• https://support.mozilla.org/en-US/kb/use-troubleshooting-information-page-fix-firefox

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 userContent.css (name is case sensitive). In this userContent.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userContent.css file as a plain text file.

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 userContent.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 userContent.css file.

More info about userContent.css and userChrome.css in case you are not familiar: *https://www.userchrome.org/what-is-userchrome-css.html

• https://www.userchrome.org/how-create-userchrome-css.html
• https://www.userchrome.org/firefox-changes-userchrome-css.html

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.

• about:config => toolkit.legacyUserProfileCustomizations.stylesheets = true
• https://support.mozilla.org/en-US/kb/about-config-editor-firefox

I followed your instruction and it still does not work. Does it work for you?

It does this for me:

Common issues with your first userContent.css file are:

(1) Your editor added .txt or another file extension after .css.

Set Windows to show all file extensions to spot this issue.

(2) Your chrome folder is not in the expected location.

When you use the "Open Folder" button on the "Profile Folder" row of the Troubleshooting Information page, you should immediately see the chrome folder without having to dig around for it.

I have followed all instructions. I never hide the extentions of files. It is in the profile folder, I have enabled leagcy stylesheets and yet it does not work. This really bugs me as I have done this before in FF legacy portable and WaterFox Classic.

This has my head itching.

FYI: Windows 10, downloaded FIreFox recently, a completely new profile to test it out.

Can you post a screenshot that shows the location of userChrome.css and possibly its content?

FYI: Windows 10, downloaded FIreFox recently, a completely new profile to test it out.

Just to confirm: it's not the version of Firefox from the Windows store which has the profile folder in an unusual undisclosed location.

ProfessorLayman said

Just to confirm: it's not the version of Firefox from the Windows store which has the profile folder in an unusual undisclosed location.

No. FIrst time hearing about this version.

I downloaded it from Mozilla. I know I have done everything correctly as I also have a portable version that I manged to get [https://github.com/xiaoxiaoflood/firefox-scripts Firefox Scripts) (FFS) to work. Only FFS is on portable, this issue with the conosle is on the mozilla official non-portable version downloaded from the Mozilla site.

I plan to move FFS to the non-portable version once I can get this console issue to work, or I give up on it. Good chance I will. As I raised this issue a few years ago and I had the same problems. Ohers could get it to work but I cannot.

Do any of your userChrome.css or userContent.css rules work (on regular Firefox) at this point?

Do any of your userChrome.css or userContent.css rules work (on regular Firefox) at this point?

All I tried on the "regular" firefox was the userChrome.css to change console colours and nothing else. It's a fresh install of Mozilla firefox. I removed the old directory and resintalled everything. And the profiles and everything else was removed.

The FF portable was for me to test out this script enabler only.

If you mean my rule for the console.info lines, that code goes into a userContent.css file due to the way the dev tools are coded (they are embedded pages rather than part of the UI itself).

I've noticed that they have been changing some chrome URIs overtime (html/xhtml), maybe I'll consider to use url-prefix() and leave out the trailing index.(x)html for easier maintenance.

chrome://devtools/content/webconsole/index.html
chrome://devtools/content/debugger/index.html
chrome://devtools/content/styleeditor/index.xhtml
chrome://devtools/content/performance-new/index.xhtml
chrome://devtools/content/memory/index.xhtml
chrome://devtools/content/netmonitor/index.html
chrome://devtools/content/storage/index.xhtml
chrome://devtools/content/dom/index.html
chrome://devtools/content/accessibility/index.html
chrome://devtools/content/application/index.html

If you mean my rule for the console.info lines, that code goes into a userContent.css file due to the way the dev tools are coded (they are embedded pages rather than part of the UI itself).

I meant userContent. It's simple enough instructions and your site gives a dummies guide, and I still cannot not get it to work. I copied the exact code you gave and placed it in a newly created "userContent.css" in a clean FF installation with a new profile.

If someone is willing to upload a dummy profile with it working, I can try that. Apart from that, unless someone else has any more ideas that I can try out, it's a dead end.

Lastly, just in case there are no replies, I thank everyone here. Your help was very much appreciated.