blog | edwards research

I hated how much space the Google header took up at the top of the page. I searched for themes but none seemed to address the issue. I then looked into developing my own theme through their theme API and it turns out the reason none of the themes address the large header is because Google doesn’t give the developer the option to control that.

All you can really control is colors, add a few custom images and select between icon sets, but nothing having to do with sizing or positioning.

My next step was to examine the DOM and whip up a GreaseMonkey Script that shrunk it. Having some experience with it, I made use of a few jQuery features in the script.

Before:

Before

After:

After

Enjoy!

Direct Download

// ==UserScript==
// @name           Minimalize iGoogle Theme
// @namespace      http://www.edwards-research.com
// @description    Minimalize iGoogle Theme
// @author         by James Edwards
// @include        http://www.google.com/
// @include        http://www.google.com/ig
// @require        http://code.jquery.com/jquery-latest.min.js
// ==/UserScript==

// Written by James Edwards
//		Feel free to use this script in any way you like, commercial or otherwise.
//		Attribution is optional but encouraged.
//
// jQuery Integration from: Greasespot
//		http://wiki.greasespot.net/Code_snippets#Use_jQuery_in_a_GreaseMonkey_script
(function() {
	//<div id="nhdrwrap">
		$("div#nhdrwrap").css("padding","0px");
		$("div#nhdrwrap").css("margin","0px");
		$("div#nhdrwrap").css("height","100px");
	//<div id="nhdrwrapinner">
		$("div#nhdrwrapinner").css("background-image","none");
		$("div#nhdrwrapinner").css("height","100px");
		$("div#nhdrwrapinner").css("margin-top","-20px");
	//<div id="regular_logo">
		$("div#regular_logo").hide();
	//<p class="gseaopt">
		$("p.gseaopt").hide();
	//<div class="personalize_link">
		$("div.personalize_link").hide();
	//<div id="header_promo_wrapper">
		$("div.header_promo_wrapper").hide();
	//<div id="promo" class="sandbox_msg" style="margin-top:-20px;"
		$("div.sandbox_msg").hide();
	//<div class="gradient">
		$("div.gradient").hide();

}());