You are here

Fix Site design horribleness with the stylish plugin

Celeste mentioned to me that a bunch of the design blogs she reads have switched to a grey font on a white background... which is.. frigging stupid and hard to read.

The neurotic problem solver that I am, I told her about Stylish, a Firefox Plugin that lets you easily write user style sheets on the fly before content loads in your browser.

You can fix pretty much any display annoyance with application of stylesheet rules these days. The only obvious drawback to this plan is that most people don't know CSS or how to wield it. That, I can't really help you with. I'm just planning on illustrating the power here. ; )

The target:
http://www.mstetsondesign.blogspot.com/

notice the grey text on a white background. Yeah.. you'll be upgrading your glasses prescription in no time.

go here:
https://addons.mozilla.org/en-US/firefox/browse/type:1
search for 'stylish'
( https://addons.mozilla.org/en-US/firefox/addon/2108 )
click 'install now', install it, and restart Firefox.

Once you're back up, you should have a stylish icon on your status bar. (the area at the bottom of your FF window)

Go to the site and right click on the icon. Select "Write Style For".
From the submenu, you want to select the whole domain without the 'www'. In this case it would be "for: mstetsondesign.blogspot.com".

You'll get a 'write style' dialog.

By default in there you'll see:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("mstetsondesign.blogspot.com") {


}

In the -moz-document domain... section, (between the brackets) you'll want to add:

body{
color: #000000 !important;
}

That says we want to set the body element's default font back to black, and use !important to override any other stylesheets or attribute level CSS.

The whole thing should look like:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("mstetsondesign.blogspot.com") {

body{
color: #000000 !important;
}


}

That's it. the next time that page loads, the fonts should be a nice readable black.

Comments

Aaron, thank you for the suggestion. I went in made the grey a little darker... see what you and Celeste think. I am always up for a little critiquing, plus I’d really hate to be the culprit for astigmatism.

Best, Lindsay

well.. you blog.. but you never figure anyone reads it... never underestimate the power of google to bring people to your door.

The site is fine, but yes, fonts need contrast. : )

Also, your site was chosen at random, from a pile of people who do that. Hope you don't take it personally.

Three-and-a-half months later, and the blog is still unreadable.