Created at 29 Jan 2016 06:43   Last update at 24 Jun 2016 05:55


Today's extensive use of CSS can alter the user experience when they are visiting a website… well for better or for worse. In this article I will take two websites that I frequently visit and have a bad overall experience: Wikia and Pinterest.

UPDATE: Pinterest has changed their nag module, updated CSS are on the Pinterest section.

It is the same story with everyone visiting Wikia, they are looking for an information related on a certain fandom, and suddenly…

Ads... ads everywhere!
Ads… ads everywhere!

Don't they think that's enough ads? The one on the right, above "You May Also Like" is an animated ads too. However, as if things are not enough, Wikia has that Sponsored Links (courtesy of Taboola) for things with clickbait titles for stuff you probably do not even care. And they have one on the bottom too!

This section of page contains NOTHING related to the said article!
This section of page contains NOTHING related to the said article!

And to add insult to injury, Wikia has this "You are leaving Wiki…" popup which is used for, wait for it… more ads! Whats worse is that this popup hijacks your middle click, so you cannot bypass it using open-link-in-new-window-middle-click. I do appreciate ads, but not on this severe magnitude, as it ruins the reading experience.

On the same side but not with ads, we have Pinterest. You probably have the same story, you are looking for awesome picture in Pinterest.

At first, wait for it...
At first, wait for it…

Then you scroll, something appears at the bottom.

The dark comes crawling...
The dark comes crawling…

When you scroll some more, the evil gains its TRUE POWER

TOO LATE, IT REACHES ITS TRUE POWER
TOO LATE, IT REACHES ITS TRUE POWER

The block ruins user experience for a visiting guest and nags them to login. Try using Inspect Element in Opera or Chrome, the module was aptly named.

No surprise there.
No surprise there.

You do not have to take this with a combination of few extensions.

Extensions (Chrome and Opera)

Opera user might want to install Download Chrome Extension first to make Opera able to get Chrome extensions.

The first and foremost, although extreme is AdblockPlus (available to Opera and Chrome). Adblock plus removes most ads, but this might also block reasonable ads, so ensure you only use this on a site with extremely annoying ads (cough wikia cough)

The second, is Stylebot Which allows you to override website's CSS. Once you installed Stylebot, go to its Options. Click on Style tab, then Add New Style. On the URL field, type "wikia.com". On the Code field below, input these CSS:

#WikiaNotifications, #WikiaArticleBottomAd, .WikiaRail, .WikiaArticleFooter, #WikiaBar {
    display: none;
}
 
article.WikiaMainContent {
    width: 100%;
}
 
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
 
body, .WikiaArticle,ul.nav {
    font-family: 'Open Sans';
    font-size: 16px;
}

Here's a screenshot for reference:

The Wikia CSS should look like this
The Wikia CSS should look like this

Also add another one for Pinterest.com with this code:

.ModalManager.Module {
    display: none;
}
 
div.Module.Nags {
    display: none;
}
 
div[style*="background: rgba(0, 0, 0, 0.85098)"] {
    display: none;
}

Here's a screenshot for reference:

The Pinterest CSS should look like this
The Pinterest CSS should look like this

Remember to save after creating each CSS.

Now if you browse to Wikia, enjoy the 100% width for the articles.

Nothing bothers your reading anymore!
Nothing bothers your reading anymore!

And if you browse to Pinterest, say goodbye to the nag module.

No more I-don't-care-who-uses-Pinterest-to-do-shit login!
No more I-don't-care-who-uses-Pinterest-to-do-shit login!

Last thing, you need Tampermonkey to restore your right to middle click. Opera version is available, but still in beta. After installing:

  • Get the Stop Middle Click Hijacking script.
  • Go to Tampermonkey's Option, Click on Installed Usercripts tab, click on Stop Middle Click Hijacking name, then click on its Settings tab (not the one beside Installed Userscripts!).
  • Look for User Includes (bottom, right), and click Add. Input "*://*" then OK.
  • Now all websites cannot tamper with your middle click ability!

Below is the screenshot for reference:

You only need to edit the bottom-left User includes
You only need to edit the bottom-left User includes

That's all! If you know even a bit of CSS, you can make most website bend to your will using Stylebot. Good luck!