MIT Google - Custom Stylesheets

On this page:

Overview

You can customize the way MIT Google search results look to match with your site. To see an example of custom results, perform a search on the MIT OpenCourseWare site.
Please note:

• You can use a search box on your site without customizing the results
• At present, IS&T cannot provide support for customization.

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 XSLT stylesheet and modify it appropriately.

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.

Example: color of the day (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 XSLT stylesheet http://web.mit.edu/xsl/google-mit.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 website to refer to the new 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="<strong>http://web.mit.edu/mydept/styles/google-mysite.xsl</strong>"/>
   <input type="hidden" name="output" value="xml_no_dtd"/>
   

5. MIT-Google 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 (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 XSLT file), providing the location of your google-mysite-results-topbar.css:
   • Edit your google-mysite-results-topbar.css file to specify the background and link colors for the top bar that will match with your site.
7. 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.

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, review consulting and service options at IS&T's Web and Database Strategy.

Related Links

• Google Search Engine at MIT
• Add and Restrict Pages
• Add a Search Box on Your Site

Custom Stylesheets

• Handling Redirection When Your Site Moves
• Changing Your Directory Information
• Secure Search