HowTo: Site Specific CSS Defugglifier using Greasemonkey and FireFox

Problem: Fuggly Sites

People who use FireFox are aware of the wonders of user scripts and user styles.
You can use user styles to override the CSS style of any website.
Making a fuggly site look nice.
However they have had one major drawback.
A user style for FireFox applies to ALL websites, and an overridden CSS style may look great on one site but awful on another.
But worry not. There is a solution and it is disarmingly simple.
Use Greasmonkey
As I will now elaborate.

Of course, to follow this very simple how-to you need the following;

Extracting the CSS

The first thing you need to do is identify the elements whose styles you want to change.
I do this by simply looking at the source code for the website.
I locate the elements whose styles I want to override and note their id/name/classname information.
Then I do a bit of in-line testing.
This is where I use the save page as option in FireFox and then using the text editor of my choice I insert some CSS into the beginning of the BODY tag.
[css]
.post1 {background-color: FFFFCC}
.post2 {background-color: CCFFFF}
[/css]

Writing the Greasemonkey Defugglifier Script

After seeing that this has, approximately, the desired results I create a JavaScript file and call it temp.user.js
My example code uses the website http://www.b3ta.com/board/ as an example for how to replace styles.
You MUST change the @name and @include meta tags to reflect the website whose styles you desire to defugglify.
[Please note that I LIKE the style of the b3ta board and I am only using it as a convenient example]
[js]
// ==UserScript==
// @name b3ta: Site defugglifier
// @namespace http://www.coderkeitaro.com
// @description A site specific CSS defugglifier
// @include http://www.b3ta.com/board/*
// ==/UserScript==

// following is the overridden CSS
var css=”.post1 {background-color: FFFFCC}\n” +
“.post2 {background-color: CCFFFF}\n”; // keep adding lines for each overridden style.

// following inserts the style into the document. DON’T MODIFY
var insertedStyle = document.createElement(‘style’);
insertedStyle.type = ‘text/css’;
insertedStyle.innerHTML = css;
document.getElementsByTagName(‘head’)[0].appendChild(insertedStyle);
[/js]

Install new defugglifier

By simply opening the script file in FireFox the Greasemonkey extension will prompt you for installation.
Saying yes will give you your own site-specific defugglifier.

If you have typo’d and it does not work do not worry, Greasemonkey allows you to edit the script after it is installed using the "Tools | Manage User Scripts ..." dialog.
So you always get a chance to reverse any wrongs.

Another wonderful option of this dialog is the ability to add new sites to the defugglifier. So if a site uses the same mark-up you can just add it to the Included Pages list and hey presto! you have the style applied to that site!

You can even disable you defuglifier on-the-fly using this dialog.

A note about @include: this meta tag requires full domain path to be specified. So http://www.b3ta.com/board/* and http://b3ta.com/board/* are considered different!
Be careful.

I hope you enjoyed this brief tutorial on how to create a site-specific defugglifier.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s