Use the CSS page classes
Below is a practical example of how to use the standard CSS Page classes. The URL /digital/collection/[collectionId] corresponds to a collection landing page. The markup for this page will have the following classes:
cdm-collection-pagecdm-collection-page-[collectionId]cdm-collection-landing-page
You would use the cdm-collection-page class to define a CSS rule that is intended to apply to this landing page, as well as all other collection-level pages. You would use the cdm-collection-page- [collectionId] class to define CSS rules that should apply only to this specific collection’s pages. You would use the class cdm-collection-landing-page to define CSS rules that should apply to all collection landing pages. If you wanted to define CSS rules that should apply to the collection landing page, but only for a specific collection, then you can use the two class names together in your CSS file, e.g.:
.cdm-collection-landing-page.cdm-collection-page-p10000coll01 iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The above CSS would position and size an <iframe> on the /p10000coll01 collection landing page.
The class names for a collection search page follows a very similar pattern. The
/digital/collection/[collectionId]/search will have the following classes:
cdm-collection-pagecdm-collection-page-[collectionId]cdm-collection-search-page
/digital/collection/[collectionId]/id/[itemId] will have the following classes:
cdm-collection-pagecdm-collection-page-[collectionId]cdm-item-pagecdm-item-page-[itemId]
The multiple levels of class naming give you the flexibility to apply your CSS rules precisely where they are needed. The above class names have been defined to be permanent and unchanging so your customizations will not be affected by future updates to the CONTENTdm website code.
Note: Please see JavaScript and CSS examples for additional customization examples.