Firefox Quantum Reader View add custom css for font and colors
Hello Everyone! I'm running Debian sid. I have manually installed firefox quantum in my home directory. I love it! I prefer it over chrome or chromium. Its is fast, stable, and all the addon's are working well and have been perfect for my needs. However I am quite peeved with reader view. I can't seem to comprehend why a lack of customization options exist considering css is used to theme reader view in general. I realize quantum just came out, so excuse me for my ignorance. I really appreciate the hard work the development team has put in to this open source project. I have been using Mozilla products since the nineteen-nineties. May someone please direct me to a resource that could help me with this problem(specifically custom fonts and custom colors for background and text)? I can be technical, however I have no experience with the customization options from a developers perspective of any web browser. If necessary I am familiar with basic css so I could edit and, or customize any files related to reader view and the options I wish to enable. Please help me. I love Quantum I won't switch back to chrome no matter what. But this is driving me crazy, everything else is perfect!
Modified
Chosen solution
Hi guys found the answer here ---> https://www.reddit.com/r/firefox/comments/6v2pfo/what_extension_do_you_use_as_dark_reader_mode/
I was using this plugin before ----> https://addons.mozilla.org/en-US/firefox/addon/dark-background-light-text/
Which is perfect if you don't mind reader view and the about: pages being light. The userContent.css and userChrome.css just don't seem to be working for me (maybe I'm doing it wrong).
Instead I just changed the colors permanently in the preferences to black with grey text. That ended up making everything consistent on all pages including reader view and the about: pages.
So in the end I didn't even need a plugin the features I needed were already built-in! Jackpot!
Read this answer in context 👍 0All Replies (6)
Sorry, I do not have that one stashed yet.
https://www.howtogeek.com/334716/how-to-customize-firefoxs-user-interface-with-userchrome.css/ http://techdows.com/2017/09/classic-theme-restorer-userchrome-css-modify-firefox-57-photon-ui.html https://www.accessfirefox.org/Theme-Font-Size-Changer.php https://www.userchrome.org/ https://www.accessfirefox.org/Firefox_Accessibility_Themes.php https://www.userchrome.org/what-is-userchrome-css.html http://kb.mozillazine.org/UserChrome.css https://github.com/axydavid/FirefoxUI/blob/master/README.md https://github.com/wilfredwee/photon-australis Note not all code in one place, dedicated sub-Reddit/Firefox on this
Please let us know if this solved your issue or if need further assistance.
See also:
Pkshadow thanks for the effort. I'm trying everything now. Some of those pages I have seen from googling myself. I'm wondering if other plugins I have installed were affecting them considering they were based on changing the theme of all websites in general. I'll post back and give credit if you were right!
Cor-el, thanks I tried that add-on, and please correct me on this, the status bar seems to be the only way to "tweak" the Reader add-on. However the status bar is gone in Firefox 57 "Quantum". Am I wrong? Or is there another way to access the features that allow you to customize Reader? Please let me know. You would be a life saver.
Also if anyone can just give me a general answer on how to make all the about:"*" pages the same common dark theme including about:support, about:reader, about:config, etc,etc,etc... That would be great. That is really my main question. All the other solutions posted just don't seem to work. Posters, can I ask you one more question? Did you even try any of those solutions yourselves before answering my question? Or were you guys just taking a shot in the dark?
Chosen Solution
Hi guys found the answer here ---> https://www.reddit.com/r/firefox/comments/6v2pfo/what_extension_do_you_use_as_dark_reader_mode/
I was using this plugin before ----> https://addons.mozilla.org/en-US/firefox/addon/dark-background-light-text/
Which is perfect if you don't mind reader view and the about: pages being light. The userContent.css and userChrome.css just don't seem to be working for me (maybe I'm doing it wrong).
Instead I just changed the colors permanently in the preferences to black with grey text. That ended up making everything consistent on all pages including reader view and the about: pages.
So in the end I didn't even need a plugin the features I needed were already built-in! Jackpot!
Copy the original css for about:reader (chrome://global/skin/aboutReader.css aboutReaderContent.css aboutReaderControls.css) in userContent.css ("open folder" from about:support, create folder chrome, create userContent.css in it, if in Windows be careful to not create userContent.css.txt instead), remove the lines you don't want to change and change those you want. You may have to add !important at some (or all) lines. The section should be named @-moz-document url-prefix("about:reader") { } (your code between the curly brackets). Firefox needs to be restarted for changes to take effect (shift+f2 and type restart if you want to save the tabs). Example: @-moz-document url-prefix("about:reader") { .toolbar {
background-color: #222 !important; border-right: 1px solid #555 !important;
}
.button {
color: #cecece !important; background-color: #222 !important;
}
.toolbar .button {
border-right: 1px solid #555 !important; border-bottom: 1px solid #555 !important;
} }
Modified