How do I customize the appearance of my search page with CSS?

The appearance of the search page and search results are defined by a set of CSS (Cascading Style Sheets) classes which allow you to modify everything from fonts to colours, indents, line spacing, borders and more. This is defined at the top of your search template file ("search_template.html" or "search.html" for the Javascript version).

CSS is the Internet standard for formatting the appearance of a web page, and provides the most versatile options to customizing a page's appearance and layout. The examples given on this page is only the tip of the iceberg with the changes you can make.

If you are not familiar with CSS, we highly recommend that you take a look at this CSS tutorial on w3.org, where you can find out more about the properties and attributes available (the things you can specify inside the curly brackets). There are also many other CSS tutorials and resources online if you search on Google.

Customizing the search form

The following are the classnames used to define the style and appearance of the search form. (Note: that this only applies to the search form generated by the script. You can also define your own search form).

search form

Customizing the date picker control

The following are the classnames used to define the style and appearance of the date picker control, when date range searching is enabled. The CSS is specified in an external stylesheet named zoom_datepicker.css. This file should either be linked to (or its contents copied to) search_template.html.

date picker

Customizing the autocomplete control

The following are the classnames used to define the style and appearance of the autocomplete control, when autocomplete is enabled. The CSS is specified in an external stylesheet named zoom_autocomplete.css. This file should either be linked to (or its contents copied to) search_template.html.

autocomplete

Customizing the search results

The following are the classnames used to define the style and appearance of the search results.

guide results

Customizing the appearance of recommended links

The following are the classnames used to define the style and appearance of the recommended links.

guide recs

Example CSS changes

The following are some basic, common modifications which you can use as examples or a guide to your own CSS customizations. Note that these modifications are to be made at the top of your search template file ("search_template.html", or "search.html" for the Javascript version) using a text editor such as Notepad or your favourite HTML editor (such as Dreamweaver).

Changing fonts and colours

Change the colour of the search button to red, and the text box for the search words to be green:

input.zoom_button { background-color: #cc0000; }
input.zoom_searchbox { background-color: #00cc00; }

Change the font for all search results to be Verdana:

.results { font-family: Verdana; font-size:100% }

Change the highlighting to be in bold text:

.highlight { font-weight: bold; }

Change the meta description to be in blue italics:

.description { font-style: italic; }

Change the font for the search form text (eg. "Search for:") to Verdana:

.zoom_searchform { font-family: Verdana }

Change the font for the search form options (eg. "Results per page:") to be underlined:

.zoom_options { text-decoration: underline; }

The dropdown boxes for categories and "results per page" can be styled by the select and option selectors. The following changes the dropdown values to a purple background and red text.

select { background-color: #666699; color: #FF0000; }

Changing the appearance of links

Change the colour of the links to red and it only underlines when you put your mouse over it:

a:link { color: #FF0000; text-decoration: none; }
a:visited { color: #FF0000; text-decoration: none; }
a:hover { color: #FF0000; text-decoration: underline; }
a:active { color: #FF0000; text-decoration: none; }

The above would define the style of all hypertext links on the page. If you wish to have a different look for other links, you will have to use a CSS subclass. For example, the following would define only search result links to be green, independent of the other links which may appear on the search template page.

.result_title a:link { color: #00FF00; text-decoration: none; }
.result_title a:visited { color: #00FF00; text-decoration: none; }
.result_title a:hover { color: #00FF00; text-decoration: underline; }
.result_title a:active { color: #00FF00; text-decoration: none; }

Changing the search form button

Change the "Submit" button to an image ("MyButton.gif"):

input.zoom_button { background: transparent url(MyButton.gif) no-repeat center top; }

Changing the category check boxes

If you have categories enabled with "Allow searching in multiple categories" checked, you will get a series of checkboxes as part of your search form. This can appear unseemly if you have many categories to select from.

If you want your categories to appear in multiple columns, specify a width element like below (the "float: left;" attribute is important also):

.zoom_categories ul { display: inline; margin: 0px; padding: 0px; float: left; } .zoom_categories li { display: inline; margin-left: 15px; list-style-type: none; width: 300px; float: left; }

This will look like this:

Categories in multiple columns

If you want the categories to be laid out one after the other in a vertical list, see the example later below.

Changing the layout, and miscellanous

You can add a dotted line box around the search form, with a yellow background:

.zoom_searchform { border: 1px dotted; background-color: #FFFF00; }

You can also alter the layout and positioning of various text with CSS. An example would be to increase the line spacing between the title (the clickable link) of the results from the description:

.result_title { margin-bottom: 10px; }

Similarly, adding extra spacing before the "Search results for:..." heading can be done with the margin-top property. You can also increase the line-height of the search results and more.

Note that the examples above is only the tip of the iceberg of changes possible via CSS. If you are not familiar with the use of CSS for customizing page layout, then we would recommend looking up some online references as recommended at the top of this page.

Example search form customized with CSS

The following is a search form that has been customized with CSS changes.

Example search form customized with CSS

The CSS changes applied in the above example are as follows:

.zoom_searchform
{
font-family: Verdana;
font-size: 8pt;
background-color: #EEEEEE;
border-top: 2px solid #AAAAAA;
border-bottom: 2px solid #AAAAAA;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 0px;
display: block;
width: 200px;
}
.zoom_results_per_page { font-size: 100%; margin-top: 10px; display: block; }
.zoom_match { font-size: 80%; margin-left: 10px; display: none;}
.zoom_categories { font-size: 100%; display: block; }
.zoom_categories ul { margin-top: 5px; padding: 0px;}
.zoom_categories li { margin-left: 15px; list-style-type: none; }
input.zoom_button { background: url(searchbutton1.gif) no-repeat center top; border: 0px; width: 24px; height: 22px; }

Note also that Categories have been enabled and set to "Allow searching in multiple categories". The "Submit" search button text was also removed from the ZLANG language file. The blue search button image can be downloaded here (right-click and select "Save Target as...") and is made available free for your use.

For example search box HTML you can use on your site, please click here.

Return to the Zoom Search Engine Support page