Creating a page header

Where to create header/footer files

You create custom headers and footers for Primo by adding a header.html and footer.html file to the assets > header-footer folder.

While our footer.html file has lots of local customizations, we've kept our header simple — just a our library logo linking to our library homepage. The code is highlighted below. Here are a few notes...

Image location

In Primo, some images require specific names and locations because they are built into the Primo NDE templates. The header and footer images, however, are all from our own code so the image name and location can be customized to our needs. For simplicity, I've kept the header image with our other view images in the assets > images folder.

Localize your header code to your view

Finally, the image URL in the code below needs to be localized to your custom view — "custom/YOUR_VIEW/assets/images/library-header-logo.png"

<header>
  <div class="library-logo" style="background-color: #AD0F2A; width:100%; height: auto; margin: 0;">
   <a href="https://www.lib.miamioh.edu"> 
     <img src="custom/01OHIOLINK_MU-MU_NDE26/assets/images/library-header-logo.png" alt="Miami University Libraries" style="max-width: 400px; height: auto; margin: 0px auto; padding: 15px; display: block;"> 
   </a>
    </div>
</header>

Custom CSS

A traditional CSS approach is to have all CSS in a centralized CSS file. In the code above, you'll note that I've added styles local to each element. This allows this file to act as a component with all the needed code localized to this one file. Otherwise, I'd also need to edit the custom.css file to make any changes to the header.

Documentation

• ExLibris Documention on adding custom headers