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 | ||
Artikel Teilen Buttons | ||
pscp-share-buttons | Komponente | |
pscp-share-buttons__button | Button in Komponente | |
pscp-share-buttons__button::after | Tooltip | |
pscp-share-buttons__button:hover::after | Aktivieren des Tooltips | |
pscp-share-buttons__share-facebook | Facebook Button | |
pscp-share-buttons__share-facebook::after | Tooltip Content für Facebook | |
pscp-share-buttons__share-twitter | Twitter Button | |
pscp-share-buttons__share-twitter::after | Tooltip Content für Twitter | |
pscp-share-buttons__share-mail | Mail Button | |
pscp-share-buttons__share-mail::after | Tooltip Content für Mail | |
pscp-share-buttons__share-native | Natives Teilen Button | |
pscp-share-buttons__share-native::after | Tooltip Content für natives Teilen | |
pscp-share-buttons__svg-icon | eingebettes SVG-Icon für die Buttons | Facebook und Twitter |
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. | |||||
| pscpRessourceChange | window.addEventListener('pscpRessourceChange', e => console.log(e.detail)); | Wird beim Initialen Aufruf und nach jedem Resourcenwechsel aufgerufen | detail:
| |||||
...