Firefox Reader style website
July 25, 2021 12:43 PM Subscribe
I love the Firefox Reader! Would it be simple or complex for me to use Firefox Reader as my website style? If simple, please hold my hand and walk me through the steps.
I have a gitlab account, I have a website, I have the two connected to each other. I can do basic html/css and that's about it. Is there some code and/or files somewhere that I can copy/paste or upload to have the basic style for my website be identical to the Firefox Reader (with a citation)? If so, where is it and how do I add it?
I have a gitlab account, I have a website, I have the two connected to each other. I can do basic html/css and that's about it. Is there some code and/or files somewhere that I can copy/paste or upload to have the basic style for my website be identical to the Firefox Reader (with a citation)? If so, where is it and how do I add it?
Response by poster: I don't want just one, if possible I want the little thingy that lets you choose.
posted by aniola at 1:39 PM on July 25, 2021
posted by aniola at 1:39 PM on July 25, 2021
You can find the HTML code for the toolbar in aboutReader.html.
The JavaScript code is at AboutReader.jsm, but you won’t be able to use that as-is. (It uses a lot of Firefox-internal functions that aren’t accessible to normal web pages.) But the key functionality is mostly done just by adding or removing classes on the body or other elements. You can replicate this if you can learn some basic JavaScript, using classList and onclick.
Using the web developer tools (like "Inspect element") on a Reader View tab may help you see how the different parts fit together in practice.
posted by mbrubeck at 1:55 PM on July 25, 2021 [1 favorite]
The JavaScript code is at AboutReader.jsm, but you won’t be able to use that as-is. (It uses a lot of Firefox-internal functions that aren’t accessible to normal web pages.) But the key functionality is mostly done just by adding or removing classes on the body or other elements. You can replicate this if you can learn some basic JavaScript, using classList and onclick.
Using the web developer tools (like "Inspect element") on a Reader View tab may help you see how the different parts fit together in practice.
posted by mbrubeck at 1:55 PM on July 25, 2021 [1 favorite]
Response by poster: Thanks, these are both helpful answers.
"Complex" would be defined by me in this case as "learn some basic JavaScript".
"Simple" would be defined by me in this case as "someone who already knows basic JavaScript can, in the time it takes to type out an answer on Ask Metafilter, and, possibly in their sleep, produce something that I am able to use as-is, and they do". I am so hopeful.
posted by aniola at 2:20 PM on July 25, 2021
"Complex" would be defined by me in this case as "learn some basic JavaScript".
"Simple" would be defined by me in this case as "someone who already knows basic JavaScript can, in the time it takes to type out an answer on Ask Metafilter, and, possibly in their sleep, produce something that I am able to use as-is, and they do". I am so hopeful.
posted by aniola at 2:20 PM on July 25, 2021
Mod note: aniola, if you need someone to produce code for you, this needs to go in jobs
posted by Eyebrows McGee (staff) at 4:23 PM on July 25, 2021 [1 favorite]
posted by Eyebrows McGee (staff) at 4:23 PM on July 25, 2021 [1 favorite]
Response by poster: My question was: is this simple or complex? I will take that to mean it's complex.
posted by aniola at 4:50 PM on July 25, 2021 [1 favorite]
posted by aniola at 4:50 PM on July 25, 2021 [1 favorite]
You could probably string this together following a few tutorials and googling. A quick google for "change stylesheet with dropdown" found me this and this, for example. These are both early-2010s search results so are probably about as far from "best practices" as you can get, but it should be a reasonable jumping-off point for the bits of javascript and HTML interaction you need.
posted by Alterscape at 5:43 PM on July 25, 2021
posted by Alterscape at 5:43 PM on July 25, 2021
« Older Fixing a very old butane lighter | My mom is sick, my phone is bricked, and FedEx is... Newer »
This thread is closed to new comments.
This uses dark text on a white background by default. You can use <body class="dark"> or <body class="sepia"> in your HTML to select one of the other color schemes.
posted by mbrubeck at 1:16 PM on July 25, 2021 [1 favorite]