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

    Primo CSS Styles (Classic UI)

    1. Last updated
    2. Save as PDF
    This information is not applicable to Primo VE environments. For more details on Primo VE configuration, see Primo VE.
    This section provides a brief description of the main styles used in Primo v3. The most important design change is that tables are no longer used in the layout.

    CSS Classes and IDs

    The other major advancement is that all Primo styles use new and intuitive class names, which are prefixed with EXL- to avoid collisions with the tiles and static HTML files that you add.
    In addition, Primo styles use CSS IDs (ids), which are generally prefixed with exlid-. As a design decision, we have tried to keep much of the CSS based on CSS classes and independent of ids to provide backwards compatibility for legacy names.
    For more information on the styles used in the Primo CSS, refer to Primo CSS Structure.
    If you want to modify the layout of the Front End, you can use a Firefox plug-in, such as Firebug, to see exactly how the pages are defined.

    Mapping of V2 to V3 Classes

    Because of the new Classes and CSS design, as well as the radically different HTML structure in this redesign for Version 3, providing a map of old class names to new class names is virtually impossible and mostly meaningless. Still, we’ll try to do our best to give you a fighting chance of adapting your old Primo styles to your new Primo. We would recommend taking the opportunity to try out the new layouts or themes for Primo v3, because many of the features are laid out differently.
    The following figure shows the Search box styles used in the Front End for Primo v2:
    SearchBoxStylesV2.gif
    Search Box Styles in Primo Version 2
    The following figure shows the Search box styles used in the Front End for Primo v3:
    SearchBoxStylesV3.gif
    Search Box Styles in Primo Version 3
    The following figure shows the results styles used in the Front End for Primo v2:
    searchResultsStylesV2.gif
    Search Results Styles in Primo Version 2
    The following figure shows the results styles used in the Front End for Primo v3:
    searchResultsStylesV3.gif
    Search Results Styles in Primo Version 3
    The following figure shows the full details styles used in the Front End for Primo v2:
    FullDetailsStylesV2.gif
    Full Details Styles in Primo Version 2
    The following figure shows the full details styles used in the Front End for Primo v3:
    FullDetailsStylesV3.gif
    Full Details Styles in Primo Version 3