One of the ongoing challenges with changing a web site’s look and feel with client-side scripting is that it oftentimes breaks when the site’s theme is modified.
There are a lot of you out there that use my Hack-a-Day Greasemonkey script so I wanted to make my most recent updates available.
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 have reported that my previous scripts worked with Opera and Chrome.
The same caveats as mentioned in my previous post still apply. Install instructions can also be found there.
// ==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<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";
}
// Added on 06/11/2012
// Change images
var images = document.getElementsByTagName ("img");
var x=0;
while(x<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)}");
//Added on 10/25/2013 to account for Theme Changes
// Change the sharedaddy title settings
var zElements = document.getElementsByClassName("entry-title");
for (var i=0; i<zElements.length; i++) {
zElements[i].style.backgroundColor="#f8f8f8";
}
var zElements = document.getElementsByClassName("post-info");
for (var i=0; i<zElements.length; i++) {
zElements[i].style.backgroundColor="#fff";
}
var zElements = document.getElementsByClassName("entry-content");
for (var i=0; i<zElements.length; i++) {
zElements[i].style.backgroundColor="#ffffff";
}
var zElements = document.getElementsByClassName("post-meta");
for (var i=0; i<zElements.length; i++) {
zElements[i].style.backgroundColor="#f8f8f8";
}
GM_addStyle("input.searchsubmit.search-submit {color: #000;}");
GM_addStyle("input.searchsubmit.search-submit {margin-top: 10px;}");
var zElements = document.getElementsByClassName("wp-caption");
for (var i=0; i<zElements.length; i++) {
zElements[i].style.backgroundColor="#f8f8f8";
}
var zElements = document.getElementsByClassName("entry");
for (var i=0; i<zElements.length; i++) {
zElements[i].style.backgroundColor="#fff";
}
Until next time – GEEK OUT!
~GT~