Google's Personalized Home is a great "portal" to use as a homepage, adding and removing whatever content takes your fancy.
But even with a large monitor, it takes up a lot of screen real estate given the content. So I wanted to get rid of spacing where I thought it wasn't needed.
Using the site specific stylesheets in Firefox/Mozilla (David Baron's technical intro and a post on mozillaZine about customising sites ), it allows customising a site by overiding styles within the site by adding entries to a users usercontent.css file.
The following makes the Google Personalized Home page more compact, and draws a thin border around each content block:
@-moz-document url-prefix(http://www.google.com/ig) {
div#nhdr > font > br { display: none; }
body > table > tbody > tr > td > center > div { padding: 0 ! important; }
body > table > tbody > tr > td > center > table { border-spacing: 0 ! important; }
.modbox { padding-bottom: 0 ! important;
border: 1px solid #3366cc ! important;
margin-bottom: 5px ! important; }
.mhdr { border: 0 ! important; }
.mc { padding: 2px ! important; }
.modbox > font > div { padding: 2px ! important; }
}
Update (2006-01-12): Made some more refinements, and works with the Greasemonkey script "Hide Personalized Google Search Box v2"
@-moz-document url-prefix(http://www.google.com/ig) {
body {margin: 0;}
#nhdr > font > br { display: none; }
body > table > tbody > tr > td > center > div { padding: 0 ! important; }
body > table > tbody > tr > td > center > table { border-spacing: 0 ! important; }
#modules > table { width: 100% ! important;
border-spacing: 5px ! important;
}
#modules > table > tbody > tr > td {display: none; }
#c_1 {display : table-cell ! important; }
#c_2 {display : table-cell ! important; }
#c_3 {display : table-cell ! important; }
.modbox { padding-bottom: 0 ! important;
border: 1px solid #3366cc ! important;
margin-bottom: 5px ! important;
}
.mhdr { border: 0 ! important; }
.mc { padding: 2px ! important; }
.modbox > font > div { padding: 2px ! important; }
body > table > tbody > tr > td > center > br { display: none; }
#footer {display: none; }
}