Return google search to smaller sized boxes

This week, Google updated their homepage to incorporate a large style search box and button. However, this change does not sit well with every user.

We decided to knock up a little CSS override script that will return Google to its former glory.

/* Google override */
 .lst { font-size:12px !important; }
.lsb { font-size:12px !important; height: 20px !important; margin: 2px 2px 0px 5px !important; }
.gac_d {font-size: 10px !important; }
.gac_m { font-size:14px !important; }

Save this as custom.css and load into your favourite browser as a custom stylesheet.

In Safari, this is located under Safari->Preferences->Advanced->Stylesheet.

For Mozilla Firefox users, you can either follow this guide, or install the user stylesheet extension

UPDATE:
Thanks to Lance for pointing out that firefox users can also use this greasemonkey script

  • Lance

    An easier Firefox method is to use this Greasemonkey script (Greasemonkey addon required):
    http://userscripts.org/scripts/show/57449

  • RDL

    Appreciate it but this doesn't change how it looks when I actually type in the search field. I don't remember that font being bold. Its better now but still not the same.

  • RDL

    The Firefox directions didn't work for me at all. I added Greasemonkey then installed the userscript from the link but even after closing and reopening Firefox Google is not changed back to the old Google. I made sure Greasemonkey was enabled but no luck.

  • RDL

    Sorry to keep posting but I just noticed after I closed Safari and then reopened it I had to go back into Preferences and make the change using the css file. How do it get Safari to save these settings and not delete them everytime I close the browser?

  • Simon Lawrence

    This is the code I used, slightly modified from the Greasemonkey script and adds a fix to make the search page stretch the whole width of the page.

    .lst {
    font-size: 13px !important;
    margin-bottom: 0em !important;
    }

    .lsb {
    font-size: 11px !important;
    height: 20px !important;
    margin: 2px 2px 0px 5px !important;
    }

    .gac_m {
    -moz-background-clip: border !important;
    -moz-background-inline-policy: continuous !important;
    -moz-background-origin: padding !important;
    background: white none repeat scroll 0 0 !important;
    border: 1px solid #666666 !important;
    cursor: default !important;
    font-size: 13px !important;
    line-height: 17px !important;
    margin: 0 !important;
    position: absolute !important;
    z-index: 99 !important;
    }

    .gac_m td {
    line-height: 16px !important;
    }

    .gac_t {
    font-size: 13px !important;
    }

    .gac_bt {
    display: none !important;
    }

    #cnt {
    max-width: 100% !important;
    }

    #mbEnd {
    width: 18% !important;
    }

  • RV

    Sorry to keep posting but I just noticed after I closed Safari and then reopened it I had to go back into Preferences and make the change using the css file. How do it get Safari to save these settings and not delete them everytime I close the browser?