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

    Branding the Delivery Tabs

    Translatable
    This section applies only to Primo. For customizations regarding Primo VE and Alma-Summon environments, see the following pages:
    Depending on which Primo UI are using, Alma uses the following CSS files to define the look and feel of the View It and Get It tabs and the Alma Link Resolver Electronic Services page:
    • calendar.css – (classic Primo UI) The classes associated with the existing calendar component.
    • mashup.css – This file contains the classes used for the classic Primo UI.
    • mashup_new.css – This file contains the classes used for the new Primo UI.
    Alma allows you to modify the CSS (and associated image files) that the system uses for the delivery tabs by uploading a customized CSS file. You can download a Zip file that contains the default CSS used for the delivery screens (see Creating a New Skin). By examining the UI page and the contents of the default CSS, you can determine which elements you want to customize.
    AddSkinPage_NewUI.png
    Add a Skin Page
    The View It tab uses separate CSS classes authNote and publicNote for displaying the authentication notes and public notes. It is possible to customize both of these elements.

    Creating a New Skin

    You can create new skins, as well as modify existing skins (see Modifying a Skin). After a skin has been created and uploaded to the server, it is important that you configure Primo to use the new skin. Otherwise, Alma continues to use the default skin for the delivery screens.
    You create or modify skins on the Manage Skins page (Configuration Menu > General > User Interface Settings > Delivery System Skins).
    manage_skins_ux.png
    Manage Skins Page
    To create a customized skin:
    1. On the Manage Skins page, select Add Skin. The Add a Skin page appears.
      AddSkinPage_NewUI.png
      Add a Skin Page
    2. In the Skin Details section, specify a unique name for the skin and an optional description.
    3. Select one of the following radio buttons to download the correct template for your Primo UI: Current UI or New UI. If you are using both UIs in parallel, see Creating Parallel Skins for the New and Classic UIs.
    4. In the Skin Zip File section, select the Default Zip file link to download the default CSS and associated image files to your desktop.
    5. Modify the contents of the files that you want to customize.
      You must retain the original structure of the zip file, including the names of the files and subdirectories and the number of files.
      When customizing images, you must modify the version number to update the old image that may be stored in users’ cache. For example, if you modified the calendar-icon.png file, you must change the version parameter in the calendar.css file from:
      background: url(/view/branding_skin/icons/calendar-icon.png?version=1.0) no-repeat;
      to:
      background: url(/view/branding_skin/icons/calendar-icon.png?version=1.1) no-repeat;
      If the version parameter does not exist, you will have to add it as shown above.
    6. Put the CSS and image files into a zip file, keeping the original structure of the default zip file.
    7. In the Skin Zip File section, search for and select the new zip file in the Please submit a zip field.
    8. Select Save.
    9. In the Primo Back Office, add the following parameter to the related delivery templates (Almagetit, Almaviewit, Almagetit_remote, Almaviewit_remote, Almasingle_service_remote, Almagetit_services, Almasingle_services, Almaviewit_services) on the Templates mapping table page:
      req.skin=<skin name>
      This step is not necessary if the Primo view code is the same as the skin code. In such cases, Alma uses the view code to match the appropriate skin. If you are using the new and classic UIs in parallel, see Creating Parallel Skins for the New and Classic UIs.
      TemplateMT_SkinChange.png
      Templates Mapping Table
    10. Save and deploy your changes in Primo.

    Creating Parallel Skins for the New and Classic UIs

    Before switching to the new UI, Primo allows customers to run the new Primo UI in parallel with the classic UI. This section describes the steps needed to create and use separate skins for each UI.
    To create parallel skins:
    1. If you have not already done so, create a separate view for the new UI. For more information see Views Wizard.
    2. Create separate skins for the classic and new UIs, making sure to use the code of the corresponding Primo view as the skin's name. For more information, see Creating a New Skin.
    3. Make sure that you do not add the req.skin parameter to the delivery templates in the Primo Back Office. You may have to remove the req.skin parameter if previously defined for the classic UI's skin. For more information, see Updating the Delivery Templates.

    Modifying a Skin

    The Add a Skin page enables you to modify skins, as well as create new skins (see Creating a New Skin). To make sure that you are modifying the latest version of a CSS, it is recommended that you download the skin from the server each time you modify it, rather than modifying a copy that may be stored on your local machine.
    To modify a skin:
    You must retain the original structure of the default zip file, including the names of the files and subdirectories and the number of files.
    1. Open the Manage Skins page (Configuration Menu > General > User Interface Settings > Delivery System Skins).
      ManageSkins.png
      ManageSkinsPage_NewUI.png
      Manage Skins Page
    2. Edit your skin.
      ModifySkin.png
      ModifySkinsPage_NewUI.png
      Download Existing Skin
    3. In the Skin Zip File section, select the Skin Zip file link to download the customized CSS and associated image files to your local machine.
    4. Modify the contents of the files that you want to customize.
      To customize the mashup.css file, update and uncomment each class that you want to override. If you used an older version of the mashup.css file, you may need to copy the classes from the default Zip file, which is downloaded when adding new skins.
    5. When customizing images, you must modify the version number to update the old image that may be stored in users’ cache. For example, if you modified the calendar-icon.png file, you must change the version parameter in the calendar.css file from:
      background: url(/view/branding_skin/icons/calendar-icon.png?version=1.0) no-repeat;
      To:
      background: url(/view/branding_skin/icons/calendar-icon.png?version=1.1) no-repeat;
      If the version parameter does not exist, you will have to add it as shown above.
    6. Put the CSS and image files into a Zip file, keeping the original structure of the default Zip file.
    7. In the Skin Zip File section, search for and select the modified Zip file in the Please submit a zip field.
    8. Select Save.