--- title: "Designvorlagen (Themes)" url: "https://help.cbook.de/de/article/designvorlagen-themes" language: "de" last_updated: "2026-04-08T09:29:33.326Z" --- # Designvorlagen (Themes) ### Was sind Designvorlagen? Designvorlagen — auch Themes genannt — bestimmen das visuelle Erscheinungsbild deiner cBooks. Sie legen Schriftarten, Schriftgrößen, Akzentfarben und das allgemeine Layout fest. Jedes cBook verwendet eine Designvorlage, und du kannst das Aussehen mit Varianten weiter anpassen. * * * ### Wo findest du die Designvorlagenverwaltung? Um die Allgemeinen Einstellungen zu öffnen, klicke auf das **Einstellungen-Symbol** auf der rechten Seite der oberen Menüleiste. Wähle dann im linken Seitenmenü den Punkt **Designvorlagen** (mit einem Paletten-Symbol gekennzeichnet). Hier findest du alle Designvorlagen, die deiner Organisation zur Verfügung stehen. * * * ### Verfügbare Designvorlagen durchsuchen Die Designvorlagen-Seite zeigt alle verfügbaren Vorlagen als Karten an. Jede Karte enthält folgende Informationen: - **Name der Designvorlage** - **Autor** — wer diese Version der Vorlage erstellt hat - **Aktive Version** — die derzeit verwendete Versionsnummer - **Verwendungsanzahl** — wie viele cBooks diese Vorlage aktuell nutzen (z. B. „Aktuell in 12 cBooks verwendet") - **Fähigkeiten-Icons** — kleine Symbole, die anzeigen, welche Funktionen die Vorlage unterstützt (siehe unten) Du kannst die Option **Veraltete Designvorlagen anzeigen** ein- oder ausschalten. Veraltete Vorlagen werden für neue cBooks nicht mehr empfohlen, funktionieren aber weiterhin bei bestehenden cBooks. * * * ### Fähigkeiten einer Designvorlage Auf jeder Karte werden Icons angezeigt, die zeigen, welche Funktionen die Vorlage unterstützt. Fahre mit der Maus über ein Icon, um die Beschreibung zu sehen: - **Responsive** — die Vorlage passt sich an verschiedene Bildschirmgrößen an - **Quick Favourites** — unterstützt die Quick-Favourites-Funktion - **Accessibility** — wurde unter Berücksichtigung von Barrierefreiheitsstandards gestaltet - **WYSIWYG Editing** — unterstützt die visuelle Bearbeitung direkt im Editor * * * ### Eine Designvorlage anpassen (CSS-Editor) Wenn du dich mit CSS auskennst, kannst du eine Designvorlage mit eigenen Styles erweitern. Klicke auf die Schaltfläche **Anpassen** auf einer Vorlagenkarte, um den Editor zu öffnen. Der Editor hat drei Tabs: 1. **CSS** — Schreibe eigenes CSS, um die Standard-Styles der Vorlage zu überschreiben oder zu erweitern. Alle Assets, die aus dem Master Asset Management verlinkt sind, werden beim SCORM-Export automatisch mitverpackt. 2. **Style Formats** — Passe die TinyMCE-Style-Formate an (in JSON). Diese definieren die Formatierungsoptionen, die Autor:innen im Rich-Text-Editor zur Verfügung stehen. 3. **Overwriting Formats** — Passe die TinyMCE-Content-Formate an (in JSON). Diese überschreiben die Standard-Content-Formate. **Hilfreiche Funktionen im Editor:** - **Code-Validierung** — der Editor prüft deinen Code in Echtzeit. Du siehst eine grüne Meldung „Your code is looking good!" oder eine rote Warnung, wenn etwas nicht stimmt. - **Dark-Mode-Schalter** — wechselt den Code-Editor auf ein dunkles Theme, was für Nutzer:innen angenehmer sein kann, die eine dunkle Bearbeitungsumgebung bevorzugen. - **Asset Manager** — füge Verweise auf hochgeladene Assets direkt im CSS-Tab ein. - **Font Face generieren** — fügt ein `@font-face`\-Template ein, um eigene Schriftarten zu verwenden (im CSS-Tab verfügbar). - **Mehrbenutzer-Warnung** — wenn eine andere Person gleichzeitig an derselben Vorlage arbeitet, wird eine Warnung angezeigt. - **Warnung bei ungespeicherten Änderungen** — wenn du den Editor mit ungespeicherten Änderungen schließen möchtest, wirst du zur Bestätigung aufgefordert. Klicke auf **Änderungen speichern**, um deine Bearbeitungen zu übernehmen, oder auf **Änderungen verwerfen**, um sie rückgängig zu machen. * * * ### Varianten von Designvorlagen Mit Varianten kannst du alternative CSS-Versionen einer Designvorlage erstellen, ohne die Vorlage selbst zu verändern. Das ist nützlich, wenn du für eine bestimmte Gruppe von cBooks ein leicht anderes Aussehen möchtest. Klicke auf die Schaltfläche **Varianten von Designvorlagen** auf einer Vorlagenkarte, um den Variantendialog zu öffnen. **Eine Variante erstellen:** 1. Klicke im linken Bereich auf **Variante hinzufügen** 2. Gib einen Namen für die Variante ein 3. Bestätige mit dem Häkchen-Symbol **Eine Variante bearbeiten:** Wähle eine Variante aus der Liste auf der linken Seite. Der Editor auf der rechten Seite zeigt zwei CSS-Tabs: - **Client** — Dieses CSS ersetzt die eigenen Anpassungen der ursprünglichen Designvorlage und ermöglicht ein komplett anderes Styling für eine bestimmte Gruppe von cBooks. - **Last CSS** — Dieses CSS erweitert die eigenen Anpassungen der ursprünglichen Designvorlage. Es ist die letzte CSS-Datei, die vom cBook geladen wird — Styles hier haben die höchste Priorität und überschreiben alle vorherigen Stylings. Du kannst den **Dark-Mode-Schalter** verwenden, um den Code-Editor auf ein dunkles Theme umzustellen und so komfortabler zu arbeiten. Klicke auf **Änderungen speichern**, wenn du fertig bist. Wenn du zwischen Varianten wechselst oder den Dialog mit ungespeicherten Änderungen schließen möchtest, wirst du gefragt, ob du bleiben oder die Seite verlassen willst. * * * ### Eine Designvorlage einem cBook zuweisen Sobald Designvorlagen in den Allgemeinen Einstellungen eingerichtet sind, können Autor:innen sie in den Einstellungen jedes cBooks anwenden. 1. Öffne ein cBook und gehe zu **Einstellungen > Design** 2. Wähle im Abschnitt **Designvorlage** eine Vorlage aus dem Dropdown **Aktuelle Designvorlage** 3. Optional kannst du eine **Variante** aus dem zweiten Dropdown auswählen (nur verfügbar, wenn Varianten für die gewählte Vorlage existieren) 4. Klicke auf **Speichern** Wenn du die Designvorlage wechselst, wird eine zuvor ausgewählte Variante automatisch zurückgesetzt, da Varianten jeweils an eine bestimmte Vorlage gebunden sind. * * * ### Weitere Design-Optionen (pro cBook) Die Design-Einstellungen jedes cBooks bieten zusätzlich folgende Optionen: - **Logo** — Lade ein Logo hoch, das im Kopfbereich jeder Slide angezeigt wird. Du kannst auch eine **Zielslide bei Klick auf Logo** festlegen, um zu bestimmen, zu welcher Slide Nutzer:innen navigieren, wenn sie auf das Logo klicken. - **Rahmen** — Setze ein Hintergrundbild, das die einzelnen Slides innerhalb des cBooks umrahmt. - **Cover** — Lade ein Coverbild hoch, das im Dashboard angezeigt wird (empfohlene Größe: 210px x 140px, Verhältnis 2:3). - **Icon-Set** — Lade ein eigenes Icon-Set hoch, um die Standard-Icons zu ersetzen. Für jede dieser Optionen kannst du ein Bild aus dem Asset Manager hinzufügen oder ein bestehendes entfernen. * * * ### Übersichtstabelle | Aktion | Wo | Wer kann es tun | | --- | --- | --- | | Verfügbare Designvorlagen durchsuchen | Allgemeine Einstellungen > Designvorlagen | Admins | | Designvorlage anpassen (CSS-Editor) | Allgemeine Einstellungen > Designvorlagen > Anpassen | Admins | | Varianten erstellen und bearbeiten | Allgemeine Einstellungen > Designvorlagen > Varianten | Admins | | Designvorlage für ein cBook auswählen | cBook-Einstellungen > Design | Autor:innen mit Einstellungsberechtigung | | Logo, Rahmen, Cover, Icon-Set festlegen | cBook-Einstellungen > Design | Autor:innen mit Einstellungsberechtigung |