360 Search: Using CSS to Style Your 360 Search Interface
- Product: 360 Search
Where can I find a reference for the various CSS classes used in the 360 Search interface? I'd like to customize them using my own styles.
Many libraries choose to use the branding options in 360 Search to share the look and feel of their library's web site to the application. However, in some cases you may want greater or more granular control over the presentation of the various elements in the Search and Results screens in 360 Search, and the best way to do it is to use CSS. Each HTML element in the 360 Search interface is tagged with a class so that you can apply your own styles as needed.
The Search Page
The table below lists the most commonly customized HTML tags and their associated CSS classes for the initial 360 Search interface. If you do not see the tag and class you would like to customize in this list please use the Contact Us tab at the top of this page to send a request to our Support group for assistance.
Search Page Header | ||
HTML Class | CSS Tags | Purpose |
div.SSPageHeading | text-align; margin; |
The area surrounding the header |
Basic and Advanced Search Tabs | ||
HTML Class | CSS Tags | Purpose |
div.SSSearchModeTabSet | text-align; padding-top; |
padding-top value indicates amount of space between header and 360Search content |
td.SSSearchModeTabNonTab | width; border-bottom; |
Width sets the width around and in-between the Basic/Advanced tabs, border-bottom sets the space below the text |
td.SSSearchModeTabNonTabMargin | width; border-bottom; |
Width sets the margin for the Basic/Advanced tabs. The higher the value, the more to the right this content will appear. border-bottom sets the space below the text |
td.SSSearchModeTabNonTabForTips | font-size:76%; border-bottom; width; |
Sets the size of the 'Search Tips' link and the underline border color surrounding the Basic/Advanced tabs |
td.SSSearchModeTabUnselected; td.SSSearchModeTabSelected |
border-left:1px solid; border-top; border-right; white-space; font-weight; text-align; padding; |
Each class can be separated and use their own unique set of values, but by default they are together. This class sets the properties of the Basic/Search tabs |
Search Term Input Area | ||
HTML Class | CSS Tags | Purpose |
table.SSCentralSearchSearchTerm | text-align; margin; |
This table encompasses the four search boxes and the Year selector |
Database and Category Lists | ||
HTML Class | CSS Tags | Purpose |
table.SSCentralSearchDBSelection; table.SSCentralSearchCatSelection |
width; margin-left; margin-right; |
Helps position the category and database lists |
td.SSCentralSearchDBSelectionCheckbox; td.SSCentralSearchCatSelectionCheckbox |
text-align; vertical-align; |
Positions the category and database checkboxes |
td.SSCentralSearchDBSelectionBlurb; td.SSCentralSearchCatSelectionBlurb |
text-align; vertical-align; font-size; |
Sets alignments and size of category and database names |
form.SSCentralSearchSearchForm; tr.SSCentralSearchSearchYear; td.SSCentralSearchSearchYear; div.SSCentralSearchDBSelection; div.SSCentralSearchCatSelection |
text-align; | Sets properties for each area within the FORM tags. Each tag can be given its own set of styles, but taken as a whole can give the entire forma uniform look |
The Results Page
The table below lists the most commonly customized HTML tags and their associated CSS classes for the 360 Search results interface.If you do not see the tag and class you would like to customize in this list please use the Contact Us tab at the top of this page to send a request to our Support group for assistance.
(See this document for examples of how to use CSS to change colors in the Results Page.)
Results Page Header | ||
HTML Class | CSS Tags | Purpose |
div.SSCentralSearchResultsHeading | border;background-color; text-align; font-weight; width; padding; |
Sets properties for all of the heading boxes such as 'Search', 'Sort Results', 'Filter Results' |
div.SSCentralSearchResultsSourceHeader | border; background-color; text-align; font-style; font-size; width; margin; padding; |
The area surrounding the header |
td.SSCentralSearchResultsPageLeftCell; td.SSCentralSearchControlsBox; td.SSCentralSearchResults; td.SSCentralSearchStatus |
vertical-align; text-align; |
These can be used separately, but for uniformity are combined by default. Affect the styles of the left panes as well as the main results |
td.SSCentralSearchControlsBox | width; | Sets properties for 'Search' box |
div.SSCentralSearchControlsBox | background-color; border; color; padding; |
Sets properties for 'Search' box |
div.SSCentralSearchControlsControl | padding-top; padding-bottom; text-align; font-size; |
Sets properties for 'Search Completed' text |
img.SSSearchImage | height; width; |
Sets properties for Searching image |
span.SSCentralSearchHelp; span.SSCentralSearchSearchYearFormat; span.SSCentralSearchSearchYear; div.SSCentralSearchResultsNavigationPrevious; div.SSCentralSearchResultsNavigationNext; div.SSCentralSearchResultsHelpLink; a.SSCentralResultsHeadingSummaryLink:link; a.SSCentralResultsHeadingSummaryLink:active; a.SSCentralResultsHeadingSummaryLink:visited |
font-size; | Sets properties for text around date checkbox and the area around the search fields |
div.SSCentralSearchResultsSet | text-align; margin-left; margin-right; |
Sets properties for the overall content of the page |
Results Navigation Section | ||
HTML Class | CSS Tags | Purpose |
table.SSCentralSearchResultsNavigation | clear; width; |
Sets properties for the page navigation links above the actual results |
td.SSCentralSearchResultsNavigationPrevious; td.SSCentralSearchResultsNavigationNext |
width; | Sets properites for the page navigation links above and below the actual results |
td.SSCentralSearchResultsHelpLink; .SSCentralSearchTopControlLink |
text-align; width; |
Sets properties for the 'Help' link below the header |
div.SSCentralSearchResultsNavigationChoosePage | font-size; font-weight; text-align; |
Sets properites for the page navigation links above and below the actual results |
div.SSCentralSearchNextResultsHeader | border-bottom; text-align; font-style; font-size; font-weight; width; margin; padding; |
Sets properties for 'Next Results' area |
.SSCentralSearchNextResults | background; | Sets properties for 'Next Results' link |
fieldset | width; padding; |
Sets properties for paging links (1 - x) |
legend | font-size; | Sets properties for area surrounding paging links (1 - x) |
td.SSCentralSearchResultsNavigationChoosePage | white-space; | Sets properties for area surrounding paging links (1 - x) |
fieldset.SSCentralSearchResultsNavigationOldResults; fieldset.SSCentralSearchResultsNavigationNewResults |
text-align; padding-bottom; display; margin-left; margin-right; border; |
Sets properties for area surrounding paging links (1 - x) |
Results Citation Controls | ||
HTML Class | CSS Tags | Purpose |
td.SSCentralSearchResultsSetItem | vertical-align; text-align; |
Impacts the alignments of the actual results |
div.SSCentralSearchResultsSetItem; div.SSCentralSearchExportResultsSetItem |
font-size; margin-bottom; |
Sets properties for the actual results |
span.SSCentralSearchResultsSetItemSelectAll | font-weight; | Sets properties for area surrounding Select All checkbox row |
span.SSCentralSearchResultsSetItemPublicationTitle | font-weight; | Sets properties for Publication Title text |
td.SSCentralSearchResultsHeadingTitle | text-align; | Sets properties for results heading (# of results, search term) |
div.SSCentralSearchResultsSetItemCitation | text-align; | Sets properties for main citation data |
div.SSCentralSearchResultsSetItemSelectAll | font-size; font-weight; margin-bottom; |
Sets properties for 'Select All Records' text, checkbox, and the entire row across the page |
img.SSCentralSearchResultsSetItemArticleLinker; img.SSCentralSearchExportResultsSetItemArticleLinker |
border; vertical-align; |
Sets properties for Article Linker icon |
.SSCentralSearchAbstractTextBox | background-color; border-left; border-top; border-right; border-bottom; |
Sets properties for the Abstract box that is visible when the 'Show Abstract' link is clicked in the results |
.SSCentralSearchAbstractText | text-indent; font-style; margin; |
Sets properties for the text in the Abstract box that is visible when the 'Show Abstract' link is clicked in the results |
td.SSCentralResultsHeadingSummaryLink | text-align; font-size; |
Sets properties for 'Show Summary' link |
.SSCentralSearchTopLeftControlBox | width; text-align; vertical-align; |
Sets properties for the left side of the color bar below the header, with the 'Help' link |
.SSCentralSearchTopRightControlBox | width; text-align; vertical-align; |
Sets properties for the right side of the color bar below the header, with the 'Help' link |
Results Clusters Controls | ||
HTML Class | CSS Tags | Purpose |
span.SSCentralSearchRootClusterNodeLabel | word-wrap; display; font-weight; text-align; font-size; margin-left; |
Sets properties for 'All Topics' link |
span.SSCentralSearchClusterNodeLabel | word-wrap; display; font-weight; margin-left; text-align; font-size; |
Sets properties for topic links under 'All Topics' |
span.SSCentralSearchClusterSize | color; font-size; |
Sets properties for the number of items listed under 'All Topics' |
div.SSCentralSearchClusterNode; div.SSCentralSearchLastClusterNode |
background-color; clear; text-align; margin; padding; |
Sets properties for the content under 'All Topics' |
span.SSCentralSearchClusterListLeaf | background; | Sets bullet icon for content under 'All Topics' |
span.SSCentralSearchClusterListIcon | float; display:block; width; height; text-decoration; margin-right; |
Sets properties for table encompassing 'Clustered Results' text |
span.SSCentralSearchClusteredResultsHeading | text-align; font-size; font-weight; width; padding; |
Sets properties for 'Clustered Results' text |
span.SSCentralSearchClusterListRootIcon | background; padding-right; |
Sets properties for icon or image next to 'Clustered Results' text |
div.SSCentralSearchShowMoreClusters; div.SSCentralSearchShowMoreClusters a; div.SSCentralSearchShowMoreClusters a:active; div.SSCentralSearchShowMoreClusters a:hover; div.SSCentralSearchShowMoreClusters a:visited |
font-size; margin; padding; |
Sets properties for 'Show More Clusters' link |
div.SSCentralSearchRemoveHighlighting | text-align; display; font-size; |
Sets properties for 'Remove highlighting' text |
.SSCentralSearchClusterResultsBox | background-color; | Sets background color for 'All Topics' heading |
.SSCentralSearchClusterTab | background:#eee; border-top; border-right; margin-right; font; color; font-weight; padding; |
Sets properties for 'Clustered Results' area |
.SSCentralSearchClusterTab a; .SSCentralSearchClusterTab a:active; .SSCentralSearchClusterTab a:hover; .SSCentralSearchClusterTab a:visited |
color; cursor; text-decoration; |
Sets properties for topic links under 'All Topics' |
.SSCentralSearchClusterTabSelected; .SSCentralSearchClusterTabInactive |
background-color; cursor; border-top; border-right; margin-right; font; color; font-weight; padding; |
Sets properties for area around 'Clustered Results' text |
.SSCentralSearchClusterMessageBox | background; font; text-align; width; padding; |
Sets properties for 'Clustered Results' box |
Error Indicators and Messages | ||
HTML Class | CSS Tags | Purpose |
.SSCentralSearchDBErrorMessage | font-weight; margin-left; text-align; |
Sets properties for 'Authentication Failed' error message |
.SSCentralSearchDBErrorIndicator a; .SSCentralSearchDBErrorIndicator a:active; .SSCentralSearchDBErrorIndicator a:hover; .SSCentralSearchDBErrorIndicator a:visited |
text-decoration; | Sets properties for database error links |
Email and Export Form | ||
HTML Class | CSS Tags | Purpose |
a.SSCentralSearchExportControlLinkInactive | color; | Sets properties for 'Export' link |
span.SSCentralSearchSelectedItemsConfirmationMessage | padding-right; | Sets properties for E-Mail popup window content |
table.SSCentralSearchSelectedItemsEmailForm; table.SSCentralSearchSelectedItemsEmailConfirmation; table.SSCentralSearchSelectedItemsExportForm; |
padding-right; | Sets properties for E-Mail popup window content |
td.SSCentralSearchSelectedItemsEmailFormLabel | text-align; vertical-align; font-weight; |
Sets properties for E-Mail popup window content |
td.SSCentralSearchSelectedItemsEmailFormHeading; td.SSCentralSearchSelectedItemsExportFormHeading; td.SSCentralSearchSelectedItemsEmailConfirmationHeading |
font-size; font-style; |
Sets properties for E-Mail popup window content |
.SSCentralSearchRequiredField | color; padding-right; |
Sets properties for E-Mail popup window content |
.SSCentralSearchSelectedItemsEmailStatus | padding-left; font-weight; font-style; font-size; |
Sets properties for E-Mail popup window content |
.SSCentralSearchSelectedItemsEmailMessage | color; font-size; font-style; font-weight; |
Sets properties for E-Mail popup window content |
.SSCentralSearchTextExportPageHeading | text-align; margin; |
Sets properties for Export popup window content |
.SSCentralSearchArrowLinkImage | padding-bottom; border-style; |
Sets properties for E-Mail and Export links |
.SSCentralSearchEmailInputField | font-family; font-size; |
Sets properties for input fields in E-Mail popup window |
,td.SSCentralSearchSelectedItemsEmailFormSubmit; td.SSCentralSearchSelectedItemsExportFormSubmit |
text-align; | Sets properties for EMail and Export links |
- Date Created: 9-Feb-2014
- Last Edited Date: 29-Jun-2015
- Old Article Number: 7481