[SOLVED] How can I change the colours on Firefox 'about' pages?
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)
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; }
}
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.
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.
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
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.
You need to add the !important; flag to override CSS rules that are already set on this page.
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
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?
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