Skip to main content
OCLC Support

Custom pages with CSS and JavaScript

  1. Last updated
  2. Save as PDF
Find information about using custom CSS and JavaScript on your CONTENTdm website.

Custom HTML pages can incorporate custom CSS and reuse existing CSS class names to align the look and feel with the rest of your CONTENTdm website. The example page below uses CSS classes to generate a button that is styled like other buttons in CONTENTdm:

https://cdmdemo.contentdm.oclc.org/digital/custom/helloworld-cssjs

In this example, there is inline CSS, and HTML class names correspond to built-in CONTENTdm class names. There are also custom class names specific to this custom HTML page. You can see the source code for this custom page here:

https://cdmdemo.contentdm.oclc.org/customizations/global/pages/helloworld-cssjs.html

  • View page source to see the syntax.

You will also see in the above example the use of inline JavaScript to add a click event to the button that reveals hidden content. This example is intended only as a proof of concept, as adding behavioral JavaScript directly into your HTML is not generally considered good web development practice. However, it will work. The example above has an onclick event that executes a JavaScript function that toggles the CSSdisplayproperty on a content <div>. If you need to use JavaScript in your custom pages, it is better to refer to the JavaScript Customizations documentation and integrate your script code into the CONTENTdm event lifecycle. This approach lets you separate content from behavior and also gives you more control over the timing of execution of the JavaScript in the lifecycle of the page load. There is an event class designed specifically for custom pages, cdm-custom-page.

You can also include static resources in your custom HTML pages, like images or video files. The manage files widget in the Website Configuration Tool lets you upload files that are not .html and create subdirectories. If your custom page describes your library and includes photographs of the building interior and a map of its location, you could upload these image files to a hypothetical “img” subdirectory and link them directly in your HTML file using the img tag.