Hardest Problem in Computer Science: Centering Things
sajran, The article is very interesting but the fake cursors are infuriating and make it nearly impossible to focus on the content. It’s a clever joke but without a way to disable it, the author is just sabotaging his own content.
DABDA, The “dark mode” is even more frustrating.
Ephera, Huh, I had read this on mobile, where they didn’t show up (which I guess, makes sense).
In the HTML, all the way at the bottom, there’s a
<div id=“pointers” …>, which you can delete to make them disappear…
Limfjorden, Danish 
How does one make this edit permanent? I’ve been looking to delete the sidebar on fandom, but an adblocker like uBO is not enough, since I need to edit the backgrounds margin. I don’t know anything about webdev, and would be grateful for help.
Ephera, Well, making such a change permanent on a foreign webpage, that’s not really something you do in webdev, but I happen to know anyways.
What you want is usually referred to as a “user style” and you can achieve that with e.g. the Stylus extension.You can create a new style and then paste this into it:
<span style="color:#323232;">@-</span><span style="color:#63a35c;">moz-document</span><span style="color:#323232;"> domain("fandom.</span><span style="color:#795da3;">com</span><span style="color:#323232;">") { </span><span style="color:#323232;"> .global-navigation { </span><span style="color:#323232;"> </span><span style="color:#0086b3;">display</span><span style="color:#323232;">: none; </span><span style="color:#323232;"> } </span><span style="color:#323232;"> </span><span style="color:#323232;"> </span><span style="color:#63a35c;">body </span><span style="color:#323232;">{ </span><span style="color:#323232;"> </span><span style="color:#0086b3;">margin-left</span><span style="color:#323232;">: </span><span style="color:#0086b3;">0 </span><span style="font-weight:bold;color:#a71d5d;">!important</span><span style="color:#323232;">; </span><span style="color:#323232;"> } </span><span style="color:#323232;">} </span>Then save it and fandom.com should look nicer.
If you ignore the first and the last line, these are normal CSS rules, so that is then where webdev knowledge can help…
IllNess, I don’t want to step on any toes but your CSS only works on the home page.
I added more CSS for it to work on the fan pages:
<span style="color:#323232;">@-moz-document domain("fandom.com") { </span><span style="color:#323232;"> .global-navigation { </span><span style="color:#323232;"> display: none; </span><span style="color:#323232;"> } </span><span style="color:#323232;"> </span><span style="color:#323232;"> body > .main-container { </span><span style="color:#323232;"> margin-left: 0 !important; </span><span style="color:#323232;"> } </span><span style="color:#323232;"> </span><span style="color:#323232;"> body { </span><span style="color:#323232;"> </span><span style="color:#323232;"> margin-left: 0 !important; </span><span style="color:#323232;"> </span><span style="color:#323232;"> & > .main-container { </span><span style="color:#323232;"> </span><span style="color:#323232;"> width: 100% !important; </span><span style="color:#323232;"> </span><span style="color:#323232;"> margin-left: 0 !important; </span><span style="color:#323232;"> } </span><span style="color:#323232;"> </span><span style="color:#323232;"> & > .fandom-sticky-header { </span><span style="color:#323232;"> left: 0 !important; </span><span style="color:#323232;"> } </span><span style="color:#323232;"> } </span><span style="color:#323232;">} </span>
Ephera, Ah, absolutely no toes stepped on. I’ve never used Fandom myself, this was just what I could whip up real quick.
If you happen to use Fandom more often, maybe you’d like to publish this in Stylus? Even if it’s just as a personal backup.
I mainly didn’t do it, because without me using Fandom, the user style could be broken by tomorrow.P.S.: I think, the first
body > .main-container {-block can be removed, as you set the same style in the nested block underneath…
IllNess, Yes, you are correct. Good catch.
<span style="color:#323232;"> @-moz-document domain("fandom.com") { </span><span style="color:#323232;"> .global-navigation { </span><span style="color:#323232;"> display: none; </span><span style="color:#323232;"> } </span><span style="color:#323232;"> </span><span style="color:#323232;"> body { </span><span style="color:#323232;"> margin-left: 0 !important; </span><span style="color:#323232;"> </span><span style="color:#323232;"> & > .main-container { </span><span style="color:#323232;"> width: 100% !important; </span><span style="color:#323232;"> margin-left: 0 !important; </span><span style="color:#323232;"> } </span><span style="color:#323232;"> </span><span style="color:#323232;"> & > .fandom-sticky-header { </span><span style="color:#323232;"> left: 0 !important; </span><span style="color:#323232;"> } </span><span style="color:#323232;"> } </span><span style="color:#323232;"> } </span>It was very nice of you to write this out for the other guy. I will look through the uploads and see if anyone else has the same idea.
Limfjorden, Thank you! I had to change “body” to “.main-container” to get it to work, but thank you nonetheless!
victorz, This guy webdevs
Add comment