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.

Comments

  1. M4rc3lv says:

    Very funny. I have always used my own Greasemonkey script to do this exact same thing.

  2. rue_mohr says:

    I prefer dark pages with low contrast text.
    “eeeeeek! the light! save me from the light!”

  3. legendeveryone says:

    shameless self-promotion:
    Hackaday – Grey Theme

  4. hboy007 says:

    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";
    }

  5. Eliot says:

    I doubt many remember when our theme used to force all text (even comments) on site to be lowercase.

    • m4rcu5 says:

      yep, i remember the days. i think it had its charm to have everything lowercase…

    • M4CGYV3R says:

      that was fun. it was like school uniforms for the comments section.

    • dinosaur says:

      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.

    • Whoever says:

      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).

  6. krater says:

    hack a day is in the last years the only page that uses this good old black/green design with small font. hi hope this will never change !!! :)

    • pt says:

      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 :)

  7. Rosco says:

    The way the site looks is perfect, there is nothing hard on the eyes about the layout. Some people just can’t be happy until they have changed something.

    • Bertho says:

      It is perfect until you get old and need reading glasses… And, contrast sensitivity changes also with age, I can tell.

      The Gray theme is really nice (with some size hacks ;-))

    • mooglemoogle says:

      Isn’t that what hacking is about? Changing things?

    • N0LKK says:

      “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.

  8. Now if someone would only fix this Troll Muting script ;-)
    http://userscripts.org/scripts/show/78836

  9. zacdee316 says:

    I love the color scheme of this site. Perfect for when I’m up at 3 in the morning and wondering if I missed anything new. I just can’t get enough.

  10. wrtlprnft says:

    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.

  11. Tim says:

    Or if you have a mac hit ctrl + option + Apple + 8. I like the white text on black, its easy on the eyes.

  12. Haku says:

    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.

  13. xorpunk says:

    Funny..what people are deeming ‘better’ looks like just another white BG layout..boring

  14. kaaaang says:

    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.

  15. jimmythecow says:

    dont ever ever ever change the color scheme…

    im already pissed you started to use CAPS on stuff.. pfff…..

    also, i agree. shameless self promotion.

  16. axodus says:

    the black/green theme is great, no need for change.
    is there a way to see more then 8 articles per page?

  17. brekk says:

    Dark backgrounds with light text are supposed to be far easier on the eyes then a white background.

  18. tonytuba says:

    How bout someone write up a script that makes all pages look like HaD?

  19. N0LKK says:

    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.

  20. DudeGuy says:

    I don’t know what I would do if HackADay changed it’s style like facebook does. I would probably update my status about it with as many expletives as I can muster.

    • CRJEEA says:

      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 (:

  21. AussieTech says:

    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.

  22. Peter says:

    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!

  23. signal7 says:

    I rather like the current theme – it reminds me of the old days when we had green font terminals to work with.

    If I wanted black on white, I’d use an RSS feed reader instead.

  24. m!nus says:

    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.

  25. Suki says:

    i just use firefox’s builtin usercontent.css for pure css changes to websites. Greasemonkey is way more powerful, but not needed to make the aricles on hackaday a bit wider. :-)

  26. anyone says:

    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.

  27. Rob says:

    Why use greasemonkey to edit the stylesheet when there’s stylish, which is made to do that?

  28. Willaim says:

    you can use this script n IE6-7-8 by using IE7pro and change GM_AddStyle with PRO_addStyle

    • People still use IE?

    • Willaim says:

      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…

  29. Wesley H. says:

    In the words of Maddox, “Staring at a white background while you read is like staring at a light bulb”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 91,326 other followers