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

[SOLVED] How can I change the colours on Firefox 'about' pages?

  • 9 replies
  • 1 has this problem
  • 5 views
  • Last reply by ender21

more options

I would like to change the background colour of the 'about' pages to #EFEFEF or a named colour if such code cannot be used and, if possible, the font colour as well. The white background is my main focus.

I am hopeful that the colour(s) can be changed using the userChrome.css file.

I have been unable to find an answer to the specific question or any source providing a comprehensive list of element and attribute names.

I am using Firefox 20.0.1 on a Linux operating system.

I would like to change the background colour of the 'about' pages to #EFEFEF or a named colour if such code cannot be used and, if possible, the font colour as well. The white background is my main focus. I am hopeful that the colour(s) can be changed using the userChrome.css file. I have been unable to find an answer to the specific question or any source providing a comprehensive list of element and attribute names. I am using Firefox 20.0.1 on a Linux operating system.

Modified by ender21

Chosen solution

Which about pages are you referring to?

You will probably have to style each of them individually via code in userContent.css.

@-moz-document url(about:blank){
 * { background-color: #EFEFEF; }
}

@-moz-document url(about:config){
 * { font-size: 11pt !important; }
 #configTreeBody { background-color:#f0f0f0; }
}
Read this answer in context 👍 2

All Replies (9)

more options

Chosen Solution

Which about pages are you referring to?

You will probably have to style each of them individually via code in userContent.css.

@-moz-document url(about:blank){
 * { background-color: #EFEFEF; }
}

@-moz-document url(about:config){
 * { font-size: 11pt !important; }
 #configTreeBody { background-color:#f0f0f0; }
}
more options

Thank you. My main mistake was thinking the settings should be in userChrome.css.

The pages I most wish to change are about:config and about:addons. I'll experiment tonight and report back.

more options

Hello. I tried the code with mixed results.

/* background colour of about:config */

@-moz-document url(about:config){

#configTreeBody { background-color:#EFEFEF; }

}

/* background colour of about:addons */

@-moz-document url(about:addons){

* { background-color: #EFEFEF; }

}

The background colour of about:addons changed as desired. The white background on that page was particularly hard on my eyes. The result with about:config was not as good as the result obtained using the same formula as about:addons. Either code left alternative lines white or nearly white. The code above left the text area white also.

Thank you again for your help.

more options

The about:config uses treechildren to display its content and is thus more difficult to style.

@-moz-document url(about:config){
 treechildren::-moz-tree-row(even) { background-color: #DDD!important; }
 treechildren::-moz-tree-row(odd) { background-color: #EEE!important; }
 treechildren::-moz-tree-row(selected) { background-color: #07B!important; }
}

Modified by cor-el

more options

Thanks for the code and that link. about:config shows contrasting line colours even when I specify the same colour for odd and even rows:

/* about config again */

@-moz-document url(about:config){

treechildren::-moz-tree-row(even) { background-color: #d0d0d0; }
treechildren::-moz-tree-row(odd) { background-color: #d0d0d0; }

}

The colour you suggested (as used above) proved to be better for about:addons than the one I used because when an item in the add-ons list is selected the font colour changes to white which is still visible against the background #d0d0d0.

more options

You need to add the !important; flag to override CSS rules that are already set on this page.

more options

Thank you. I can hardly believe I missed that again. Adding it makes no difference. That page doesn't matter so much.

Modified by ender21

more options

This work for me on Linux.

@-moz-document url(about:config){
 treechildren::-moz-tree-row(even) { background-color: #EEE!important; }
 treechildren::-moz-tree-row(odd) { background-color: #EEE!important; }
 treechildren::-moz-tree-row(selected) { background-color: #07B!important; }
}

Does other code in the file work?

more options

Thanks again. I inserted this stanza:

@-moz-document url(about:config){

treechildren::-moz-tree-row(even) { background-color: #EEE; !important }
treechildren::-moz-tree-row(odd) { background-color: #EEE; !important }
treechildren::-moz-tree-row(selected) { background-color: #07B; !important }

}

The background colours of odd and even rows still differ and the background of a selected row is blue.

The file is very old and I can't be certain of all its contents. Most of the stanzas are ineffective. I have checked the efficacy of one stanza by commenting it out and it is having the desired result. In addition the new stanza for about:addons is having the desired result. Is there somewhere I can get a clean and up-to-date template? My testing profile has no 'chrome' folder.

Modified by ender21