CMS-Designvorgaben
Mit zentral gesteuerten Designvorgaben zum einheitlichen Markenauftritt: Die CMS-Designvorgaben bieten Ihnen maximale Kontrolle über das Erscheinungsbild Ihrer Portalseiten. Dank der zentralen Verwaltung gestalten Sie Ihr Design effizient, konsistent und markenkonform über alle Portale hinweg. Die Designvorgaben sind in verschiedene Tabs gegliedert, die jeweils spezifische Gestaltungsbereiche abdecken. Der Zugriff auf die CMS-Designvorgaben ist ausschließlich Nutzern mit Superadministrator-Berechtigung möglich.
Im Folgenden werden alle verfügbaren Tabs und deren Konfigurationsmöglichkeiten detailliert beschrieben:
Allgemeine Funktionen auf allen Tabs
Auf jedem Tab der CMS-Designvorgaben stehen Ihnen zentrale Schaltflächen zur Verfügung, die sich immer am oberen Rand der Seite befinden:
Speichern: Mit der Schaltfläche werden alle Änderungen, die Sie im aktuellen Tab vorgenommen haben, dauerhaft gespeichert und sofort auf allen CMS-Seiten angewendet. Die gespeicherten Einstellungen bleiben erhalten und sind für alle Nutzer des Portals sichtbar.
Vorschau: Die Schaltfläche ermöglicht es Ihnen, Ihre Designänderungen in Echtzeit zu betrachten, ohne sie endgültig zu speichern. So können Sie verschiedene Einstellungen ausprobieren und deren Auswirkungen prüfen, bevor Sie sich für eine finale Konfiguration entscheiden. Die Vorschau zeigt Ihnen, wie Ihre CMS-Seiten mit den aktuellen Einstellungen aussehen werden.
Sichern & Wiederherstellen: Die Schaltfläche bietet Ihnen ein Dropdown-Menü mit drei wichtigen Optionen:
- Einstellungen sichern: Diese Option erstellt eine Sicherungskopie Ihrer aktuellen Designvorgaben. Sie können damit einen bestimmten Konfigurationsstand konservieren, bevor Sie größere Änderungen vornehmen. Dies ist besonders hilfreich, wenn Sie experimentieren möchten, aber jederzeit zu einem funktionierenden Design zurückkehren können wollen.
- Sicherung einspielen: Mit dieser Option können Sie eine zuvor gesicherte Konfiguration wiederherstellen. Wenn Sie mehrere Sicherungen angelegt haben, können Sie zwischen diesen wählen und den gewünschten Stand wieder aktivieren. Dies ist nützlich, wenn Sie nach Änderungen zum vorherigen Design zurückkehren möchten.
- Standard wiederherstellen: Diese Option setzt alle Designvorgaben auf die Standardwerte des Systems zurück. Alle individuellen Anpassungen werden dabei überschrieben. Verwenden Sie diese Funktion, wenn Sie komplett von vorn beginnen oder zu den ursprünglichen Werkseinstellungen zurückkehren möchten.
Der Tab Custom CSS verfügt über eine zusätzliche Schaltfläche, die speziell für die Arbeit mit eigenem CSS-Code konzipiert ist:
CSS validieren: Die Schaltfläche
Tab: Basis-Einstellungen
Die Basis-Einstellungen bilden das Fundament für das Design Ihrer CMS-Seiten. Hier definieren Sie die grundlegenden Farbschemata und Textformatierungen, die auf allen Seiten zur Anwendung kommen.
Seiten-Einstellungen: In diesem Bereich legen Sie die zentralen Farben für Ihre Portal-Seiten fest.
- Akzentfarbe: Diese Farbe definiert die primäre Designfarbe Ihres Portals und wird für wichtige visuelle Elemente verwendet. Der hier eingestellte Farbwert (z.B. #2474A6FF) wird automatisch mit der Portalverwaltung synchronisiert.
- Seitenhintergrund-Farbe: Bestimmt die Hintergrundfarbe aller CMS-Seiten. Üblicherweise wird hier eine helle oder neutrale Farbe gewählt (z.B. #EFFF5F7FF), um eine gute Lesbarkeit zu gewährleisten.
Standard-Text-Einstellungen: Diese Einstellungen definieren das typografische Grundgerüst Ihrer Inhalte:
- Standard-Schriftart: Wählen Sie hier die Schriftart aus, die für regulären Fließtext verwendet werden soll. Die Voreinstellung ist häufig "Roboto", Sie können jedoch auch "Standard verwenden" wählen, um die Systemschriftart zu nutzen.
- Standard-Schriftgröße (px): Legt die Basisschriftgröße für normalen Text fest. Typische Werte liegen zwischen 14 und 16 Pixel.
- Standard-Schriftgewicht: Bestimmt die Stärke der Schrift. Zur Verfügung stehen verschiedene Gewichtungen wie "Normal (400)", "Medium (500)" oder "Bold (700)".
- Standard-Textfarbe: Definiert die Farbe für regulären Text. Für optimale Lesbarkeit wird meist eine dunkle Farbe gewählt (z.B. #003445FF).
Link-Einstellungen: Links sind wichtige Navigationselemente und benötigen besondere Aufmerksamkeit bei der Gestaltung:
- Link-Farbe: Bestimmt die Farbe von Hyperlinks im Normalzustand. Diese sollte sich deutlich vom Fließtext unterscheiden, um die Klickbarkeit zu signalisieren (z.B. #0066CCFF).
- Link-Farbe (Hover): Legt fest, welche Farbe ein Link annimmt, wenn der Maus-Cursor darüber schwebt (z.B. #0052A3FF). Dies gibt dem Nutzer ein visuelles Feedback.
- Links unterstreichen: Mit dieser Checkbox können Sie festlegen, ob Links standardmäßig unterstrichen dargestellt werden sollen.
- Unterstreichung bei Hover: Diese Option bestimmt, ob Links beim Überfahren mit der Maus unterstrichen werden. Die Voreinstellung "Nur bei Mouse-Over unterstreichen" sorgt für eine dezente, aber eindeutige Nutzerführung.
Hinweis: Die hier gewählte Akzentfarbe entspricht der in der Portalverwaltung definierten Akzentfarbe für Ihr Hauptportal. Wenn Sie diese Farbe ändern, ändert sich automatisch auch die Akzentfarbe des Hauptportals, was grundlegenden Einfluss auf das Aussehen Ihres Portals hat.
Tab: Farbpalette
Der Farbpalette-Tab ermöglicht es Ihnen, bis zu zehn eigene Farben zu definieren, die in allen Farbauswahl-Dialogen als Schnellauswahl zur Verfügung stehen. Dies erleichtert die konsistente Verwendung Ihrer Corporate-Design-Farben. Für jede der zehn Farbpositionen können Sie folgende Angaben machen:
- Farbe: Wählen Sie einen Farbwert im Hexadezimalformat (z.B. #003445ff für qualido Dunkelblau, #5ba6d6ff für qualido Hellblau, #2474a94ff für qualido Türkis). Durch Klick auf das Farbfeld öffnet sich ein Farbwähler.
- Bezeichnung: Geben Sie jeder Farbe einen aussagekräftigen Namen, der deren Verwendungszweck beschreibt. Beispiele sind "qualido Dunkelblau", "qualido Hellblau", "qualido Türkis", "qualido Gelb", "Erfolg Grün", "Fehler Rot", "Warning Orange", "Neutral Grau", "Info Cyan" oder "Lila". Diese Bezeichnungen helfen Ihnen und anderen Redakteuren, die richtigen Farben schnell zu finden.
Die definierten Farben stehen dann in allen Farbauswahl-Dialogen zur Schnellauswahl bereit und sorgen für ein einheitliches Erscheinungsbild über alle CMS-Seiten hinweg.
Tab: Überschriften
Überschriften strukturieren Ihre Inhalte und schaffen visuelle Hierarchien. In diesem Tab können Sie das Aussehen von Titeln, Bannern und drei verschiedenen Überschrift-Ebenen (H1, H2, H3) individuell anpassen.
Überschrift / Banner: Diese Einstellungen gelten für den Seitentitel und Banner-Überschriften.
Titel
- Schriftart: Wählen Sie die Schriftart für Haupttitel. Sie können "Roboto" oder "Standard verwenden" wählen.
- Schriftgröße (px): Definiert die Größe des Titels (z.B. 24 Pixel).
- Schriftgewicht: Bestimmt die Stärke der Titelschrift, typischerweise "Bold (700)" für starke Betonung.
- Textfarbe: Legt die Farbe des Titels fest (z.B. #ffffff für weiß).
Untertitel
- Schriftart: Schriftart für Untertitel unter dem Haupttitel.
- Schriftgröße (px): Größe des Untertitels, üblicherweise kleiner als der Haupttitel (z.B. 16 Pixel).
- Schriftgewicht: Gewicht des Untertitels, oft "Normal (400)" oder "Medium (500)".
- Textfarbe: Farbe des Untertitels (z.B. #ffffff).
Überschrift H1: Die H1-Überschrift ist die wichtigste Überschrift auf einer Seite.
- Schriftart: Wählen Sie "Standard verwenden" oder eine spezifische Schriftart.
- Schriftgröße (px): Typischerweise die größte Überschrift im Dokument (z.B. 32 Pixel).
- Schriftgewicht: Meist "Bold (700)" für maximale Aufmerksamkeit.
- Textfarbe: Farbe der H1-Überschrift (z.B. #003445ff).
- Zeilenhöhe: Bestimmt den Zeilenabstand bei mehrzeiligen Überschriften (z.B. 1,4).
- Abstand oben (px): Abstand vor der Überschrift (z.B. 20 Pixel).
- Abstand unten (px): Abstand nach der Überschrift (z.B. 10 Pixel).
Überschriften von H2 bis H4 : Die Konfigurationsfelder entsprechen grundsätzlich denen der H1-Überschrift, jedoch mit angepassten – meist kleineren – Werten.
Tab: Artikel-Box
Die Artikel-Box ist ein wichtiges Gestaltungselement für die Darstellung von Inhalten in Box-Form. Hier können Sie das Erscheinungsbild von Titel, Untertitel, Buttons und Standardfarben definieren.
Titel-Styling
- Schriftart: Legt die Schriftart für Artikel-Box-Titel fest (z.B. "Standard verwenden").
- Schriftgröße (px): Größe des Titels innerhalb der Box (z.B. 18 Pixel).
- Schriftgewicht: Gewicht der Titelschrift (z.B. "Normal (400)").
- Textfarbe: Farbe des Titels (z.B. #004b67ff).
Untertitel-Styling
- Schriftart: Schriftart für den Untertitel in der Artikel-Box.
- Schriftgröße (px): Typischerweise kleiner als der Titel (z.B. 14 Pixel).
- Schriftgewicht: Oft "Normal (400)".
- Textfarbe: Farbe des Untertitels (z.B. #004b67ff).
Button-Styling
- Schriftart: Schriftart für Buttons in der Artikel-Box.
- Schriftgröße (px): Größe der Button-Beschriftung (z.B. 14 Pixel).
- Schriftgewicht: Gewicht der Button-Schrift (z.B. "Normal (400)").
- Textfarbe: Farbe des Button-Textes (z.B. #ffffffff).
Standard-Farben
- Standard Button-Farbe: Hintergrundfarbe für Buttons in der Artikel-Box (z.B. #247a94ff).
- Standard Akzent-Farbe: Akzentfarbe für besondere Hervorhebungen (z.B. #5095a9ff).
Tab: Icon-Box
Die Icon-Box ermöglicht die Darstellung von Inhalten mit begleitenden Icons. Die Konfiguration ist ähnlich aufgebaut wie die Artikel-Box.
Titel-Styling
- Schriftart: Schriftart für Icon-Box-Titel (z.B. "Standard verwenden").
- Schriftgröße (px): Größe des Titels (z.B. 16 Pixel).
- Schriftgewicht: Gewicht der Schrift (z.B. "Normal (400)").
- Textfarbe/Iconfarbe: Definiert sowohl die Textfarbe als auch die Iconfarbe (z.B. #ffffffff).
Untertitel-Styling
- Schriftart: Schriftart für den Untertitel.
- Schriftgröße (px): Typischerweise 14 Pixel.
- Schriftgewicht: Meist "Normal (400)".
- Textfarbe: Farbe des Untertitels (z.B. #ffffffff).
Standard-Farben: Standard-Farbe für Icons in der Icon-Box (z.B. #247a94ff).
Tab: Akkordeon-Box
Die Akkordeon-Box ermöglicht ausklappbare Inhaltsbereiche. Hier definieren Sie das Styling für Titel und Untertitel.
Titel-Styling
- Schriftart: Schriftart für Akkordeon-Titel (z.B. "Standard verwenden").
- Schriftgröße (px): Größe der Akkordeon-Überschrift (z.B. 16 Pixel).
- Schriftgewicht: Gewicht der Schrift (z.B. "Normal (400)").
- Textfarbe: Farbe des Titels (z.B. #ffffffff).
Untertitel-Styling
- Schriftart: Schriftart für den Untertitel im ausgeklappten Bereich.
- Schriftgröße (px): Typischerweise 14 Pixel.
- Schriftgewicht: Meist "Normal (400)".
- Textfarbe: Farbe des Untertitels (z.B. #ffffffff).
Tab: Buttons
In diesem Tab definieren Sie das Aussehen von Buttons, die auf CMS-Seiten verwendet werden.
Button-Styling
- Schriftart: Schriftart für Button-Beschriftungen (z. B. "Standard verwenden").
- Schriftgröße (px): Größe der Button-Schrift (z.B. 14 Pixel).
- Schriftgewicht: Gewicht der Schrift (z.B. "Normal (400)").
- Textfarbe: Farbe des Button-Textes (z.B. #ffffffff).
Standard Button-Farbe: Hintergrundfarbe für Standard-Buttons (z.B. #247a94ff).
Tab: Icons/Fonts
Dieser Tab ermöglicht das Hochladen eigener Icons und Webfonts für die Verwendung in CMS-Seiten.
Benutzerdefinierte Icons: Hier können Sie eigene Icons hochladen, um diese in CMS-Seiten zu verwenden. Zugelassen sind SVG- oder PNG-Dateien, vorzugsweise mit transparentem Hintergrund.
- Icons hochladen: Über das Upload-Feld können Sie eine oder mehrere Icon-Dateien gleichzeitig auswählen und hochladen. Die hochgeladenen Icons werden in einer Tabelle angezeigt mit folgenden Spalten:
- Vorschau: Zeigt eine kleine Vorschau des Icons
- Label: Name oder Bezeichnung des Icons
- CSS-Klasse: Die CSS-Klasse, unter der das Icon angesprochen werden kann
- Typ: Dateityp (SVG oder PNG)
- Größe: Dateigröße
- Hochgeladen: Datum des Uploads
Benutzerdefinierte Fonts: Hier können Sie eigene Webfonts hochladen, um diese in CMS-Seiten zu verwenden. Zugelassen sind WOFF, WOFF2, TTF und OTF.
- Font hochladen: Über das Upload-Feld können Sie Font-Dateien hochladen. Die hochgeladenen Fonts werden in einer Tabelle angezeigt mit folgenden Spalten:
- Vorschau: Zeigt eine Vorschau des Fonts
- Name: Name der Schriftart
- Font-Family: Die CSS Font-Family-Bezeichnung
- Weight: Schriftstärke
- Style: Schriftstil (normal, italic)
- Typ: Dateityp
- Hochgeladen: Upload-Datum
Tab: Shortcodes
Shortcodes sind vordefinierte Inhaltselemente, die Sie in CMS-Seiten einfügen können. In diesem Tab passen Sie das Aussehen der wichtigsten Shortcodes an.
Dokumentenliste: Die Dokumentenliste zeigt eine Auflistung von Dokumenten:
- Titel-Farbe: Farbe der Dokumenttitel (z.B. #333333ff).
- Titel-Schriftgröße: Größe der Dokumenttitel (z.B. 16 Pixel).
- Titel-Schriftgewicht: Gewicht der Titelschrift (z.B. "500 (Medium)").
- Link-Farbe: Farbe der Dokumentlinks (z.B. #003445ff).
- Link-Hover-Farbe: Farbe beim Überfahren mit der Maus (z.B. #247a94ff).
Terminliste: Die Terminliste zeigt Termine und Events:
- Datum-Box Hintergrundfarbe: Hintergrundfarbe der Datumsanzeige (z.B. #247a94ff).
- Datum-Box Textfarbe: Textfarbe in der Datumsbox (z.B. #ffffffff).
- Tag-Schriftgröße: Größe der Tagesanzeige (z.B. 26 Pixel).
- Monat-Schriftgröße: Größe der Monatsanzeige (z.B. 14 Pixel).
- Event-Titel Farbe: Farbe der Event-Überschrift (z.B. #333333ff).
- Event-Titel Schriftgröße: Größe der Event-Überschrift (z.B. 15 Pixel).
Person: Der Person-Shortcode zeigt Informationen über Personen an:
- Name Schriftgröße: Größe des Namens (z.B. 19 Pixel).
- Name Schriftgewicht: Gewicht der Namensschrift (z.B. "Bold").
- Name Farbe: Farbe des Namens (z.B. #333333ff).
- Position Schriftgröße: Größe der Positionsangabe (z.B. 18 Pixel).
- Position Farbe: Farbe der Positionsangabe (z.B. #333333ff).
- Rahmenfarbe: Farbe des Rahmens um das Personenelement (z.B. #c0c0c0ff).
Offene Aufgaben: Zeigt eine Liste offener Aufgaben an:
- Überschrift Farbe: Farbe der Überschrift (z.B. #333333ff).
- Überschrift Schriftgröße: Größe der Überschrift (z.B. 16 Pixel).
- Überschrift Schriftgewicht: Gewicht der Überschrift (z.B. "500 (Medium)").
- Zahl-Label Farbe: Farbe für Zahlenangaben (z.B. #dc3545ff).
- Textfarbe: Farbe des Fließtextes (z.B. #333333ff).
Tab: Custom CSS
Der Custom CSS-Tab ermöglicht fortgeschrittenen Anwendern, benutzerdefiniertes CSS für CMS-Seiten hinzuzufügen.
- Info: Das hier eingegebene CSS wird auf allen CMS-Seiten nach den Standard-Styles geladen und ermöglicht somit individuelle Anpassungen, die über die vordefinierten Designvorgaben hinausgehen.
- CSS-Editor: Ein Code-Editor mit Zeilennummern und Syntax-Highlighting steht zur Verfügung. Hier können Sie eigene CSS-Regeln definieren, um spezifische Gestaltungswünsche umzusetzen.
- CSS validieren: Mit dieser Schaltfläche können Sie Ihren CSS-Code auf Syntaxfehler überprüfen lassen, bevor Sie ihn speichern.
- Vorschau: Zeigt eine Vorschau, wie sich die CSS-Änderungen auf Ihre Seiten auswirken.
- Sichern & Wiederherstellen: Über diese Funktion können Sie Ihre aktuellen Einstellungen sichern und bei Bedarf wiederherstellen.
Allgemeiner Hinweis zur Barrierefreiheit: Bei der Auswahl von Text- und Hintergrundfarben sollten Sie die Anforderungen der Barrierefreiheit berücksichtigen. Gemäß den WCAG-Richtlinien (Web Content Accessibility Guidelines) ist ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für große Texte (ab 18 pt oder 14 pt fett) erforderlich. Dies gewährleistet eine gute Lesbarkeit für alle Nutzer, insbesondere für Menschen mit Sehbeeinträchtigungen oder Farbsehschwächen. Nutzen Sie Online-Tools zur Kontrastprüfung, um sicherzustellen, dass Ihre Farbkombinationen barrierefrei sind.
Verwandte Themen