Custom pages with CSS and JavaScript

Custom HTML pages are able to incorporate custom CSS and can re-use 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 some inline CSS and there are class names in the HTML that 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 create the click action on the button that reveals hidden content. This example is meant only as a proof-of-concept because 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 is a description of your library and includes photographs of the building interior and a map of its location, these image files could be uploaded to a hypothetical “img” subdirectory and linked directly in your HTML file using the img tag.