“Hack A Day” Hack with Greasemonkey

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~

6 thoughts on ““Hack A Day” Hack with Greasemonkey”

  1. I thank you for this.

    I am old (been hacking since the 60’s) and my eyes are getting tired.

    For the ancient, like myself, it would have helped if you had added:

    Install the greasemonkey extension (Firefox.. Tools.. Add-ons).
    Save the script as hackaday.user.js
    Restart firefox.
    Drag the hackaday.user.js script from your filemanager into your firefox window. It is installed.
    (I’m running linux).

    And I’ve bookmarked you 😉

    BW

  2. Yes, Bill its tough on our eyes ! – fortunately I designed my first games playing machine whilst still at school and finished it it after three years college, when some transistors were reaching experimenters so that I could implement Exclusive-Or-gates !
    Then two years later designed a range of Logic bits used in the DDP1 – an 18 bit computor we finshed in 1961.
    Geoff Gus Stacey.

  3. HEy I am doing a assignment for my practical, to change visited links color. But a:lick and a:visiyed not working. Basically i have to change visited link’s color for every google search operation. Can you tell me how to do it?

Leave a Reply to Mark Cancel Reply

Your email address will not be published. Required fields are marked *