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

Developer Console colours and Folder Icons

more options

hello

1) I've been trying to change the console colours for the web developer console using userChrome.css, but I have failed. I want to set the background for console.info text to be light blue while the text color to be bold dark blue font. I would like to have it only in light theme. Also I would like to change the font size of the console for both themes.

2) Is it possible to change the folders of bookmarks to yellow. I read there are SVG. I tried to solution that are meant to change the folders to yellow, but failed. Can someone point me to a dummies guide for a solution.

The first one is the more important issue.

Thank you in advance

hello 1) I've been trying to change the console colours for the web developer console using userChrome.css, but I have failed. I want to set the background for console.info text to be light blue while the text color to be bold dark blue font. I would like to have it only in light theme. Also I would like to change the font size of the console for both themes. 2) Is it possible to change the folders of bookmarks to yellow. I read there are SVG. I tried to solution that are meant to change the folders to yellow, but failed. Can someone point me to a dummies guide for a solution. The first one is the more important issue. Thank you in advance

Chosen solution

For reference, here's the userContent.css file I used for testing. Please ignore the other two rules that were left over from some other testing.

https://www.jeffersonscher.com/temp/userContent.css

Read this answer in context 👍 1

All Replies (20)

more options

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. ??

more options

Yes, userContent.css changes colours in the Inspector.

more options

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.

Modified by ProfessorLayman

more options

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:

more options

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; }
}
more options

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;
  }
}
more options

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.

more options

ProfessorLayman said

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

more options

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

more options

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).

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

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.

more options

ProfessorLayman said

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.

more options

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.

Modified by ProfessorLayman

more options

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

more options

ProfessorLayman said

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.

more options

jscher2000 - Support Volunteer said

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.

more options

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

more options

jscher2000 - Support Volunteer said

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.

more options

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).

more options

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
more options

jscher2000 - Support Volunteer said

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.

Modified by ProfessorLayman

  1. 1
  2. 2