NDE UI Customization: A Hands-On First Round

This article walks through a first round of practical NDE UI customization in Primo VE, focusing on small but visible changes that help align the interface with your library’s branding and usability needs. Starting from a duplicated NDE view, it shows how to download and restructure the official customization template, remove .tmpl extensions, and work with the custom.css file. You’ll see how to adjust the header background and text color, fine-tune the navigation and facets area, change the search box and body background colors, update the logo link, and configure the homepage background image. The goal is not to redesign everything at once, but to give you a clear, step-by-step path to making safe, targeted visual changes that you can test, refine, and build on in future rounds of customization.

1. First, click “Duplicate for NDE” in the Views List

From the Primo VE Views List, select your production view and choose “Duplicate for NDE.” This action creates a dedicated NDE version of your interface that is completely separate from your existing production view. Working in a duplicated NDE view allows you to experiment, customize, and preview changes safely without affecting the live interface used by patrons. It also ensures that all NDE-specific features, layouts, and components are available for configuration, giving you a clean environment tailored for the new design framework.

2. Check the default NDE interface

Open the newly duplicated NDE view and take a moment to review its default appearance. Look closely at the header, search bar, navigation menu, facets panel, and homepage layout. Becoming familiar with these elements provides a clear baseline for understanding how the interface is structured before you begin making any customizations.

3. Download the Template

Download the official NDE customization template directly from Primo VE to begin preparing your custom view. This template provides the foundational files, folder structure, and placeholders needed to build a valid customization package. Using the official template ensures that your work follows Ex Libris standards and that all required components are included from the start. It also gives you a clean, reliable baseline to modify, reducing errors and helping your customizations integrate smoothly into the NDE framework.

4. Verify the extracted template structure

After extracting the ZIP file, take a moment to review the contents and confirm that the folder structure appears as expected. This is the default, out-of-the-box structure provided by Primo VE, so it is important to look at it carefully before making any changes.

5. Understand the required folder structure for NDE

NDE requires the following folder layout inside your customization package. In my case, I used 01CALS_CHI01CALS_CHI_NDE_TEST as the root folder name, but you may choose any name that suits your environment. What matters most is maintaining the correct internal folder structure, which differs from the default structure found in the template you downloaded and extracted earlier. Pay close attention to these differences to ensure your customization package is recognized correctly by Primo VE.

6. Read the README file carefully

Inside the extracted template, open the README file. It explains how the customization package works, identifies which files can be modified, clarifies where homepage files should be placed, and outlines the steps required to redeploy your changes. Make sure to read this document carefully before moving forward, as it provides important context for the customization process.

7. Delete the .tmpl extensions

Rename the template files by removing the .tmpl extension. This step is essential because Primo VE does not process files that still carry the .tmpl suffix; they are treated as inactive templates rather than functional components. By renaming them, you activate the files so that Primo VE can recognize and apply your customizations. Skipping this step will result in your changes being completely ignored.

8. Change the header background color

Edit custom.css to update the header background. This file serves as the central location for all style sheet customizations in NDE, allowing you to override default styling provided by Primo VE. Adjusting the header background color is often one of the first visual changes administrators make, as it immediately aligns the interface with institutional branding or desired design themes. By modifying this rule in custom.css, you ensure the new color consistently applies across the entire NDE header area.

9. Change the header font color

Customize the text color in the header by setting it to white. Adjusting the header font color not only improves readability against your chosen background but also helps maintain a cohesive visual identity. This change affects elements such as the logo text, navigation links, and other header labels, ensuring that they remain clear and accessible while aligning with your institution’s branding. Placing this rule in custom.css guarantees that the styling is applied consistently across the entire NDE header.

10. Make the top navigation menu vertically centered

This ensures the menu items are centered vertically within the header, creating a cleaner and more balanced appearance. Proper vertical alignment improves usability by making navigation elements easier to scan and interact with, especially on displays with varying resolutions. It also contributes to a more polished and professional layout, helping your customized NDE interface feel visually aligned and intentionally designed. By applying this adjustment in custom.css, you maintain consistent alignment across all pages that use the NDE header.

11. Change the URL behind the logo

Change the URL behind the logo to direct users to the appropriate landing page, such as your library’s main website or institutional homepage. This small adjustment improves navigation by giving users a familiar and convenient way to return to a central starting point. Updating the link also ensures that the logo behaves consistently with common web design patterns, where clicking the logo serves as a quick route back to the home page. Making this change in your customization files ensures that every user of your NDE interface benefits from this intuitive navigation behavior.

12. Configure the “About the Library” image

Configure the “About the Library” image, which appears in the bottom-right corner near the section that explains the library search functions. This image complements the descriptive text and provides a visual anchor that helps users quickly identify the informational area of the homepage. Replacing the default image with one that represents your institution—such as a photo of your library, a branded illustration, or any relevant graphic—enhances the professional appearance of the page and aligns it more closely with your library’s identity. Be sure to place the updated image in the correct folder and reference it properly in homepage_en.html so that it displays consistently across the NDE interface.

13. Change the search box background color

In custom.css, override the search bar styling—especially the background color—to align the NDE search experience with your chosen design theme. The search bar is one of the most prominent elements on the interface, and adjusting its background color can significantly improve visual harmony with the header and the rest of the page. A well-chosen color not only enhances aesthetics but can also improve usability by increasing contrast and making the search field more noticeable to users. By applying this modification in custom.css, you ensure that the updated styling is consistently applied across all pages where the NDE search bar appears.

14. Change the body background color

In NDE, the confirmed working method for changing the page’s main background color is to override the .mat-app-background class:

.mat-app-background {

    background-color: #f5f5f5 !important;

}

This rule directly targets the Angular Material container responsible for rendering the visible background across the entire interface. Unlike the body element, which is often obscured by multiple nested layout components, .mat-app-background consistently controls the backdrop behind the header, search results, and side navigation panels. Applying your preferred background color here ensures that the overall look and feel of the NDE interface aligns with your institution’s branding while maintaining a clean, cohesive user experience.

15. Placement of homepage_background.svg 

Ex Libris specifies that homepage_background.svg must be placed in the same folder as homepage_en.html. This means your directory structure should include homepage_en.html, homepage.css, and homepage_background.svg together inside the custom/homepage/ folder. When the files are arranged this way, NDE automatically loads the SVG as the homepage background without requiring any additional HTML or CSS references. Ensuring that the background image is stored in the correct location is essential for it to appear properly in the customized interface.

If you’d like to preview the results of these customizations, you can explore our library’s NDE test view at:
https://csu-chico.primo.exlibrisgroup.com/nde/home?vid=01CALS_CHI:01CALS_CHI_NDE_TEST.
I hope this example helps illustrate how the various customization steps come together in a live interface.

Andy Tang