Access Keys:
Skip to content (Access Key - 0)

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, contact the Departmental Consulting and Application Development (DCAD).

Related Links

Custom Stylesheets

IS&T Contributions

Documentation and information provided by IS&T staff members


Last Modified:

December 15, 2017

Get Help

Request help
from the Help Desk
Report a security incident
to the Security Team
Labels:
customstylesheets customstylesheets Delete
google google Delete
m-hermes m-hermes Delete
search search Delete
searchengine searchengine Delete
stylesheets stylesheets Delete
webresources webresources Delete
c-web-publishing c-web-publishing Delete
custom custom Delete
style style Delete
sheets sheets Delete
css css Delete
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.
Feedback
This product/service is:
Easy to use
Average
Difficult to use

This article is:
Helpful
Inaccurate
Obsolete
Adaptavist Theme Builder (4.2.3) Powered by Atlassian Confluence 3.5.13, the Enterprise Wiki