Skip to main content
ExLibris
  • Subscribe by RSS
    • Back
    360 Services
    Ex Libris Knowledge Center

    360 Search: Using CSS to Style Your 360 Search Interface

    1. Last updated
    2. Save as PDF
    • 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