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