CSS class listing

Top  Previous  Next

Style class

Description

.highlight

The appearance of the highlighted search words in the results, when highlighting is enabled. For example,

.highlight { font-weight: bold; }

will make highlighted text bold (with no coloured background).

.searchheading

The appearance of the “Search results for…” heading

.summary

The appearance of the summary information for your search results (“129 results found on 2 pages”)

.suggestion

The appearance of text regarding spelling suggestions ("Did you mean...") or search suggestions ("You may find more results ...")

.results

The appearance of the search result listing.

.category

The appearance of the category tag next to the result link, e.g. “[News article]”

.cat_summary

The appearance of the category summary,
e.g. "Refine your search by category: News (3)   Forum (13)"

.sorting

The appearance of the text links to switch between "Sort by relevance" and "Sort by date" when sorting by date is enabled.

.result_title

The appearance of the title line (result number, page title/link, and category name). Note that the link itself will be based on the styles defined for hypertext links (ie. “a:link”, “a:visited”, “a:hover” and “a:active”).

.description

The appearance of the meta description or page description for a search result.

.context

The appearance of the contextual description. You can specify font, size, etc. here. You can also specify margins and padding to make the context indent from the main result link.

.infoline

The appearance of the small information line for each search result (“Terms matched”, “Score”, and “URL”).

.zoom_searchform

The appearance of the overall search form. You can specify the overall font you’d like to use for the text around the form, or give the form a border, margin, or background. For example:

.zoom_searchform { font-size: 100%; border: dashed; border-width: 1px; background: #DDDDDD;}

Will set a dashed border around the search form with a light grey background.

.zoom_results_per_page

The appearance of the "Results per page" drop-down box.

.zoom_match

The appearance of the "Match ... any search words / all search words" option.

.zoom_categories

The appearance of the categories drop-down or checkbox list (only when categories are enabled). See "Categories" for more information. The following will set your category drop-down box to green with smaller fonts:

.zoom_categories { background: #00FF00; font-size: 70%}

When multiple categories are enabled, a checkbox list is used and you can change the appearance of the list via the "ul" and "li" sub-items of this CSS class. For example,

.zoom_categories ul { display: inline; margin: 0px; }

.zoom_categories li { display: inline; list-style-type: none;}

will set the multiple category checkbox list to be horizontal without list bullets.

input.zoom_button

The appearance of the search button. You can change the colour of this button or set it to an image. For example:
input.zoom_button { background-color: #008080; color: #FFFFFF; }

input.zoom_searchbox

The appearance of the search box where a user enters their search query. You can change the background colour, size, and font from here.

.result_image

The appearance of the image to be displayed alongside your search results (see "Icons and thumbnails"). Note that this is the class wrapping around the image itself. You can specify CSS for the img file itself via ".result_image img". For example:

.result_image img { margin: 10px; width:100px; border:0px;}

will set your images to a fixed width of 100 pixels (and automatically determine the height) with no border and a 10 pixel margin. For more examples, see "Customizing the appearance of your icons or thumbnails".

.result_block

The appearance of one row of the search result. You can use this to specify lines between each search result entry, or an alternating background corner etc. For example,

.result_block { border: 1px; margin: 15px; clear: left; }

will specify a 1 pixel wide border and 15 pixel margin around the search result item (enclosing the titles, description, etc.). Note that you will need to specify the same for .result_altblock if you want all of your result items to have this appearance, or you can specify something different.

.result_altblock

The appearance of every alternating row of the search result (to .result_block above). You can specify something different here to .result_block and have alternating background colour changes for example, like the following:

.result_block { background-color: #FFFFFF; }

.result_altblock { background-color: #AAAAAA; }

will specify every result item to have a white background, and every second item to have a grey background.

.result_pages

The appearance of the text links to the different pages of search results at the bottom of the page ("Result Pages: 1 2 3 Next >>")

.result_pagescount

The appearance of the text at the top of the results displaying the number of pages of results found ("10 pages of results")

.searchtime

The appearance of the "Search took x seconds" text displayed at the bottom of the page (when enabled, see "Configuring search page")

.recommended

The appearance of the recommended links part of the page that appears at the top of the search results (when "Recommended links" are enabled). The following will show all recommended links in a green coloured box with a dotted border on top and bottom:

.recommended 

 background: #DFFFBF; 

 border-top: 1px dotted #808080; 

 border-bottom: 1px dotted #808080; 

 margin-top: 15px; 

 margin-bottom: 15px; 

}

.recommended_heading

The appearance of the heading text for 'Recommended links'.

.recommend_block

The appearance of one row/item of a recommended link (similar to .result_block above, but this is for the recommended links).

.recommend_title

The appearance of the title text link for a recommended link (similar to .result_title but for the recommended links).

.recommend_description

The appearance of the description for a recommended link (similar to .result_description but for the recommended links).

.recommend_image

The appearance of the image to be displayed alongside a recommended link. Note that this is the class wrapping around the image itself. To make your recommended link images appear on the left side of the link, use the following:

.recommend_image { float: left; display: block; }

You can specify CSS for the img file itself via ".result_image img". For example:

.recommend_image img { margin: 10px; width:100px; border:0px;}

will set your images to a fixed width of 100 pixels (and automatically determine the height) with no border and a 10 pixel margin. For more examples, see "Customizing the appearance of your icons or thumbnails".

.recommend_infoline

The appearance of the information line for a recommended link (similar to .result_infoline but for the recommended links).

Custom Meta Field CSS classes

The following classes are only needed for sites using Custom Meta Search Fields.

.result_custommeta

The appearance of one Custom Meta Field that are listed next to a search result. This is the block that encloses the inline "result_metaname_MYFIELD" and "result_metavalue_MYFIELD" tags. Changing this allows you to specify how to space out the different meta fields, whether they should appear on the same line or not. For example,

.result_custommeta { display: block; }

will make each meta field appear on a new line.

.result_metaname_MYFIELD

This is the style for the individual meta field labels that appear next to your search results. For example, if you have a custom meta field for "PRICE" which is displayed as "Price: 8" in the search results. This would be the "Price:" part of the search result. So the following, for example:

.result_metaname_PRICE { font-weight: bold; }

will make the word "Price:" appear in bold, while the value will remain normal (e.g. "Price: 8")

.result_metavalue_MYFIELD

This is the style for the individual meta field values that appear next to your search results. For example, if you have a custom meta field for "PRICE" which is displayed as "Price: 8" in the search results. This would be the "8" part of the search result. So the following, for example:

.result_metavalue_PRICE { font-style italic; }

will make the value "8" appear in italics.

.zoom_metaform

This is the part of the generated search form containing the meta search fields/criteria that the user can search by.

.zoom_metaform_numeric

This is the input text box for meta fields which are specified as the "Numeric" type.

.zoom_metaform_dropdown

This is the dropdown box for meta fields which are specified as the "Dropdown text" type.

.zoom_metaform_multi

This is the multi-select box for meta fields which are specified as the "Multi-select" type.

.zoom_metaform_money

This is the input text box for meta fields which are specified as the "Money" type.