Search
Clear search
Close search
Google apps
Main menu

Creating the Search Experience

Customizing the User Interface

The Google Search Appliance has features that enable system administrators to enhance the search experience for end users. This chapter describes how system administrators can modify web pages in the Google Search Appliance user interface.

What Is the Google Search Appliance User Interface?


For an end user, the user interface is the means by which she interacts with the Google Search Appliance. The search appliance user interface is made up of the web pages that are listed in the following table.

Page

Description

Search page

Page where an end user enters terms and starts a search

Search Results page

Page where search results are returned to an end user

Advanced Search page

Page where an end user enters complex search criteria and starts a search

Search within Results page

Page where an end user enters terms to search within results

Cached page header

Message that appears at the top of a cached page to indicate that it's a cached version of the page

By default, the search appliance offers a user interface that is simple and intuitive, like Google.com. As a search appliance administrator, you can use the default user interface as the basis for customizing one or more user interfaces that focus on your end users.
 

For example, suppose your organization plans to use a search appliance to serve both customers and employees in several countries in North and Latin America. You have identified several design goals for the user interface. For both types of end users, you want a user interface that reflects your organization's visual identity by using your logo and your color scheme.

For customers, you want a user interface that:

  • Offers simple search options consisting of a search box and button
  • Displays simple result listings that contain only a title and snippet

For employees, you a want user interface that:

  • Offers multiple search options, such as searching secure content and searching within results
  • Displays complex result listings that contain a title, a snippet, a date, a link URL, and a cached link

For both customers and employees, you want to offer user interfaces in four languages: English, Spanish, Brazilian Portuguese, and French. To accomplish all your design goals, you plan to create eight user interfaces.

For customers, you will create the following user interfaces:

  • An English-language user interface for customers in the U.S. and Canada
  • A Spanish-language user interface for customers in Mexico, Argentina, Uruguay, and the U.S.
  • A Brazilian Portuguese-language user interface for customers in Brazil
  • A French-language user interface for customers in Quebec, Canada

For employees, you will create the following user interfaces:

  • An English-language user interface for employees in the U.S. and Canada
  • A Spanish-language user interface for employees in Mexico, Argentina, Uruguay, and the U.S.
  • A Brazilian Portuguese-language user interface for employees in Brazil
  • A French-language user interface for employees in Quebec, Canada

This document describes how you can use Google Search Appliance features to accomplish these types of user interface customizations. The following table gives an overview of the major sections in this document.

Section

Describes

Getting Started with Customizing the User Interface

How you can customize the user interface using the Page Layout Helper

Customizing the User Interface in the XSLT Stylesheet

How you can customize the user interface using the eXtensible Stylesheet Language Transformations (XSLT) Stylesheet Editor

See Customization Process Overview

What steps you should take to customize the user interface

User Interface Design Principles

What guidelines you should follow when customizing the user interface

What Is the Relationship Between a User Interface and a Front End?

A Google Search Appliance user interface is associated with a single front end. A front end is a framework that is composed of multiple elements that manage a single search experience. One of the elements of a front is the format element, which determines how results are displayed to the user, or in other words, the user interface. The other elements of the front end define what results are available to present to the user. Each front end can have one user interface.

The search appliance has a default front end, which has a default user interface. You can use the default user interface without any customization. However, a search appliance can have multiple front ends, each with its own, customized user interface.

If you customize a user interface, you should create another front end for customization rather than customizing the default front end.

For more information about front ends, refer to Managing the Search Experience.

You can use a customized front end with a specific collection to help improve searches and enhance results, as described in Using Collections with Front Ends.

Creating a Front End

You create a front end using the Search > Search Features > Front Ends page in the Admin Console.

To create a front end:

  1. Click Search > Search Features > Front Ends.

    The Front Ends page appears.

  2. Enter a name for the front end in the Front End Name box.
  3. Click Create New Front End.

    The new front end appears in the Current Front Ends column.

To edit the front end, click the Edit link for the front end.

Using Front End Search Parameters

When an end user searches for information using a front end, the Web browser sends the search request to the Google Search Appliance as a URL that contains a query string. In this query string, the front end's user interface is defined by the &proxystylesheet search parameter. Other elements of a front end are defined by the &client search parameter. You can mix and match the &proxystylesheet and &client search parameter values to accommodate different presentations of the same results. For complete information about using search parameters, refer to the Search Protocol Reference.

What Is the Relationship Between a User Interface and an XSLT Stylesheet?

When a search query is sent to the Google Search Appliance, the results are returned in XML. Results in XML format can be difficult for end users to read. To format results, the XML is parsed along with an XSLT stylesheet. The formatted results are more usable than raw XML results. An XSLT stylesheet contains information about which elements should appear in the user interface and how the elements should look. Each front end can use the same stylesheet or a different stylesheet. Each search appliance front end has a default XSLT stylesheet, which can be used with any front end.

For more information about how a search appliance uses XSLT stylesheets, refer to Search Experience Background.

What Tools Can I Use to Customize a User Interface?

You customize a user interface by editing variables in the XSLT stylesheet. There are two different ways that you can modify the XSLT stylesheet:

  • Using the Page Layout Helper in the search appliance
  • Using the XSLT Stylesheet Editor in the search appliance or an editor of your choice

The Page Layout Helper enables you to change only some of the elements in the XSLT stylesheet. The XSLT Stylesheet Editor enables you to make more extensive changes to the XSLT stylesheet. If the elements that you want to change are not available in the Page Layout Helper, you must use the XSLT Stylesheet Editor to change them. The search appliance supports XSLT 2.0 and XPath 2.0.

You may want to start by customizing the user interface using the Page Layout Helper. After you finish making and saving changes in the Page Layout Helper, you can, if you wish, make further changes in the XSLT Stylesheet Editor. Any changes that you make with the Page Layout Helper appear in the XSLT stylesheet.

However, after you save changes in the XSLT Stylesheet Editor, you cannot return to using the Page Layout Helper. It is automatically disabled. For more information about using both tools to customize a user interface, refer to Customization Process Overview.

For information about the Page Layout Helper, refer to Working with the Page Layout Helper. For information about the XSLT Stylesheet Editor, refer to See Working with the XSLT Stylesheet Editor.

Changes that you make using the Page Layout Helper are fully supported by Google Cloud Support. If you want to contact support about changes made using the Page Layout Helper, file a help ticket. You can also refer issues to the Google Search Appliance group on Google Groups. Changes that you make using the XSLT Stylesheet Editor are not supported by Google Cloud Support. If you have issues about changes made using the XSLT Stylesheet Editor, you can refer them to the appropriate Google Group.

Another source of tools for user interface development is the Google Gadgets page (https://developers.google.com/gadgets/). You might consider creating a Google Gadget as a user interface for enterprise search. For example, you might create a Google Gadget search box for end users to add to their desktops. This gadget would enable end users to start a search from the search box on the desktop rather than the search page.

Google Gadgets are not supported.

What Knowledge Do I Need to Customize a User Interface?

Even if you do not have any special knowledge of XSLT, you can effectively customize a Google Search Appliance user interface using the Page Layout Helper. However, if you want to add a custom header or footer (see Adding a Header and Footer) to your user interface using the Page Layout Helper, you add snippets of HTML code. In this instance, some knowledge of HTML is required.

If you want to make extensive changes to a search appliance user interface, you need to work directly in the XSLT Stylesheet. In this instance, knowledge of XSLT, XML, and HTML are required.

Back to top

Getting Started with Customizing the User Interface


The default user interface for the search appliance includes Google-specific elements, such as the Google logo and the Google Search button. For illustrations of the default user interface, refer to Starting with a Basic Search Experience.

With a few simple changes, you can make a user interface that is specific to your organization by replacing Google elements with your own. The following figure illustrates a search results page that has been customized using the Page Layout Helper.

For descriptions of the customizations in this figure, refer to the key numbers in the following table.

Key

Customization

1

Replaced the Google logo with the organization's logo.

2

Added the header used on the organization's web site.

3

Changed search button text from Google Search to Find Results.

4

Added a menu to search by collection.

5

Added dynamic result clusters.

6

Removed URLs from result snippets.

Working with the Page Layout Helper

Without working directly with the XSLT stylesheet, you can use the Page Layout Helper to customize the user interface. All of the elements that you can change using the Page Layout Helper can also be changed using the XSLT Stylesheet Editor.

The Page Layout Helper has the following three sections:

The following procedures describe how to change each element in a user interface individually. However, you can also open one or all of the Page Layout Helper sections and make changes to all the elements at once.

Opening the Page Layout Helper

The Page Layout Helper appears on the Search > Search Features > Front Ends > Output Format page in the Admin Console. Before you can use the Page Layout Helper, you must create a front end. For information, refer to Creating a Front End.

To open the Page Layout Helper:

  1. Choose Search > Search Features > Front Ends.

    The Front Ends page appears.

  2. Select a front end from the Current Front Ends list and click Edit.

    The Output Format page appears.

  3. In the Page Layout Helper box, select the section that you want to edit.

    The section expands.

Previewing and Saving Changes

The Page Layout Helper Preview button opens a browser window to let you see how the page will look when you save your changes. Changes are not saved until you click the Save button.

A new window opens each time you click Preview. You can close these windows as you finish looking at them. When you click the Save button, the changes you made in any open section are saved to the XSLT stylesheet. All changes are optional.

You can also view your customizations in a browser window. For details, refer to Viewing User Interface Changes in a Browser Window.

Customizing Global Attributes

Global attributes are elements that appear on all user interface pages. The Global Attributes section of the Page Layout Helper enables you to make the following changes to user interface pages:

Changing the Logo

By default, the Google logo appears on the search page, the search results page, the advanced search page, and the search within results page. As shown in the search result page figure (see Getting Started with Customizing the User Interface), you can replace the Google logo with your organization's logo. You can also remove any logo from user interface pages.

To change the logo:

  1. Open the Page Layout Helper (see Opening the Page Layout Helper).
  2. Click the right arrow next to Global Attributes to display the contents.
  3. Enter the location and name of your company logo.

    You may have to type the complete URL.

  4. Enter the width and height in pixels of your logo image.
  5. Click Save.

Changing the Font Face

The global font face is used for all text on all user interface pages. By default, the global font face is Arial, sans-serif, as shown in the search result page figure (see Getting Started with Customizing the User Interface). You can change the global font face using the Page Layout Helper. To change font sizes, font colors, or font faces for individual user interface elements, use the XSLT Stylesheet Editor (see Customizing the User Interface in the XSLT Stylesheet).

To change the global font face:

  1. Open the Page Layout Helper (see Opening the Page Layout Helper).
  2. Click the right arrow next to Global Attributes to display the contents.
  3. Enter the name of the font family that your web site uses, for example, Times Roman serif.

    The font face is case insensitive. If you enter a font that is not recognized, the page uses the Times font face.

  4. Click Save.

Adding a Header and Footer

Your organization's web site may achieve a uniform look by using a standard header and footer on its pages. If so, you might want to maintain this look on the search appliance user interface. If pages on your organization's web site use a standard header and footer, you can add them to the search appliance user interface. The search result page figure (see Getting Started with Customizing the User Interface) includes a standard page header.

To add a header and/or footer:

  1. Open the Page Layout Helper (see Opening the Page Layout Helper).
  2. Click the right arrow next to Global Attributes to display the contents.
  3. Paste your web site's header code in the Header area.
  4. Paste your web site's footer code in the Footer area.
  5. Click Save.

Customizing the Search Box

The Search Box section of the Page Layout Helper enables you to change the following elements:

The following figure shows a search box that has been customized using the Page Layout Helper.

For descriptions of the customizations illustrated in this figure, refer to the key numbers in the following table.

Key

Customization

1

Changed the length of the search box

2

Changed the search button text

3

Added a menu for searching by collection

Changing the Search Box and Button

By default, the search box length accommodates 32 characters, but it scrolls to allow longer queries. The search button label reads “Google Search.” As shown in the search box figure (see Customizing the Search Box), you can change the search box length and the search button text. You can also replace the search button with an image.

To change the search box and button:

  1. Open the Page Layout Helper (see Opening the Page Layout Helper).
  2. Click the right arrow next to Search Box to display the contents.
  3. To lengthen or shorten the search box from 32 characters, type another number.
  4. To replace the phrase Google Search on the button, type another word in the Use text box.
  5. To use another image to replace the search button, click the Use image option and enter the complete URL to the image.
  6. Click Save.

Adding a Menu to Search by Collection

A collection is a subset of the complete search index. If you include a menu to search by collection, you enable end users to narrow their searches. The search box figure (see Customizing the Search Box) includes a menu to search by collection. By default, the search box does not have a menu to search by collection.

To add a menu to search by collection:

  1. Open the Page Layout Helper (see Opening the Page Layout Helper).
  2. Click the right arrow next to Search Box to display the contents.
  3. To display a menu of your collections so that your users can select which one to search, click the Collections checkbox.
  4. Click Save.

To add more collections:

  1. Open the Page Layout Helper (see Opening the Page Layout Helper).
  2. Click the right arrow next to Search Box to display the contents.
  3. Deselect the Collections checkbox.
  4. Click Save.
  5. Select the Collections checkbox.
  6. Click Save.

If you add another collection, change the name of a collection, or remove a collection from a search box, you must regenerate your front end.

For more information about collections, refer to Using Collections with Front Ends.

Disabling Public and Secure Search Radio Buttons

By default, the Secure Search option is enabled, letting your users choose to search over public documents or both public and secure documents. By default, a search box contains radio buttons for public and secure search as shown in the search box figure (see Customizing the Search Box). If you do not want these radio buttons to appear in the user interface, you can disable them.

To disable public and secure search radio buttons:

  1. Open the Page Layout Helper (see Opening the Page Layout Helper).
  2. Click the right arrow next to Search Box to display the contents.
  3. Click the checkbox to disable the display of the Secure search option.
  4. Click Save.

Modifying Search Results

On the search results page, you can determine what data comes back, how it is arranged, and how it looks. As you select check boxes in each Search Results area, the sample page on the right shows your changes dynamically (for some browsers). Other browsers display a Quick Preview button.

Using the Page Layout Helper, you can change the following elements on the search results page:

Changing Page Top Elements

Elements that can appear at the top of a search results page include:

  • Logo
  • Advanced search link
  • Search tips link
  • Search box

By default, all these elements appear at the top of a search results page, as shown in the search result page figure (see Getting Started with Customizing the User Interface).

Using the Page Layout Helper, you can choose which page top elements you want to show or hide. To change text labels for the Advanced Search link or Search Tips link, use the XSLT Stylesheet Editor (see Customizing the User Interface in the XSLT Stylesheet).

To change page top elements:

  1. Open the Page Layout Helper (see Opening the Page Layout Helper).
  2. Click the right arrow next to Search Results to display the contents.
  3. Click the check boxes to show or hide the Logo, Advanced Search link, Search Tips link, or search box (top).
  4. When finished, click Save.

Changing the Page Divider

A search results page can include a page divider. The divider can be a blue bar with search information or a gray line. By default, the page divider is a blue bar with search information, as shown in the search result page figure (see Getting Started with Customizing the User Interface).

Using the Page Layout Helper, you can choose whether to use a divider or not and which divider you want to use. To change text labels for Search Information, use the XSLT Stylesheet Editor (see See Customizing the User Interface in the XSLT Stylesheet).

To change the search information and page divider:

  1. Open the Page Layout Helper (see Opening the Page Layout Helper).
  2. Click the right arrow next to Search Results to display the contents.
  3. Click the Search information check box to show or hide search information.
  4. Click a radio button to choose Blue bar , Gray line, or No divider.
  5. When finished, click Save.

Changing Page Top Navigation Links

A search results page can include the following navigation links at the top of results listings:

  • Previous/Next link
  • Sort by Date/Sort by Relevance link

By default, the search results page includes both of these navigation links, as shown in the search result page figure (see Getting Started with Customizing the User Interface).

Using the Page Layout Helper, you can choose whether to show or hide one or both of these navigation links. To change text labels for navigation links, use the XSLT Stylesheet Editor (see Customizing the User Interface in the XSLT Stylesheet).

To change navigation links:

  1. Open the Page Layout Helper (see Opening the Page Layout Helper).
  2. Click the right arrow next to Search Results to display the contents.
  3. Click the check boxes to show or hide the Previous/Next link or the Sort by Date/Sort by Relevance link.
  4. When finished, click Save.

Changing Dynamic Result Clusters

Dynamic result clusters are keywords that are based on the results of each search query. Each keyword groups similar documents together. For information about dynamic result clusters, refer to Narrowing Searches.

By default, the search results page does not display dynamic result clusters. Using the Page Layout Helper, you can choose whether to hide or show dynamic results clusters, and where they should appear on the search results page, beside or at the top of results listings.

To change dynamic result clusters attributes:

  1. Open the Page Layout Helper (see Opening the Page Layout Helper).
  2. Click the right arrow next to Search Results to display the contents.
  3. Click the check box to show or hide Dynamic result clusters.
  4. Click a radio button to display dynamic result clusters at the Side or Top of search results.
  5. When finished, click Save.

Changing Dynamic Navigation

Dynamic navigation helps users explore search results by using specific metadata attributes. For information about dynamic navigation, refer to Using Dynamic Navigation to Help Users Explore Results.

By default, the search results page does not display dynamic navigation. Using the Page Layout Helper, you can choose whether to hide or show dynamic navigation.

To change dynamic navigation:

  1. Open the Page Layout Helper (see Opening the Page Layout Helper).
  2. Click the right arrow next to Search Results to display the contents.
  3. Click the check box to Show Dynamic Navigation.
  4. When finished, click Save.

Changing Sidebar Elements

Sidebar elements include search results from People Search or Google Site Search. By default, the search results page does not display sidebar elements. Using the Page Layout Helper, you can choose whether to hide or show sidebar elements. You cannot show sidebar elements along with dynamic navigation or dynamic result clusters side view.

To change sidebar elements:

  1. Open the Page Layout Helper (see Opening the Page Layout Helper).
  2. Click the right arrow next to Search Results to display the contents.
  3. Click the check boxes to show the selected elements.
  4. When finished, click Save.

Changing Result Listing Elements

Each result listing on a search results page can include the following elements:

  • Result title length
  • Snippet
  • URL
  • Page size
  • Modified date
  • Cache link

By default, the search results page includes all of these elements. The search result page figure (see Getting Started with Customizing the User Interface) includes most of these elements, but omits the URL.

Using the Page Layout Helper, you can choose whether to show or hide any of these result listing elements. To change other aspects of these elements, such as font color, use the XSLT Stylesheet Editor (see Customizing the User Interface in the XSLT Stylesheet).

To change the Search Results attributes:

  1. Open the Page Layout Helper (see Opening the Page Layout Helper).
  2. Click the right arrow next to Search Results to display the contents.
  3. Click check boxes to show or hide the result Snippet, URL, Page size, Modified date, or Cache link.
  4. When finished, click Save.

Changing Page Bottom Elements

Elements that appear at the bottom of a search results page include:

  • Previous/Next page navigation links
  • Search box

By default, the search results page includes Google-style navigation links and a search box.

Using the Page Layout Helper, you can choose a different style of navigation link or hide the search box. To change other aspects of these elements, use the XSLT Stylesheet Editor (see Customizing the User Interface in the XSLT Stylesheet).

To change the page bottom elements:

  1. Open the Page Layout Helper (see Opening the Page Layout Helper).
  2. Click the right arrow next to Search Results to display the contents.
  3. Click a radio button to choose a style of Previous/Next page navigation links.
  4. Click the check box to show or hide the Search box (bottom).
  5. When finished, click Save.

Back to top

Customizing the User Interface in the XSLT Stylesheet


You might want to customize a user interface in ways that are not supported in the Page Layout Helper. Such changes might include adding a background color and changing fonts for specific elements in the results listings. The following figure illustrates a search results page with extensive changes.

All the customizations in this figure were made using the XSLT Stylesheet Editor. For descriptions of the customizations in this figure, refer to the key numbers in the following table.

Key

Customization

1

Replaced the Google logo with the organization's logo.

2

Added the header used on the organization's web site.

3

Changed search button text from Google Search to Find Results.

4

Changed the advanced search anchor text from Advanced Search to More Search Options.

5

Changed search help anchor text from Search Tips to Online Search Help.

6

Changed global text color and font face from Arial, sans-serif to Georgia, serif.

7

Added a background color.

8

Added a separate font color for separation bar standard text.

9

Added a separate font color for result dates.

10

Added a separate font color for result cached links.

11

Added a separate font color for result keyword matches.

12

Removed URLs from result snippets.

13

Added a separate font color for result links.

14

Changed separation bar from blue bar to gray line.

Working with the XSLT Stylesheet Editor

Working directly with the XSLT stylesheet enables you to make extensive changes to the user interface. All of the elements that you can modify with the Page Layout Helper can be modified by editing the stylesheet directly. However, once you modify the stylesheet directly, you cannot make subsequent changes to the same stylesheet using the Page Layout Helper.

To customize the search and search results pages by editing the XSLT stylesheet, use the XSLT Stylesheet Editor or another editor of your choice. The following sections describe use of the XSLT Stylesheet Editor:

For detailed information about the contents of the XSLT stylesheet, refer to See Changing Variables in the XSLT Stylesheet.

Opening the XSLT Stylesheet Editor

The XSLT Stylesheet Editor appears on the Search > Search Features > Front Ends > Output Format page in the Admin Console. Before you can use the XSLT Stylesheet Editor, you must create a front end. If you started customizing a user interface using the Page Layout Helper, you already have a front end. For information, refer to Creating a Front End.

To open the XSLT Stylesheet Editor:

  1. Choose Search > Search Features > Front Ends.

    The Front Ends page appears.

  2. Select a front end from the Current Front Ends list and click Edit.

    The Output Format page appears.

  3. In the XSLT Stylesheet Editor box, click the Edit Underlying XSLT Code link.

    The XSLT Stylesheet Editor expands.

Previewing XSLT Stylesheet Changes

When you are editing variables in the XSLT stylesheet, you should periodically preview the results of your changes and avoid saving changes until you are satisfied. When you click Save the corresponding front end is updated after 15-30 minutes. The preview pages display how the search or search results pages look with the changes you have made. However, the links and buttons on the preview page are not functional.

To see the actual search or search results pages, use the Test Center link in the blue bar at the top right of the page. To return the XSLT stylesheet to the state before it was edited, click Restore Default.

To preview changes that you make to the XSLT stylesheet:

  1. Open the XSLT Stylesheet Editor (see Opening the XSLT Stylesheet Editor).
  2. Enter any changes to the stylesheet and click Preview to review the changes.
  3. When finished previewing your changes, close the preview window.
  4. Correct errors or make more changes.
  5. When finished, click Save.

You can also view your customizations in a browser window. For details, refer to Viewing User Interface Changes in a Browser Window.

Exporting an XSLT Stylesheet

If you work in the XSLT stylesheet, back up your changes periodically by exporting the stylesheet. You also need to export the XSLT stylesheet if you plan on editing it in an editor other than the XSLT Stylesheet Editor. You can export the XSLT stylesheet to work on in another location, then import it when you are satisfied with the changes. You can then preview the changes you've made.

To export the XSLT stylesheet:

  1. Open the XSLT Stylesheet Editor (see Opening the XSLT Stylesheet Editor).
  2. Click Export.
  3. In the File Download wizard, click OK and navigate to a location for the file.

The default name for the stylesheet is frontendname _frontend_stylesheet.en.xslt. You can give the exported stylesheet any name you choose.

Importing an XSLT Stylesheet

If you develop an XSLT stylesheet outside the search appliance, or have a back-up version of the XSLT stylesheet, you can import it to the Google Search Appliance.

To import an XSLT stylesheet:

  1. Open the XSLT Stylesheet Editor (see Opening the XSLT Stylesheet Editor).
  2. Enter the filename of the edited XSLT stylesheet in the Import stylesheet box, or browse for the file.
  3. Click the Import button.

    A confirmation message warns that this will overwrite your page layout settings.

  4. Click OK.

    The edited XSLT stylesheet displays and is validated. Errors found during validation are displayed in red.

  5. Fix errors in the file and repeat these Import steps.
  6. When finished, click Save.

Restoring the XSLT Stylesheet

You can discard any changes to an XSLT stylesheet and restore the XSLT stylesheet to the state before it was edited.

To restore the XSLT stylesheet:

  1. Open the XSLT Stylesheet Editor (see Opening the XSLT Stylesheet Editor).
  2. Click Restore Default.

    A confirmation message warns that this will overwrite your current stylesheet.

  3. Click OK. The XSLT stylesheet before it was edited is restored.

Changing Variables in the XSLT Stylesheet

For ease of use, the XSLT stylesheet is divided into the following sections:

Comments precede each section, so that you know whether a section can be customized. The following example presents the Global style variables section of the stylesheet.


<!-- **********************************************************************
Global Style variables (can be 
customized): '' for using browser's default
********************************************************************** -->
 <xsl:variable name="global_font">arial,sans-serif</xsl:variable>
 <xsl:variable name="global_font_size"></xsl:variable>
 <xsl:variable name="global_bg_color">#ffffcc</xsl:variable>
 <xsl:variable name="global_text_color">#990000</xsl:variable>
 <xsl:variable name="global_link_color">#996666</xsl:variable>
 <xsl:variable name="global_vlink_color">#551a8b</xsl:variable>
 <xsl:variable name="global_alink_color">#ff0000</xsl:variable>

Changing the Logo

The Logo setup section of the XSLT stylesheet contains variables that control the logo that appears on user interface pages. The search result page figure (see Getting Started with Customizing the User Interface) includes a custom logo.

Changing Global Style Variables

The Global Style variables section of the XSLT stylesheet contains variables that control the following elements of all search and search results pages:

  • Font faces and sizes
  • Page background color
  • Text color
  • Link colors

The search result page figure (see Getting Started with Customizing the User Interface) illustrates changes to the global font face, global font colors, global link colors, and page background color.

Changing Result Page Components

The Result page components section of the XSLT stylesheet contains variables that control the appearance of elements that appear at the top of the search results page. These elements include the page header, search box and button, separation bar, spelling suggestions, and so on. The search result page figure (see Getting Started with Customizing the User Interface) illustrates changes to the page header, search button, and separation bar.

The following table lists all result page elements that you can change and the types of changes you can make to each one.

User Interface Element

Customization

Result page header

Specify whether to use your own page header, the page header provided by Google, or both, with the provided header appearing under your page header.

Provided result page header

Specify links and labels that appear in the search results page header provided by Google.

Search boxes

Display a search box at the top or the bottom of the search results page. Specify the size of the search box.

Search buttons

Specify search button type (text or image).

Search info bars

Display search information bars.

Separation bar

Specify type of separation bar and label.

Navigation bars

Specify top and bottom navigation bars and attributes.

Sort by

Display Sort by link.

Spelling suggestions

Display spelling suggestions, change label text (Did you mean: ), or color.

Synonyms suggestions

Display synonym suggestions, change label text (You could also try: ), or color.

KeyMatches

Display KeyMatches, change label text (KeyMatch ), text color, or background color.

Advanced Search Reporting

Specify whether to enable advanced search reporting.

Changing Result Elements

The Result elements section of the XSLT stylesheet contains variables that control the appearance of all search result listings. By editing variable values in this section, you can change the font face and color of result titles, snippets, and link URLs. The search result page figure (see Getting Started with Customizing the User Interface) illustrates changes to the result title color, keyword match color, and result cache link color.

The following table lists all elements of results listings that you can change and the types of changes you can make to each one.

User Interface Element

Customization

Result title

Display result title, change color of result title, change font size of result title, show or hide result snippet, change color of result snippet.

Keyword match

Change color of keyword match (the word or phrase that matches the search term) in result titles and snippets, change font size of keyword matches, use boldface font in keyword matches.

Link URL

Display result link URL, change color of result link URL, change font size of result link URL, truncate result link URL, or the length of truncated result link URL.

Meta tags

Display meta tags.

Results size

Display the size of result pages in kilobytes.

Results date

Display dates when pages were found.

Results cache

Display links to results cache versions of pages.

Color used in result cache link, similar pages, and description

Change the faint color used in result cache links, similar pages, and descriptions.

Secure results radio button

Display secure results radio button.

Changing Other Variables

The Other variables section of the XSLT stylesheet contains variables that control page titles, aspects of the Advanced Search Page, the Cached page header, error message text, and dynamic result clusters. The following table lists all elements of results listings that you can change and the types of changes you can make to each one.

User Interface Element

Customization

Page title

Change titles for the following pages: Search Home, Search Results, Advanced Search, and Search Within Results.

Advanced search page header

Specify whether to use your own page header, the provided page header, or both.

The Advanced Search page contains expanded options for search queries, including Find Results keyword options, Language options, File Format options, and so on.

Advanced search page pane background color

Change the advanced search page pane background color.

Cached page header

Change the header text on the cached page. A cached page appears when a user clicks a cached link in search results. The header text explains that the document is a cached copy and not the current page.

Error message text

Change the error message text for a server error or an unknown XML result type.

Dynamic result clusters

Specify whether to include dynamic result clusters or not and where they should appear on the search results page.

Alerts

Specify whether to show the My Alerts link on the search and results pages.

Changing Variables in Other XSLT Stylesheet Sections

The remaining customizable sections of the XSLT stylesheet contain variables that enable you to change the elements listed in the following table.

User Interface Element

Customization

Stylesheet Section

My global page header/footer

Enter XML-compatible HTML code in this section to affect the header and footer of every search and search results page.

My global page header/footer

Logo template

Change the text that appears when a mouse hovers over the logo at the top of the search page, the search results page, and the advanced search page. The logo is also a link to the search page.

Logo template

Search results page header

Enter XML-compatible HTML code in this section to affect the search results page header. You can also change the font size of the header.

The Search Within Results page enables the user to start a new search within the results of the last search.

Search result page header

Search within results page header

Specify whether to use your own page header, the page header provided by Google, or both, with the provided header appearing under your page header.

Search within results page header

Home search page header

Enter XML-compatible HTML code in this section to affect the home search results page header.

Home search page header

Separation bars

Change the color and background color of separation bars used in advanced search headers and search results pages. Separation bars divide the page header from the results.

Separation bar variables

Advanced search page header

Put whatever you like in the page's header. It appears under the Global headers on your pages.

Advanced search page header HTML

Cached page header

Enter XML-compatible HTML code in this section to affect the cached page header.

Cached page header

Search within results search input page

Enter XML-compatible HTML code in this section to change the look of the search page completely.

Search within Results search input page

Front door search input page

Enter XML-compatible HTML code in this section to change the look of the search page completely.

Front Door search input page

Empty result set

Change the look of the search results page that users see when there are no results to return.

Empty result set

Back to top

Changing the Language of the User Interface


You can have your users' search page and search results pages in a language other than English, which is the default. You also can have several languages active for your users and the search appliance will present search results for an active language based on the settings in the user's computer.

The search appliance allows multiple stylesheets that present the search page, advanced search, and results pages in different languages, all associated with a single front end. The language-specific stylesheet is selected based on the Accept- language header sent from the user's browser. The stylesheet is selected from the set of languages marked “active”; if there is no match, the default language is used. A language-specific stylesheet is created when you make a language active. Each language's stylesheet can be edited and customized independently.

To change the language of the user interface, use the Search > Search Features > Front Ends > Output Format page in the Admin Console. For complete information about using the Output Format page, click Admin Console Help > Search > Search Features > Front Ends > Output Format in the Admin Console.

The search appliance displays search results in the following languages:

Basque
Catalan
Chinese (Simplified)
Chinese (Traditional)
Czech
Danish
Dutch
English (Default)
English (UK)
Finnish
French
Galician
German
Greek
Hungarian
Italian
Japanese
Korean
Norwegian
Polish
Portuguese (Brazil)
Portuguese (Portugal)
Russian
Spanish
Swedish
Turkish
Vietnamese

Back to top

Customizing HTTP Response Headers for XSLT-Transformed Search Results

The default value of the HTTP response Content-Type header is text/html for XSLT-transformed search results. The HTTP response Access-Control-Allow-Origin header is not set by default. You can configure a front end to return a custom Content-Type or Access-Control-Allow-Origin in the HTTP response headers for XSLT-transformed search results.

To customize these HTTP response headers:

  1. Click Search > Search Features > Front Ends.
  2. Click Edit next to the front end you want to modify.
  3. Click the Output Format tab.
  4. For HTTP Response Content-Type Header, enter the new value.
  5. For HTTP Response Access-Control-Allow-Origin Header, enter the new value.
  6. Click Save.

For complete information about configuring these headers, see the Search > Search Features > Front Ends help page in the Admin Console.

Back to top

Customization Process Overview


You may customize a user interface using both the Page Layout Helper and by editing the XSLT stylesheet directly. You must make all Page Layout changes in the boxes provided before editing the XSLT stylesheet directly. These changes are saved in the XSLT stylesheet when you click Save.

You cannot return to using the Page Layout Helper after you manually edit the XSLT stylesheet, unless you start over completely by clicking the Restore Default button. If you want to continue editing, you can do so in the XSLT Stylesheet Editor.

Here is the recommended sequence for customizing a user interface:

  1. Create a new front end.
  2. Use the Page Layout Helper to make changes to the user interface.
  3. Click Preview to view each change you make.

    A new browser window opens with each preview, so close the window each time you return to the Page Layout Helper. The Preview button lets you look at each change you make before you move on. It does not save your changes.

  4. Continue making changes in the Page Layout Helper and previewing them.
  5. When finished, click Save.
  6. Click Export to save the XSLT stylesheet as a backup.

    If you are satisfied with the page layout of your search and search results pages, go to step 13 now. If you want to make more changes, go to step 7. If you edit the XSLT stylesheet, those edits are made in addition to the Page Layout changes. You cannot return to the Page Layout Helper after editing the XSLT stylesheet itself; the Page Layout Helper is disabled.

  7. Click the Edit underlying XSLT code link.

    (The code now contains your page layout changes from using the Page Layout Helper.)

  8. Following the commented instructions, make the changes you want.
  9. Click Preview to see your changes.

    A new browser window opens with each preview, so you may want to close the window each time you return to the XSLT stylesheet.

  10. Continue making changes in the XSLT code and previewing the changes.
  11. When finished and ready to serve the changed pages, click Save.
  12. Click Export to save the XSLT stylesheet as a backup.
  13. Test your changed search and search results pages by using the Test Center link at the upper right of the page.

    Click the links and do some searches to make sure the pages look the way you want them to. Changed pages are served to users within 15-30 minutes.

Later, you can use the Import button to use your edited XSLT stylesheet to make further changes.

Back to top

Viewing User Interface Changes in a Browser Window

Creating a user interface is an iterative process. During this process, you may want to view your saved changes in a browser window. By default, the stylesheet cache is updated approximately every 15-30 minutes. To refresh the stylesheet cache and display your current changes immediately, include the search parameter &proxyreload=1 in the search request URL. The following search request URL example includes the proxyreload parameter:

http://search_appliance_name/search? site=default_collection&client=default_frontend&output=xml_no_dtd&proxystylesheet=my_frontend &proxyreload=1 &proxycustom=%3CHOME/%3E

For information about search parameters, refer to the Search Protocol Reference.

Managing Customized XSLT Stylesheets

If you customize XSLT stylesheets, make sure that you keep a backup copies offline. To back up an XSLT, export it as described in See Exporting an XSLT Stylesheet. You can also export the entire configuration for a search appliance using the Administration > Import/Export page in the Admin Console.

To help manage ongoing customizations to XSLT stylesheets, you can use a source control system. This method of managing XSLT stylesheets is especially useful if you deploy an XSLT stylesheet in more than one search appliance, such as a master and a hot spare. The source control system can contain the authoritative version of the XSLT stylesheet.

Migrating a Customized XSLT Stylesheet to a New Software Release

In some instances, a new software release of the search appliance contains changes to the XSLT stylesheet. If you have a customized XSLT stylesheet from an earlier software release, you can migrate it to the new software release by adding any new XSLT code to it. Before you begin editing the XSLT stylesheet, ensure that you have an exported version of it. If not, export it, as described in Exporting an XSLT Stylesheet.

To migrate a customized stylesheet to a new software release:

  1. Identify changes in the new XSLT stylesheet that you want to copy into the customized stylesheet.
  2. Open both the exported, customized stylesheet and the new stylesheet in an XSLT compatible editor.
  3. Scroll to the section of the XSLT stylesheets where the code that you want to copy appears.

    For example, if the new code appears in the Result Page Components section, scroll to that section in both XSLT stylesheets.

  4. Copy the lines of new or changed code from the XSLT stylesheet for the new release and paste them into the customized XSLT stylesheet.
  5. Save your changes.
  6. Create a new front end for the updated XSLT stylesheet as described in See Creating a Front End.
  7. Import the customized XSLT stylesheet into the new front end, as described in Importing an XSLT Stylesheet.

For more information about changes or new features in an XSLT stylesheet for a release, see the update instructions for the software release.

User Interface Design Principles

This section contains the following best practices tips and guidelines for designing an effective user interface:

Back to top

Keep Search Pages Clean, Simple, and Fast

Searching should be fast, and faster search encourages users to search more often. Keep the main search page simple. Put advanced search features on a separate page. On search results pages, try to keep navigational elements that aren't search- related to a minimum.

Keep Advanced Search Separate

Over 95% of users do not use advanced search features. Make the primary search mechanism simple. At most the simple search area should invite keywords to be entered, and possibly the choice of key categories (such as collections) for searches. On the simple search page, place a link to an advanced search page for those users who want advanced features.

Make Search Ubiquitous

It should be easy for users to search for information from any page on your organization's sites. Every page should include a search box or at least a link to a search page. Every search results page should also include a search box to facilitate subsequent searches.

Make Sure the Search Box Is Big Enough

Search boxes should be big enough to promote multiple word entries. Users typically only enter what fits in the search box. If the search box is small, a user may enter only a single word. Because Google provides excellent support for multi-word, phrase, or natural-language queries, make the search box big enough for users to enter larger queries. The recommended minimum size for a search box is 20-30 characters.

Make Sure the User Knows what Documents Have Been Searched

Near the search box and on the search results page, be sure to state what document set is being searched over. It allows users to focus their searches and is especially important when using multiple collections. There should also be a link that enables a user to expand a search from a collection to the entire search index at any time from the search results page.

Make Help Easily Available

A link to a help page should be accessible near the search box.

Make Search Results Pages Useful

Search results pages should have all the information that a user needs to determine whether a given search result meets her information needs. Within a search results page, the following information about the results should appear:

  • The original query within a search box
  • Number of results for the query
  • Total number of results
  • Current retrieval set (for example, 21-30 of N, where N = total number of results)
  • Time it took for the results to be returned
  • State the query searched for and what collection was searched
  • Title of a result document
  • Dynamically generated document snippet
  • URL of the result document
  • Size of the result document

Also, the search appliance provides additional cached page features that may be provided with the results. Cache results allow the user to see the HTML version of the original page. This feature is especially useful if the URL is currently unavailable or in a format that the user's computer cannot read.

Keep the Number of Results Reasonable

Calculating and displaying lots of results is computing-intensive. Because most users find what they are looking for in the first 10 results, it is recommended that each search results page show only 10 results. You can always give the users an advanced search option to change the number of search results that appear on each search results page.

Back to top

Was this article helpful?
How can we improve it?