If you have regular web sites that you visit, I bet I’m safe in guessing that at least one of them has something about it that you wish was different. You know what I mean — a different background color, larger fonts, menus in a different location, etc.

That site for me is “Hack A Day”. I love to see what other hackers are up to, but reading posts on the site with their green and white, small point text on a black background is killer on my eyes.

The great thing about the way the web works is that the page formatting is delivered to the browser right along with its contents. Once I have it, I can do with it as I please. That means I can change colors, fonts and just about any other stylistic or functional element on the page.

I’m an avid Firefox user and use a plugin called Greasemonkey that allows me to execute javascript on any page I choose so I can make the page look and/or act the way I want it to. I’m not, by any means, a javascript expert but it was a cinch to hack together a solution that allowed me to completely reformat the “Hack A Day” site to a more color neutral theme that is much less strenuous on my eyes.

// ==UserScript==
// @name           Hackaday
// @namespace      http://localhost
// @description    Re-Theme hackaday.com
// @include        http://hackaday.com/*
// ==/UserScript==
 
// Let's change the body background to white
document.body.style.background = "#fff";
 
// Let's set our link hover, heading3 and paragraph settings
GM_addStyle("a:hover {background-color: transparent; border-bottom:0px;}");
GM_addStyle("h3 {color: #000;}");
GM_addStyle("p {color: #000; background-color: #fff; font-size: medium; line-height: normal}");

// Let's get rid of the border around the body text
GM_addStyle("#container {border-width: 0px;}");

// Change comment block backgrounds, colors and margins
GM_addStyle(".comment-body {background-color: #fff;}");
GM_addStyle("li.depth-2 {background-color: #fff;}");
GM_addStyle("li.depth-1 {background-color: #fff;}");
GM_addStyle(".comment-body {margin-left: 6px; margin-right: 6px;}");
GM_addStyle(".fn {color: #888;}");
GM_addStyle(".says {color: #888;}");
GM_addStyle(".cle h3 {color: #fff;}");

// Change the color of each link
var zElements = document.getElementsByTagName("a");
for (var i=0; i<zElements.length; i++) {
   zElements[i].style.color="red";
}

// Change the color of each blogroll block
var zElements = document.getElementsByClassName("statsclass1");
for (var i=0; i<zElements.length; i++) {
   zElements[i].style.backgroundColor="#959595";
}
var zElements = document.getElementsByClassName("statsclass2");
for (var i=0; i<zElements.length; i++) {
   zElements[i].style.backgroundColor="#aaa";
}

// Change the color of each sharedaddy instance
var zElements = document.getElementsByClassName("sharedaddy");
for (var i=0; i<zElements.length; i++) {
   zElements[i].style.backgroundColor="#555";
   zElements[i].style.color="#fff";
}

// Change the sharedaddy title settings
var zElements = document.getElementsByClassName("sd-title");
for (var i=0; i<zElements.length; i++) {
   zElements[i].style.color="#fff";
   zElements[i].style.marginLeft="6px";
}

// Change the color of the comment counts
var zElements = document.getElementsByClassName("cat-item");
for (var i=0; i<zElements.length; i++) {
   zElements[i].style.color="#000";
}

Following is a before and after image that shows the transformation.

If you’re not a Firefox user, it may still be possible to achieve these same results with your browser of choice. Run a few Google searches on how to run Greasemonkey Scripts in your favorite browser and chances are you’ll find a way to make it work

Until next time – GEEK OUT!

~GT~