This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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

Hierdie gesprek is in die argief. Vra asseblief 'n nuwe vraag as jy hulp nodig het.

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

  • 9 antwoorde
  • 1 het hierdie probleem
  • 49 views
  • Laaste antwoord deur 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.

Gewysig op deur ender21

Gekose oplossing

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; }
}
Lees dié antwoord in konteks 👍 2

All Replies (9)

more options

Gekose oplossing

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

Gewysig op deur 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.

Gewysig op deur 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.

Gewysig op deur ender21