Better living through user stylesheets II

[I posted a version of this a year ago. I've updated it for both Wiki's latest annoying campaign and to add Facebook's "stream" to the list. If you get real serious about this kind of thing, it is probably better to install some sort of ad blocker. But then you have to trust the people who make the ad blocker.]

Most modern browsers support user stylesheets, i.e., stylesheets that are written by the user, deployed in the browser and treated as the last part of the style "cascade." User stylesheets allow for overriding individual web sites' styles at the local level for such things as accessibility.

They also allow us to quite quickly get rid of annoying things from web sites we visit all the time, without having to install a browser extension (how do you know who wrote your ad blocking extension and what they're doing with the browser access you've granted their app?) In my case, the annoying things I wanted rid of were the sad puppy-dog-eyes faces at the top of Wikipedia pleading for more money. That campaign's been going on forever now, it seems - even public radio and TV get the point and only shake us down twice a year for a week at a time. And this time I also wanted to get rid of Facebook's "ticker," especially since they're going to start embedding ads in it.

With a bit of sleuthing I determined what tags were holding the problematic content and quickly came up with some CSS to hide it. Dropping that CSS into the user stylesheet in the right magic location immediately rid all the pages of the ad and Wiki and Facebook were back to looking like their old selves again.

If you have even a slightly technical bent, you can benefit from this, too. The following instructions presume Chrome as the browser, but this article tells you the locations and CSS files to use if you are using other browsers - the stylesheet file content should remain the same.

For Chrome, you need to find the Custom.css file. On Windows Vista/7/2008, it is located at the following (replace your-user-id with, ahem, your user id):

    C:\Users\your-user-id\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets

[Presumably on Windows XP it will be under C:\Documents and Settings\ in a similar location.]

For Mac OS X, it is at:

    ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/

On Ubuntu Linux it is found here:

    ~/.config/google-chrome/Default/User StyleSheets

In all three locations you should find a file called Custom.css. Open this file for editing (Notepad is handy on Windows, otherwise use the editor of your choice). It will probably be empty. Inside the file, place the following line (letter case is important!):

#siteNotice { display: none; }

.ego_section { display: none; }

     .ticker_stream { display: none; }

The first line is for Wiki, the second two for Facebook (yes, they really call the ticker the "ego section" - insulted yet?)


Save the file. Navigate Chrome to Wikipedia and you should no longer see the shakedown pleading banner! Nor should you see the stream in Facebook. If you want to revert, simply delete both lines from the file and save the file again (don't delete the file - it probably wouldn't hurt anything, but...)

Caveats:

1. You will never see any other site announcements from Wiki, either, as long as they continue to use the siteNotice tag id for thediv they wrap site announcements in. Nor will you see anything Facebook decides to display in the "ego section."
2. If any other site you visit happens to use an id attribute on an element and call it "siteNotice" or a class attribute and call it "ego_section," you won't see that content either.

I consider both of the above a small price to pay to not have to look at Jimmy Wales again when all I'm interested in is the capital of Albania.

Enjoy!