Hacking Hack A Day With Greasemonkey

had-script

Ever since Hack a Day first emerged on the scene in 2004, the site’s design has been pretty consistent. The black background with its green and white text, while a bit dubious looking at work, is fine by me. For others however, the site’s design is a constant eyesore both figuratively and literally. [James Litton] is one of those readers, and he wrote in to share a tip that helps him read up on the latest hacks without killing his eyes.

[James] uses Firefox to browse the web, so he whipped up a small Greasemonkey script that tweaks Hack a Day’s style sheet once it reaches his browser. His script inverts the background while changing a few other items, making for a much more comfortable read. Overall we found the change to be pretty reasonable, but go ahead and judge for yourself – you can see the before and after screen shots in greater detail on his site.

[James] also points out that the script should work just fine in Chrome, for those of you who prefer that browser instead.

So if your eyes are a bit on the sensitive side, feel free to grab his script and customize away – I don’t think we’ll be changing the theme any time soon.

49 thoughts on “Hacking Hack A Day With Greasemonkey

  1. i prefer the greenish look :-)

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

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

    1. Not only do I remember that, I remember the ‘before time’. That is the time before 2004 that the current administrators either do not know about or just refuse to accept existence of. Back when HAD truly started existing it was, indeed, mostly about security information systems hacking.

      All posts have been gone for some time. I remember finding this site when wifi was not quite so ubiquitous and they had an article about messing with an apple store on a highly stickered laptop. Ahh the memories.

    2. Not only that, I also remember the black and white pictures. And that there was exactly one hack a day.

      When those things changed I was, and half a decade later (more or less) still am, of the opinion that it should have never changed. The only change I liked, somewhat ironically in this context, was the allowance of caps. All lowercase certainly had it’s charm, it had a certain air of leetness, but most of the content being technical sometimes it did annoy the hell out of me (ie. when writting acronyms).

    1. when i designed hack-a-day and the logo the text was all lower case, that changed a few years ago. each photo was also “taped” on the page. however, my goal was for anyone to be able to “hack” the site and display it they want, glad to see this :)

    1. “Some people just can’t be happy until they have changed something.” Perhaps satirical intent was intended, but probably not. Respectfully a odd statement when, posted to a place where changing something, is what it’s all about. For myself hackaday isn’t a problem, but I have seen some web pages so shitty(to myself) I have to decide if to say screw it, forget it move on, or if it’s worth copy/pasting the text into an application so I can read it.

  2. If I have to read longer articles on this site I usually just put Opera into user mode, which disables all style sheets. Obviously there is no design at all then, which is perfect for me :-D

    Since I read most articles via the RSS feed I rarely need to resort to that.

    Still a nice idea, though, I could see how this might be useful.

  3. Greasemonkey has become an invaluable tool for web browsing, especially when sites keep changing their dsmn layout and introduce crap that just doesn’t interest me and gets in the way of the real content.

    Several sites I regularly visit now look less cluttered thanks to Greasemonkey. I admit I’m not very proficiant with creating my own code from scratch but have found enough freely available code out there to modify to do my bidding.

    One site I have a big gripe with is eBay, they keep tweaking the layout of search results to the point where you can only see a few results on screen at any one time because the thumbnail images are so damn big, Greasemonkey makes eBay usable again because they just don’t listen to our complaints.

    I do like the white & green text on black background of HaD, don’t ever change it.

  4. I don’t know what is fucked up with the screenshots but the font on them looks very hard to read with black background, but in my computer, the font is very easy to read with black background.
    I think it’s a font problem and not a color problem.

  5. Either you die, or you get to age, so you are forced to make adjustments. Others are forced to make adjustment from the very begging or unexpectedly along the way to the inescapable conclusion. While hackaday is not a problem for myself, many web pages are. I had set Firefox to override web page to present me with black text on white. Work OK with Hackday until hackaday went to the current commenting. James script “breaks” hackaday in a similar manner. While the Grey theme provide by legend everyone keeps the comment section easier to follow, it’s not for me otherwise.

    Admitting it’s because I have a bone in the accessibility fight,hopefully whenever modifying it’s web page Hackaday, would insure it usable by those who have visual difficulties. While no one ever fit all, accommodation rarely adversely effects those who don’t require it when they use a web page. What wouldn’t be important are thing like that Hackaday may be to only page using the green on black theme. In entering Hackaday at http://wave.webaim.org/ shows there’s a problem with the images used for navigation,evidently no alternate text is used.

    1. I’m sure if that ever happend either someone would change it back or publish some sort of HackaDay fixer to put things roughly how you want them (as for facebook’s, Social fixer)
      Don’t let it get to you, instead, just think and answer the question – How can I do this (:

      Amusing in some ways how that question can hve two meanings depending upon your outlook on life (:

  6. As an old bloke I find the typical black on a sea of white quite nasty to read, so I’m very happy with white on black/grey thanks, and I actually think it makes more sense when reading a light emitting as opposed to light reflecting medium.

    Well I remember the all lower case days and the difficulties it presented with acronyms and such. Glad to see the back of that.

  7. Myself, I have always trouble with next page and previous page when navigating.
    When one writes a diary, next page is what comes after current page. In HaD next page is what came in the past. How comes?

    Keep the colors!

  8. Why use javascript to change CSS. If you have Stylish installed there’s white designs for HAD already :)

    Another thing: Does Greasemonkey work properly again? Ever since FF4 it regularly froze and thus I uninstalled it.

  9. I hate this site as much as the next user of it but really, it’s great the creators kept the color scheme the same over the years. Especially with so many fcuking boohoo criers complaining about the colors hurting their eyes.

    If you are one of those people, instead of installing this GM script, maybe you should take a look in the mirror and slap yourself in the face for being a pansy who cries about the colors of a website.

    1. In practice besides installing IE7Pro
      and changing GM_addStyle to PRO_addStyle
      you also need to add a function for ‘getElementsByClassName’ apparently only firefox has this function built-in

      document.getElementsByClassName = function(cl) {
      var retnode = [];
      var myclass = new RegExp(‘\\b’+cl+’\\b’);
      var elem = this.getElementsByTagName(‘*’);
      for (var i = 0; i < elem.length; i++) {
      var classes = elem[i].className;
      if (myclass.test(classes)) retnode.push(elem[i]);
      }
      return retnode;
      };

      and then finally it will work with IE 6,7,8

      worth mentioning Ie7pro is the add-on that makes this possible and it makes IE bearable
      it allows slight redesign to the interface, spell check, Ad block, mouse gestures, user scripts and more…

  10. Stylish is faster and works for all future elements added to page.

    With JS, you’d have to write MutationObserver for it, more code to do same thing.

    And because it loads slower, you might get short flash.

Leave a Reply to Standard MischiefCancel reply

Please be kind and respectful to help make the comments section excellent. (Comment Policy)

This site uses Akismet to reduce spam. Learn how your comment data is processed.