Skip to main content
OCLC Support

Custom landing page template

  1. Last updated
  2. Save as PDF

 Link:  See a live example.

 View:  View source code in CONTENTdm Cookbook Demo Site.

Custom pages offer flexibility for you to create your own special pages. But often times, you still want your custom pages to resemble the site in certain ways – such as header/footer, fonts, colors, responsive behaviors, etc. You can achieve this by utilizing the same built-in HTML elements in your custom page. The template provided in this recipe simulates the HTML structure (<div>, <h1>, etc) in a default collection landing page, which make sure it will look and behave the same way as the landing page. For example:

<div class="CollectionLayout-container">

<div class="CollectionLanding-maincontainer shared-box">

<div class="CollectionLanding-maincontentLanding shared-contentContainer">

…

If you ever want to follow other elements’ look and behavior from other default pages, you can use the inspect tools provided by browsers to find out the element’s class, and apply the same class in your custom page to unify the behavior.