Skip to main content
Ex Libris Knowledge Center

The UI Customization Package Manager

The UI Customization Package Manager (Primo Home > Primo Utilities > UI Customization Package Manager) allows you to create and mange the customization packages that include the CSS, HTML, JavaScript, and image files, which allow you to change the look of the Front End user interface. If no packages are loaded, the system will use only the out-of-the-box configurations. For additional information, see New UI Customization.
Database files (.db) are not permitted in your customization package. If the following error occurs while uploading your ZIP file, remove all .db files:
Validation error: File type db is not allowed in the zip file
You may have to change an option in Windows to display hidden files if you cannot see any .db files in your customization package folder.
Currently, only the following configurations are supported: CSS (custom1.css), image files, and the HTML file for the home page (home_en_US.html).
UI_Cust_Package_Mngr.png
UI Customization Package Manager Page
This utility allows you to load the following types of packages:
  • Central – This package allows a consortium to define a single customization package that can be used directly or as a template by each member institution. Configurations in this package override settings defined in the out-of-the-box configurations. When used as a template, member institutions can create a view-level customization package to override settings in the Central package.
    To create and modify the Central package itself, users must have Super Admin permissions.
  • View-level – This type of package allows you override the out-of-the-box settings and the Central package (if defined for your consortium).
In addition, you can upload a customized logo and make it clickable. For more information, see Uploading a Clickable Logo.

Creating a View-Level Package

Loading a view-level package allows you to override configurations defined in the Central package and the out-of-the-box configurations. If no package is loaded, the system will use the out-of-the-box configurations.
To create a view-level package:
  1. From the Owner drop-down list, select your institution.
  2. From the View drop-down list, select your view.
  3. Under the Download a Package section, click Download to select one of the following templates:
    • Template package – This template defines a package's folder structure and includes the files (such as custom1.css and home_en_US.html) needed to create a package.
    • Central package – For member institutions in a consortium, download the Central package if you want to override settings from it and the out-of-the-box configuration.
  4. Create the new package from the template:
    1. Uncompress the template.
    2. Change the name of the VIEW_CODE folder to your view's code.
      Package_Root.png
      Change Folder's Name
    3. Use the browser's inspect functionality to determine which CSS elements to modify in the new Front End UI.
    4. Update the relevant files that are stored under the directories shown in the following figure. Remember to add any new or updated images to the img folder.
      Package_Folders.png
      Package Folder Structure
      In order for the system to recognize your customizations, you must retain the package structure (including folder and file names). In addition, it is necessary to retain the file names for images and other files that you modify and include in your customization package.
    5. Compress the view's package. In this example, you would compress the My_View folder.

  5. Upload the new package (for example, My_View.zip):
    1. Under the Upload Package section, click Choose File.
    2. Specify the name of the compressed package.
    3. Click Upload.
  6. Deploy your view.

Modifying a View-Level Package

After you have loaded a package, you can download it to make further changes.
To modify a view-level package:
  1. From the Owner drop-down list, select your institution.
  2. From the View drop-down list, select your view.
  3. Under the Download a Package section, click Download to download view-level package (which is identified by the view's code).
    Download_ViewLevel_Package.png
    Download View-Level Package
  4. Uncompress, modify, and then compress the modified package.
  5. Upload the updated package:
    1. Under the Upload Package section, click Choose File.
    2. Specify the name of the compressed package.
    3. Click Upload.
  6. Deploy your view.

Creating the Central Package

The Central package defines the base formatting for all member institutions in a consortium.
To create the Central package:
  1. From the Owner drop-down list, select All Institutions.
  2. From the View drop-down list, select CENTRAL_PACKAGE.
  3. Under the Download a Package section, click Download to download the Template package.
  4. Create the new package from the template:
    1. Uncompress the template.
    2. Change the name of the VIEW_CODE folder to CENTRAL_PACKAGE.
      Package_Root.png
      Template's Root Folder
    3. Use the browser's inspect functionality to determine which CSS elements to modify in the new Front End UI.
    4. Update the relevant files that are stored under the directories shown in the following figure. Remember to add any new or updated images to the img folder.
      CentralPackageFoldersStructure.png
      Central Package Folder Structure
    5. Compress the view's package. In this example, you would compress the CENTRAL_PACKAGE folder.
  5. Upload the new package:
    1. Under the Upload Package section, click Choose File.
    2. Specify the name of the compressed package.
    3. Click Upload.
  6. Deploy your view.

Modifying the Central Package

After you have loaded the Central package, you can download it to make further changes.
To modify the Central package:
  1. From the Owner drop-down list, select All Institutions.
  2. From the View drop-down list, select CENTRAL_PACKAGE.
  3. Under the Download a Package section, click Download to download the Central package.
    Download_Central_Package.png
    Download Central Package
  4. Uncompress, modify, and then compress the modified package.
  5. Upload the updated package:
    1. Under the Upload Package section, click Choose File.
    2. Specify the name of the compressed package.
    3. Click Upload.
  6. Deploy your view.

Uploading a Clickable Logo

The UI Customization Package Manager allows you to upload a clickable logo, which redirects users to a specified URL when it is clicked in the new Primo UI. When using this method, no other configuration is needed to make your logo clickable.
UI_Cust_Package_Mngr_ClickableLogo.png
Updated UI Customization Package Manager
To upload a clickable logo:
  1. Open the UI Customization Package Manager (Primo Home > Utilities > UI Customization Package Manager).
  2. In the Upload Logo section, click Browse to locate and select the image that you want to use for your institution's logo.
  3. Click Upload to upload your selection the to Front End server. If you want to remove the logo, click Delete.
  4. If you want to redirect users to a page other than the Primo Home page, specify a URL in the Logo Clickable URL field.
  5. Click Save to save your changes.
  6. Deploy the changes to the Front End.  
  • Was this article helpful?