Google search at MIT

Add & restrict pages

Add a search box on your site

Additional Search Form Parameters

Update to Google v.4

Search appliance configuration

Collections

Search Results Stylesheet

MIT Google: Custom Stylesheets

Overview

You can customize the way MIT Google search results look to match with your site. To see custom results, perform a search on the IS&T site using the search box at the top of this page. Please note:

• you can use a search box on your site without customizing the results
• at present, IS&T cannot provide support for extensive customization. However, Web Communications Services (WCS) will code customized stylesheets for a fee
• A recent upgrade from Google v.3 to v.4 has required changes to pre-existing stylesheets. If you have a Google v.3 stylesheet, please see the Update page.

MIT Google uses XSLT to transform the actual search results (in XML format) to the HTML seen by users. Hence, to customize your search results page, you will need to copy the template XSL (stylesheet) and modify it appropriately.

Note: The MIT Google search appliance has recently upgraded. If you previously developed a stylesheet for use with MIT Google, you may now need to update your stylesheet.

Step-by-Step Customization

The simplest customization to Google search results is to change the color in the top bar to match your site. By default, the top bar displays MIT's "color of the day". We suggest you start with this simple color customization, then you can tackle the more challenging edits to incorporate a site's header, footer, etc.

Examples: color of the day and customized top bar.

1. There are several stylesheets involved when you customize search results: your site's stylesheet (if it exists), Google's results XSLT, and a top bar css.
   
   
2. Copy the template XSL http://web.mit.edu/xsl/google-mit.v4.xsl to your web space and give it a file name related to your site, such as google-mysite.xsl (replace "mysite" with your site's name).
   
   
3. Copy the top bar css http://web.mit.edu/styles/google-results-topbar.css to your web space and give it a file name related to your site, such as google-mysite-results-topbar.css
   
   
4. Modify the parameters of the search form on your web site to refer to the new xsl stylesheet.



<form method='get' action='http://search.mit.edu/search'> <input type='text' name='q' size='32' maxlength='255' value=''/> <input type='submit' name='btnG' value='Search'/> <input type='hidden' name='site' value='mit'/> <input type='hidden' name='client' value='mit'/> <input type='hidden' name='proxystylesheet' value='http://web.mit.edu/mydept/styles/google-mysite.xsl'/> <input type='hidden' name='output' value='xml_no_dtd'/> </form>



5. Edit your search form to enable testing of google-mysite.xsl

The Google xsl is a complex and long file; however, Google recommends that you don't remove content. Sections of the stylesheet are labeled according to what they affect, often marked either "can be customized" or "do not customize".

The Google Search Appliance caches stylesheets, so to force it to reload your stylesheet when you've made a change, add this line inside your site's search <form> tags (step 4 above):

<input type='hidden' name='reload' value='1'/>

To display error messages and facilitate debugging of your stylesheet, add this line to your search form:

<input type='hidden' name='debug' value='1'/>



6. Edit google-mysite.xsl to point to your google-mysite-results-topbar.css.

Edit this line (located at the end of the xsl file), providing the location of your google-mysite-results-topbar.css:

<link rel="stylesheet" href="http://web.mit.edu/styles/mit-daily-colors.css" type="text/css"/>



7. Edit your google-mysite-results-topbar.css file, indicating the background and link colors for the top bar that will match with your site.
   
   
8. Point the "advanced search" link to your site's page, if it exists. The default is to go to MIT's search page.
   
   
9. Remove the forced reload and debug line you added for testing in step 5.

Since forcing a reload may slow the display of the results page, you should remove this line when your testing is complete and you're ready to publish your page on the web.



10. The Google Search Protocol Reference, documents the XML specification for the results returned by the search appliance.

If you have questions about stylesheets, or want consulting help to develop a stylesheet, please contact Web Communications Services.

Test Your Stylesheet

You can use the form below to test your stylesheet. Enter the URI of your stylesheet and some search terms.

[Back to top]