Personalisiere das Aussehen und Gefühl Deines Content Hubs mithilfe von Custom CSS. Dieser Artikel bietet schrittweise Anweisungen zur Modifikation von Stilen, Änderung des Layouts und Implementierung eines einzigartigen Markenästhetiks, die mit den
Hinweis: Diese Funktion ist nur mit den brandneuen Enterprise-Plänen als Zusatzfunktion verfügbar. Wenn Dein aktueller Plan diese Funktion nicht unterstützt, kontaktiere gerne deinen Account Manager zur Unterstützung bei der Kontenmigration.
Wichtig: Um die verfügbaren Anpassungen zu testen, stelle sicher, dass Du bereits einen Content Hub aktiviert hast.
Um Custom CSS auf Deinen Content Hub anzuwenden, folge diesen Schritten:
1. Gehe zu Einstellungen ⚙. Klicke in der linken Seitenleiste auf Kontoeinstellungen und scrolle zum Abschnitt Content Hub.
2. Scrolle nach unten zum Abschnitt Advanced styling with custom CSS. Hier kannst Du Deinen Custom CSS-Code einfügen, um die Elemente anzusprechen und zu gestalten.
Hier ist die Liste der anpassbaren Komponenten:
| Felder | Selektoren |
|---|---|
| Elterndiv des Formulars (oberste ID-Selektor) | .j-custom-page |
| Kopfzeilenblock | .j-custom-navbar |
| Logoblock | .j-custom-logo-block |
| Logobild | .j-custom-logo-img |
| Titelblock | .j-custom-navbar-title |
| Titel-Element | .j-custom-navbar-title span |
| Suchwrapper | .j-custom-search-input-wrapper |
| Sucheingabe | .j-custom-search-input-wrapper input |
| Anmeldeknopf | .j-custom-login-btn |
| Profilblock | .j-profile-block |
| .j-custom-email | |
| Profilicon | .j-custom-profile-icon |
| Containerblock für Sammlungen (Ordner) | .j-custom-collections-container |
| Element einer Sammlung (Ordner) | .j-custom-collection |
| Thumbnail einer Sammlung (Ordner) | .j-custom-thumbnail |
| Ordnericon | .j-custom-folder-icon |
| Titel einer Sammlung (Ordner) | .j-custom-title |
| Anzahl in einer Sammlung (Ordner) | .j-custom-count |
| Containerblock für Publikationen | .j-custom-publications |
| Publikationselement | .j-custom-publication |
| Datum der Publikation | .j-custom-date |
| Block für Sortierung | .j-custom-order-by |
| Text für Sortierung | .j-custom-order-by-text |
| Titel der Sammlung im Block Publikationen | .j-custom-collection-title |
| Zurück zur Sammlung | .j-custom-back-to-collection |
| Popup für Publikationsdetails | .j-custom-publication-details-popup |
| Cover im Popup | .j-custom-publication-cover |
| Titel im Popup | .j-custom-publication-title |
| Untertitel im Popup | .j-custom-publication-subtitle |
| Beschreibung im Popup | .j-custom-publication-description |
| Lesebutton im Popup | .j-custom-read-button |
3. Führe die notwendigen Stilaktualisierungen durch und klicke auf Änderungen speichern, um die Ergebnisse anzuwenden.
Beispiel: Anpassen der Kopfzeilenfarbe des Content Hubs, der Hintergrundfarbe der Seite und der Farbe des Sucheingabefelds
1. Definieren wir zuerst die Hintergrundfarbe unserer Content Hub-Hauptseite:
body {
background-color: #f2f2f2;
}
2. Dann können wir die Hintergrundfarbe des Kopfzeilenbereichs bestimmen und das Eingabefeld anpassen:
.j-custom-page .j-custom-navbar {
background-color: #FFFFFF;
}
.j-custom-page .j-custom-search-input-wrapper input {
background-color: #f2f2f2 !important;
color: #000000 !important;
}
3. Klicke auf Änderungen speichern und besuche die URL des Content Hubs, um die Änderungen zu sehen.
