Tuesday, November 29, 2005

Make Google's Personalized Home more compact in Firefox/Mozilla

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; }
}

No comments: