How do I customize the appearance of my search page with CSS?
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).
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.
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.
Customizing the search results
The following are the classnames used to define the style and appearance of the search results.
Customizing the appearance of recommended links
The following are the classnames used to define the style and appearance of the recommended links.
Example CSS changes
Changing fonts and colours
Change the colour of the search button to red, and the text box for the search words to be green:
Change the font for all search results to be Verdana:
Change the highlighting to be in bold text:
Change the meta description to be in blue italics:
Change the font for the search form text (eg. "Search for:") to Verdana:
Change the font for the search form options (eg. "Results per page:") to be underlined:
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.
Changing the appearance of links
Change the colour of the links to red and it only underlines when you put your mouse over it:
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.
Changing the search form button
Change the "Submit" button to an image ("MyButton.gif"):
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):
This will look like this:
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:
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:
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.
The CSS changes applied in the above example are as follows:
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