How can I change how I see a website?
November 21, 2017 9:40 PM Subscribe
Please help me bleach a part of a website! I'm doing it with a Firefox add on, but it's not updated for 57 and I doubt that it ever will be, and I can't update Firefox until I can replace the function it fills for me. I want to stay with Firefox, and get updates. Please don't suggest Pale Moon.
Please help me help myself. And please bear with me. There must be a way to do this, because it can be done, but I don't even know how to ask. I don't know the vocabulary.
I know almost nothing about how websites work underneath. Something about code and stylesheets. I know there is an element inspection tool that shows the code, but none of it makes much sense to me. I don't want to learn how to write code or make websites. I can't even figure out how to make e-books look right if Calibre can't do it, and I am given to understand that websites and e-books are related in how they're put together. But I can follow instructions.
I want to update to Firefox 57, but the now legacy add on Color That Site! is the only thing that makes the forums on Ravelry usable for me on my computer. I spend a lot of time in the forums there.
When the site was updated earlier this year to include green bars on the top and bottom of the screen in the forums, it gave me headaches and nausea, kind of a visual claustrophobia. I don't have this exact problem with any other site, though I do hate the general trend of persistent bars at the top and bottom that sometimes leave only a few inches of usable viewing space on my small and fairly low resolution screen.
Ravelry's coder, Casey, was understanding and did put in a test feature thingy so that one could have the top toolbar roll up into itself as it would on a mobile browser, but it didn't disappear completely, and the animation made the problem worse for me. He was not into to making a colorless option, he's a good person who has to deal with 7 million knitters and I wasn't expecting him to. So I did it myself by bumbling around with Color That Site! until the green was gone. I do not know how I did it. I don't know how to replicate it without that add on.
Here are a pair of screenshots that show the difference between normal and fully de-colored bars. Normal version is Chrome, white bars are Firefox 56. The top bar is de-colored for the entire site, not just the forum section.
Whenever I try to search for other tools that will do the same thing, the only results I get are references to Stylish or similar add ons that require a user base that creates entire new styles for websites. Nuke Anything isn't the answer, though it is handy. I just need the green of the bars to go away, I want to keep the bars.
Windows 7, Lenovo X230, 1366 x 768
Please help me help myself. And please bear with me. There must be a way to do this, because it can be done, but I don't even know how to ask. I don't know the vocabulary.
I know almost nothing about how websites work underneath. Something about code and stylesheets. I know there is an element inspection tool that shows the code, but none of it makes much sense to me. I don't want to learn how to write code or make websites. I can't even figure out how to make e-books look right if Calibre can't do it, and I am given to understand that websites and e-books are related in how they're put together. But I can follow instructions.
I want to update to Firefox 57, but the now legacy add on Color That Site! is the only thing that makes the forums on Ravelry usable for me on my computer. I spend a lot of time in the forums there.
When the site was updated earlier this year to include green bars on the top and bottom of the screen in the forums, it gave me headaches and nausea, kind of a visual claustrophobia. I don't have this exact problem with any other site, though I do hate the general trend of persistent bars at the top and bottom that sometimes leave only a few inches of usable viewing space on my small and fairly low resolution screen.
Ravelry's coder, Casey, was understanding and did put in a test feature thingy so that one could have the top toolbar roll up into itself as it would on a mobile browser, but it didn't disappear completely, and the animation made the problem worse for me. He was not into to making a colorless option, he's a good person who has to deal with 7 million knitters and I wasn't expecting him to. So I did it myself by bumbling around with Color That Site! until the green was gone. I do not know how I did it. I don't know how to replicate it without that add on.
Here are a pair of screenshots that show the difference between normal and fully de-colored bars. Normal version is Chrome, white bars are Firefox 56. The top bar is de-colored for the entire site, not just the forum section.
Whenever I try to search for other tools that will do the same thing, the only results I get are references to Stylish or similar add ons that require a user base that creates entire new styles for websites. Nuke Anything isn't the answer, though it is handy. I just need the green of the bars to go away, I want to keep the bars.
Windows 7, Lenovo X230, 1366 x 768
Best answer: The Stylus extension works in Firefox 57. You can add your own styles without having to rely on the styles/themes created by the user base.
After installing Stylus, click on the blue "S" icon in the upper right and "Write style for: www.ravelry.com". It'll open an Edit Style tab. Paste this into the text box and save:
body.with_navigation_v2 #page_header { background: #ffffff !important; }
.topics #topic_toolbar { background-color: #ffffff; }
Screenshots here.
posted by kiripin at 10:22 PM on November 21, 2017 [14 favorites]
After installing Stylus, click on the blue "S" icon in the upper right and "Write style for: www.ravelry.com". It'll open an Edit Style tab. Paste this into the text box and save:
body.with_navigation_v2 #page_header { background: #ffffff !important; }
.topics #topic_toolbar { background-color: #ffffff; }
Screenshots here.
posted by kiripin at 10:22 PM on November 21, 2017 [14 favorites]
Response by poster: That did it, kiripin. Thank you very much!
posted by monopas at 11:27 PM on November 21, 2017 [2 favorites]
posted by monopas at 11:27 PM on November 21, 2017 [2 favorites]
This thread is closed to new comments.
In Firefox you can do it without an addon, via userChrome.css, which is in your Mozilla/Firefox profile directory. I'm sure Ravelry's header bar has some identifiable HTML tags, which you can paste into userChrome.css and use background-color: white (or whatever color you like). I'm not a member, so I can't see for sure how they've set things up.
posted by rhizome at 10:11 PM on November 21, 2017