Für über den Standard hinausgehende Anpassungen stehen folgende CSS Klassen und Java-Script Events zur Verfügung:
...
| Name | Beschreibung | Anmerkung |
|---|---|---|
| Seitentemplates / Rahmentemplates | ||
nav-level-1 | Hauptnavigation / Ebene 1 | |
.article-preview__asset-badge-container::after | Das Piktogram, welches auf Artikel-Teasern mit mehr als einem Bild angezeigt wird. | Verstecken des Piktogramms mit: .article-preview__asset-badge-container::after {display: none !important;} |
| Im Artikel | ||
article-leader | Vorspann des Artikels | |
article-text | Grundtext des Artikels | |
metadata-info | Liste der einzelnen Tags im Artikel | .tag .department .location können als Sub-Selektor für die Kindelemente verwendet werden. |
| Hauptnavigation (Menü-Icon + Logo) | ||
| pscp-icon-image-navigation | ||
| pscp-icon-image-navigation__menu-icon-holder | ||
| pscp-icon-image-navigation__image-holder | ||
| pscp-icon-image-navigation__image | ||
| pscp-icon-image-navigation__right-icon-holder | ||
| pscp-icon-image-navigation__dummy-holder | ||
| pscp-icon-image-navigation__dropdown_anchor | ||
| pscp-icon-image-navigation__level-1 | ||
| pscp-icon-image-navigation__level-2 | ||
| pscp-icon-image-navigation__secondary-navigation | ||
| pscp-icon-image-navigation__text-and-toggle | ||
| pscp-icon-image-navigation__item | ||
pscp-icon-image-navigation__item-text | ||
pscp-icon-image-navigation__toggle | ||
pscp-icon-image-navigation__toggle-icon | ||
PayWall (modal) | ||
pscp-modal-pay-wall | ||
| pscp-modal-pay-wall__title | ||
| pscp-modal-pay-wall__text | ||
PayWall (inline) | ||
pscp-inline-pay-wall | ||
pscp-inline-pay-wall__title | ||
pscp-inline-pay-wall__text | ||
JavaScript Events
| Name | Beispiel | Beschreibung | Anmerkung |
|---|---|---|---|
pscpAssetViewChange | window.addEventListener('pscpAssetViewChange', e => console.log(e.detail)); | Wird aufgerufen, wenn der Benutzer durch eine Galerie oder Lightbox blättert. | In der detail-Property des Events können mithilfe der Eigenschaften assetIdx und assetId die aktuelle Position sowie der Assetname ausgelesen werden. |
...