UPDATED: “Hack A Day” Hack with Greasemonkey

Back in February of this year, I released a Greasemonkey Script that would modify the theme from the Hack A Day site so it was a little easier on my “old eyes”!

The script works by changing CSS and HTML elements after they have been received by my browser.

The good folks over at Hack A Day overhauled their theme last week which meant my old hack needed quite a few modifications so it would work as it had with the old site.

Just as before, I’m a Firefox user so I’ve only tested the script with Firefox, but it should work just fine with other browsers. Other Hack A Day readers reported that my previous script worked with Opera and Chrome.

To use the script, do the following:

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 desktop to Firefox

A couple of items to be aware of:

I didn’t take the time to test each of the previous modifications to see if they were still being used. That means the code could be tightened-up a bit, but it works just fine as is. If you care to take the time to test each of the old changes to see if they are still required, please do so and let me know your findings and I’ll update the code listing below.
I’m using a different logo image in my header (see screenshots) than the logo that Hack A Day is using. If you choose to use your own image, you’ll need to modify the link in the code. I don’t have permission to share my image, so don’t ask!

For more information on my original hack, please read my original post.

// ==UserScript==
// @name           Hackaday
// @namespace      http://localhost
// @description    Re-Theme hackaday.com
// @include        http://hackaday.com/*
// @grant          GM_getValue
// @grant          GM_setValue
// @grant          GM_addStyle
// ==/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&amp;amp;lt;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&amp;amp;lt;zElements.length; i++) {
   zElements[i].style.backgroundColor="#959595";
}
var zElements = document.getElementsByClassName("statsclass2");
for (var i=0; i&amp;amp;lt;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&amp;amp;lt;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&amp;amp;lt;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&amp;amp;lt;zElements.length; i++) {
   zElements[i].style.color="#000";
}

// Added on 06/11/2012
// Change images
var images = document.getElementsByTagName ("img");
var x=0;
while(x&amp;amp;lt;images.length)
{
  if(images[x].src.indexOf("hackaday-logo.gif") != -1)
  {
    images[x].src = "http://use.yourownimage.com/hackaday-logo.gif";
  }
  else if(images[x].src.indexOf("tips1.jpg") != -1)
  {
    images[x].src = "http://use.yourownimage.com/tips1.jpg";
  }
  else if(images[x].src.indexOf("feed1.jpg") != -1)
  {
    images[x].src = "http://use.yourownimage.com/feed1.jpg";
  }
  else if(images[x].src.indexOf("store1.jpg") != -1)
  {
    images[x].src = "http://use.yourownimage.com/store1.jpg";
  }
  else if(images[x].src.indexOf("forum.jpg") != -1)
  {
    images[x].src = "http://use.yourownimage.com/forum.jpg";
  }

  x=x+1;
}

// Added on 11/21/2012 to account for 11/16/2012 Theme Changes
// http://hackaday.com/2012/11/16/the-new-template-has-arrived/

// Let's change the header bg color and image
GM_addStyle("body, p, select, textarea {color: rgb(0,0,0)}");
GM_addStyle("#header {background-color: rgb(255,255,255)}");
GM_addStyle(".header-image #title-area {background-image: url(\"http://use.yourownimage.com/hackaday-logo.gif\");}");
GM_addStyle(".header-image #title-area {width: 457px;}");
GM_addStyle("#header .widget-area {width: 450px;}");
GM_addStyle(".header-image #title-area {height: 130px;}");
GM_addStyle("#header {min-height: 130px;}");

// Let's tweak the menu-bar
GM_addStyle(".menu {height: 25px;}");
GM_addStyle(".menu a {padding-top: 4px;}");
GM_addStyle(".menu {background-color: rgb(160,160,160)}");
GM_addStyle("#nav .s {margin-right: 10px;}");
GM_addStyle("input {vertical-align: middle;}");
GM_addStyle("input.s {height: 12px;}");
GM_addStyle("input.searchsubmit {height: 18px;}");
GM_addStyle("input.searchsubmit {padding-top: 0px;}");

// Let's change the wrap DIV bg color
GM_addStyle("#wrap {background-color: rgb(248,248,248)}");
GM_addStyle("span.date.published.time {color: #000;}");
GM_addStyle("span.categories {color: #000;}");
GM_addStyle("span.tags {color: #000;}");

GM_addStyle("#tl_ad {background-color: rgb(248,248,248)}");
GM_addStyle(".sidebar .widget {background-color: rgb(248,248,248)}");
GM_addStyle(".sidebar .widget p {background-color: rgb(248,248,248)}");
GM_addStyle(".widget-area h4 {background-color: rgb(85,85,85)}");
GM_addStyle(".header-image #title {opacity: 0;}");

// Let's change the comment boxes
GM_addStyle(".odd {background-color: rgb(255,255,255)}");
GM_addStyle(".even {background-color: rgb(255,255,255)}")

// Let's tweak the category box
GM_addStyle(".widget_archive select, #cat {background-color: rgb(85,85,85)}");
GM_addStyle(".widget_archive select, #cat {color: rgb(255,255,255)}");

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

Until next time – GEEK OUT!

~GT~

UPDATED: “Hack A Day” Hack with Greasemonkey

2 thoughts on “UPDATED: “Hack A Day” Hack with Greasemonkey”

Leave a Comment Cancel Reply