Home / Services And Resources / Web Resources

MIT Google: Custom Stylesheets

 

 

On this page:
Overview
Step-by-Step Customization
Test Your Stylesheet

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. However, Web Communications Services (WCS) will code customized stylesheets for a fee


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 web site 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="http://web.mit.edu/mydept/styles/google-mysite.xsl"/>
       <input type="hidden" name="output" value="xml_no_dtd"/>
    </form> 
  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:

      • <link rel="stylesheet" href="http://web.mit.edu/styles/mit-daily-colors.css" type="text/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, and you are ready to publish your page on the web.


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, contact Web Communications Services.

Test Your Stylesheet

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

XSLT Stylesheet URI:

Search terms:
Back To Top