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

    Customizing the Default CSS File

    Each view loads one or more Cascading Style Sheet (CSS), which are defined in the CSS mapping table. By default, the system assigns the default CSS (which contains the Primo_default.3.0.css file out of the box) via the Views wizard. This file defines the default styles for the Front End views.
    You can customize the formatting details of your views by modifying elements that are defined in the Primo_default.3.0.css file. Ex Libris does not recommend modifying this file. Instead, you can create new CSS files, modify specific elements that are defined in the Primo_default.3.0.css file (or add new ones), and then add these CSS files to the list of CSS files that are loaded in your view. This allows you to receive updates to the Primo_default.3.0.css file and retain your customizations during upgrades. Note that you can also add an import statement to your CSS file to include the Primo_default.3.0.css file.
    The Primo_default.3.0.css file contains many sections that represent the Front End's tiles and dialog boxes. Each section contains the following information about the tile or dialog box:
    • Location on the screen.
    • Measurements and boundaries.
    • Styles used, including different fonts, colors, and styles for different areas of texts.
    • The directory location of any images included in the tile, along with the location of the image within the tile.
    In addition, on-premises customers can modify the elements provided in the default Primo locale CSS, which defines the styles for language localization. Primo loads this CSS file last to support elements that pertain to a specific locale. For more information, see Customizing the Default Primo Locale CSS Files.
    The mobile.css file provides out-of-the-box support for devices with smaller screens. For some locales, the page in the mobile view may be too wide. You can customize the screen as needed by adding a customized version of the mobile.css file to the following directory, which will override the settings in the default mobile.css file:
    /exlibris/primo/p4_1/ng/primo/home/system/tomcat/search/webapps/primo_library#libweb/locale/<locale>/css/
    An example has been provided for Hebrew in the following file:
    /exlibris/primo/p4_1/ng/primo/home/system/tomcat/search/webapps/primo_library#libweb/locale/iw_IL/css/mobile.css
    It is never recommended to modify the out-of-the-box CSS files, because they will be overwritten by upgrades.
    To customize the default UI styles:
    1. Create a new CSS file on a local Web server. If you want to view the default Primo CSS file for reference, enter the following URL in you browser.
      http://<fe hostname>:<port>/primo_library/libweb/css/Primo_default.3.0.css
      For on-premises installations, create a new CSS file on the server:
      1. Enter the following commands to access the css directory:
        fe_web
        cd css
      2. Enter the following command to make a copy of the Primo_default.3.0.css file:
        cp Primo_default.3.0.css <new_css>.css
      If you would like to update styles for a specific locale, create a backup of the following file before modifying it:
      <fe_web>/locale/<locale>/css/Primo_locale.css
    2. Edit the new CSS file.
      It is easier to maintain and test your customized style sheet, if it only contains elements that you have customized. In addition, you will receive updates automatically from Ex Libris for elements that are not customized.
    3. Add the new CSS file to the CSS files mapping table by performing the following steps:
      1. Click Primo Home > Advanced Configuration > All Mapping Tables to open the Mapping Tables page.
      2. On the Mapping Tables page, select Front End from the Subsystem pull-down field.
        The list of Front End mapping tables displays on the page.
      3. Click Edit next to the row that contains the CSS table.
        The CSS mapping table opens.
        The CSS Mapping Table Page
      4. In the Create a New Mapping Row area, use the following table to enter the information for the new CSS file.
        CSS Mapping Table Row Details
        Field name Description
        Enabled
        Checking this box enables the mapping row.
        CSS Name
        The name of the set of CSS files that you can assign to views on the View Attributes page in the Views wizard.
        CSS URL
        The URLs of one or more CSS files that are loaded in order for each page in the FE. Duplicate elements overwrite elements that are defined in previously loaded CSS files, allowing you to modify specific elements in the default Primo CSS. You must separate each URL in the list with a semicolon. For example:
        Primo_default.3.0.css;http://my_Web_server.com/static_htmls/MyCustomCSS.css
        For on-premises installations:
        Primo_default.3.0.css;../static_htmls/CUSTOM/css/MyCustomCSS.css
        Description
        This field describes the mapping row.
      5. Click Create to add the new CSS file to the system.
    4. Assign the new CSS file to the Primo view by performing the following steps:
      1. Access the Views wizard in the Back Office.
      2. In the list of views, click Edit next to the view that you want to apply the new CSS file.
        The Edit View Attributes page displays the attribute settings for the selected view.
        Edit View Attributes Window
      3. Select the CSS name (which is defined in the CSS mapping table) from the CSS drop-down list.
      4. Select the mobile CSS name (which is defined in the CSS mapping table) from the Mobile CSS drop-down list.
        This field defines the CSS files that your view uses for smaller devices (such as smart phones). You can also customize the out-of-the-box mobile.css file, which is included in Mobile CSS (which is defined in the CSS mapping table). If you leave Mobile CSS field blank, the system wils use the Primo_default.3.0.css file for smaller devices.
      5. Click Save & Continue to update the view.
      6. Continue through the wizard until you reach the Deploy view.
      7. Click Deploy to update the Front End.