Skip to main content

 

OCLC Support

CSS page classes

This is a reference list of the standardized classes that we recommend you use whenever possible.  You can always view the source or inspect specific elements to determine all available class names, but the classes listed on this page will not change as CONTENTdm is updated in the future.  

You can always view the source or inspect specific elements to determine all available class names, but what follows is a summary of the standardized classes that we recommend you use whenever possible.

 Note:  Please see JavaScript and CSS examples for additional customization examples. 

Website-level classes

Website-level classes exist in every page.

Page Class Description
.cdm-header Website header.
.cdm-footer Website footer.
.cdm-main-content The main content of the page.

 

Component-level classes

Component-level classes correspond to portions of pages.

Page Class Description
.cdm-content-header The upper section of the main content of a page (for the home page: above the collection card UI; for the search page: the sort and results count UI).
.cdm-collection-card The collection cards on the home page.
.cdm-item-card The item cards on the search results page.

 

Global page classes

Global page classes exist only in the page specified.

Page Class Description
.cdm-home-page General class for the home page.
.cdm-about-page General class for the about page.
.cdm-login-page General class for the login page.
.cdm-search-page General class for the search page.
.cdm-notfound-page General class for the not found page.
.cdm-advanced-search-page General class for advanced search.
.cdm-custom-page Class for the custom pages.

 

Collection-level page classes

 

Page Class Description
.cdm-collection-page General class for all collection- level pages (collection landing page, collection search, item pages).
.cdm-collection-landing-page General class for the collection landing page.
.cdm-collection-search-page General class for the collection search page.
.cdm-item-page General class for the item page (item pages always have collection-level context).

The cdm-collection-page class exists in all collection-level pages.  This means any page below the URL /digital/collection/ will contain that general class.  Additionally, within the collection page context, there will always be a collection-specific class that includes the collection alias of the collection in question.  By combining the generic collection-level classes with the collection-specific collection-level classes, you can target your CSS styling very precisely.

 

  • Was this article helpful?