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~
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
Not bad, but the Red links on the White background is still pretty rough on my eyes…
Just change:
zElements[i].style.color=”red”;
for
zElements[i].style.color=”blue”;
Working just fine in Opera.
Thanks.
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.
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?