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

How can I increase the Line Number contrast on (Ctrl-U) Code view?

  • 3 replies
  • 2 have this problem
  • 1 view
  • Last reply by cor-el

more options

The line number is almost impossible to make out with my 20-20 vision! I have tried other themes (than the default) but these seem to have no effect on the code view. I use the line number to find console-logged errors when debugging on my PHP- and JavaScript-intense website.

Thanks.

The line number is almost impossible to make out with my 20-20 vision! I have tried other themes (than the default) but these seem to have no effect on the code view. I use the line number to find console-logged errors when debugging on my PHP- and JavaScript-intense website. Thanks.

Chosen solution

Hmm. Works for me. I do notice that you didn't include the !important flag. This flag is essential when you want to override and already defined property.

pre[id]:before, span[id]:before { color: #333 !important; }
Read this answer in context 👍 2

All Replies (3)

more options

That is not too difficult. The line number is added via a CSS counter that sets the color of the number to a rather faint #ccc value.

  • resource://gre-resources/viewsource.css
pre[id]:before,
span[id]:before {
  content: counter(line) " ";
  counter-increment: line;
  -moz-user-select: none;
  display: inline-block;
  width: 5ch;
  margin: 0 0 0 -5ch;
  text-align: right;
  color: #ccc;
  font-weight: normal;
  font-style: normal;
}

Add code to the userContent.css file.


@-moz-document url-prefix(view-source:){
pre[id]:before, span[id]:before {color: #333 !important}
}

  • create the chrome folder (lowercase) in the <xxxxxxxx>.default profile folder if this folder doesn't exist
  • use a plain text editor like Notepad to create a (new) userContent.css file in the chrome folder (file name is case sensitive)
  • paste the code in the userContent.css file in the editor window
  • make sure that you select "All files" and not "Text files" when you save the file via "Save file as" in the text editor as userContent.css.
    otherwise Windows may add a hidden .txt file extension and you end up with a not working userContent.css.txt file

You can use the button on the "Help -> Troubleshooting Information" (about:support) page to go to the current Firefox profile folder or use the about:profiles page.

more options

No joy. I think I followed the instructions (attached css.jpg), but no change in display (ffx.jpg).

more options

Chosen Solution

Hmm. Works for me. I do notice that you didn't include the !important flag. This flag is essential when you want to override and already defined property.

pre[id]:before, span[id]:before { color: #333 !important; }