--- title: Individuelle Gestaltung des Content Hubs mit Custom CSS description: 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 --- [Zu Content springen](https://help.joomag.com/migration/de/knowledge/individuelle-gestaltung-des-content-hubs-mit-custom-css#main-content) - [Deutsch](https://help.joomag.com/migration/de/knowledge/individuelle-gestaltung-des-content-hubs-mit-custom-css) - [English](https://help.joomag.com/migration/knowledge/customizing-content-hub) Deutsch Untermenü für Übersetzungen anzeigen ![joomag logo blue-3.png\]](https://help.joomag.com/hs-fs/hubfs/joomag%20logo%20blue-3.png?height=29&name=joomag%20logo%20blue-3.png) - [Joomag Blog](https://help.joomag.com/blog) Hauptnavigation öffnen Hauptnavigation schließen - [Joomag Blog](https://help.joomag.com/blog) - - [Deutsch](https://help.joomag.com/migration/de/knowledge/individuelle-gestaltung-des-content-hubs-mit-custom-css) - [English](https://help.joomag.com/migration/knowledge/customizing-content-hub) Deutsch Untermenü für Übersetzungen anzeigen - Kontakt Kontakt Hallo. Wie können wir Ihnen helfen? - Es gibt keine Vorschläge, da das Suchfeld leer ist. 1. [Help Center](https://help.joomag.com/migration/de/knowledge?hsLang=de) 2. [Engagement](https://help.joomag.com/migration/de/knowledge/engagement?hsLang=de) - [E-Mail Marketing](https://help.joomag.com/migration/de/knowledge/e-mail-marketing?hsLang=de) - [Publikation](https://help.joomag.com/migration/de/knowledge/publikation?hsLang=de) - [Distribution](https://help.joomag.com/migration/de/knowledge/distribution?hsLang=de#main-content) - [Teilen mit eingeschränktem Zugriff](https://help.joomag.com/migration/de/knowledge/distribution?hsLang=de#teilen-mit-eingeschr%C3%A4nktem-zugriff) - [Sammlung einbetten](https://help.joomag.com/migration/de/knowledge/distribution?hsLang=de#sammlung-einbetten) - [URL-Anpassung](https://help.joomag.com/migration/de/knowledge/distribution?hsLang=de#url-anpassung) - [Sammlungen](https://help.joomag.com/migration/de/knowledge/sammlungen?hsLang=de) - [Viewer-Anpassung](https://help.joomag.com/migration/de/knowledge/viewer-anpassung?hsLang=de) - [Creative Studio](https://help.joomag.com/migration/de/knowledge/creative-studio?hsLang=de#main-content) - [Bilder](https://help.joomag.com/migration/de/knowledge/creative-studio?hsLang=de#bilder) - [Links](https://help.joomag.com/migration/de/knowledge/creative-studio?hsLang=de#links) - [Grundlagen des Crater Editors](https://help.joomag.com/migration/de/knowledge/creative-studio?hsLang=de#grundlagen-des-crater-editors) - [Texte](https://help.joomag.com/migration/de/knowledge/creative-studio?hsLang=de#texte) - [Linien und Formen](https://help.joomag.com/migration/de/knowledge/creative-studio?hsLang=de#linien-und-formen) - [Diashows](https://help.joomag.com/migration/de/knowledge/creative-studio?hsLang=de#diashows) - [Popups](https://help.joomag.com/migration/de/knowledge/creative-studio?hsLang=de#popups) - [Bibliothek](https://help.joomag.com/migration/de/knowledge/creative-studio?hsLang=de#bibliothek) - [Videos](https://help.joomag.com/migration/de/knowledge/creative-studio?hsLang=de#videos) - [Formulare](https://help.joomag.com/migration/de/knowledge/formulare?hsLang=de) - [Erstellen](https://help.joomag.com/migration/de/knowledge/erstellen?hsLang=de) - [Engagement](https://help.joomag.com/migration/de/knowledge/engagement?hsLang=de) - [Verwaltung des Kontos](https://help.joomag.com/migration/de/knowledge/verwaltung-des-kontos?hsLang=de#main-content) - [Abrechnung](https://help.joomag.com/migration/de/knowledge/verwaltung-des-kontos?hsLang=de#abrechnung) - [Kontoeinstellungen](https://help.joomag.com/migration/de/knowledge/verwaltung-des-kontos?hsLang=de#kontoeinstellungen) - [Benutzereinstellungen](https://help.joomag.com/migration/de/knowledge/verwaltung-des-kontos?hsLang=de#benutzereinstellungen) # Individuelle Gestaltung des Content Hubs mit Custom CSS ## 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](https://help.joomag.com/de/knowledge/aktiviere-den-content-hub-f%C3%BCr-deine-publikationen?hsLang=de)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**. ![](https://help.joomag.com/hs-fs/hubfs/Einstellungen%20Content%20Hub-png.png?width=688&height=392&name=Einstellungen%20Content%20Hub-png.png) 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. ![](https://help.joomag.com/hs-fs/hubfs/image-png-2.png?width=1020&height=465&name=image-png-2.png) 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 | | **E-Mail** | .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. ![](https://help.joomag.com/hs-fs/hubfs/image-png-3.png?width=1316&height=877&name=image-png-3.png) **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. ![](https://help.joomag.com/hs-fs/hubfs/image-png-4.png?width=1909&height=868&name=image-png-4.png) - [Joomag Blog](https://help.joomag.com/blog) [![Joomag](https://help.joomag.com/hs-fs/hubfs/Group%2043054-1.png?width=1076&height=320&name=Group%2043054-1.png "Joomag")](http://joomag.com) Copyright © 2026, Joomag, Inc.