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).
|