Hotashi - Jack’s Blog

I took a little time styling my del.icio.us page (well, actually it’s the whole site in general). I got tired of the plain fugly layout. Although I didn’t change too much besides the colours, I think it’s more pleasing on the eyes. I also used Greasemonkey to change the background colours on the “save by x other people” based on the number of people that save it. The original background color was too light IMO, and makes the text hard to read.

I also prefixed the active tag with “{{”, and appended “}}” to the end of it. If find this styling more visually pleasing, and more obvious than the original “!” in front of it. I also hid the “!” using Greasemonkey since it also got the same styling as the active tag.

Here are the before and after screenshots.

before

after

And of course, the Stylish and Greasemonkey codes.

Stylish

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("del.icio.us") {

body {
background-color: black !important;
font-family: Verdana !important;
color: white !important;
margin: 0 !important;
padding: 0 !important;
}

a:link { color: #FFFF99 !important; }

a:visited { color: #FF9900 !important; }

a.cur:before { content: "{{ "; }
a.cur:after { content: " }}"; }

#header {
background-color: black !important;
}

.crumb {
background-color: black !important;
color: white !important;
border: 1px dashed #666666 !important;
}

#header a:link, #header a:visited { color: #FFFF99 !important; }

#infobar {
background-color: #333333 !important;
border-color: #666666 !important;
margin: 0pt 0pt 0.417em !important;
}

#infobar a:link, #infobar a:visited { color: #FFFF99 !important; }

.posts li { background-color: black !important; }

#sidebar, #related-sidebar {
border-color: black !important;
border-width: 0pt 0pt 0.5em 0.33em !important;
}

.sidebar-inner {
background-color: #333333 !important;
border-color: #666666 !important;
}

.bundles .label { color: #999999 !important; }

#footer-hr {
background-color: #666666 !important;
border-color: #333333 !important;
}

#items-per-page a:link,
#items-per-page a:visited {
color: #FFFF99 !important;
}

.post p.notes, .post .meta .extended { color: #666666!important; }

}

Greasemonkey

// ==UserScript==
// @name delicious
// @namespace delicious
// @include http://del.icio.us/*
// ==/UserScript==

// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://code.jquery.com/jquery-latest.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);

// Check if jQuery's loaded
function GM_wait() {
if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
else { $ = unsafeWindow.jQuery; letsJQuery(); }
}
GM_wait();

// All your GM code must be inside this function
function letsJQuery() {
$('.pop').each( function(i, s) {
var str = s.innerHTML;
var num = eval( str.substr(9, str.indexOf(" other people")-9) );

var gb = isNaN(num) ? 100 : parseInt( 100 - (num/15) );
gb = Math.max(gb, 0);
s.style.backgroundColor = "rgb(200, "+gb+", "+gb+")";
});

$('.cur').each( function(i, a) {
if ( a.rel == "nofollow" ) a.style.display = "none";
});
}


This entry was posted on Friday, February 1st, 2008 at 9:19 pm by Jack, and is filed under Coding, Computers, Internet. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.