Branding
Mit den Branding-Einstellungen können Sie das Erscheinungsbild Ihrer Organisation individuell gestalten. Passen Sie Farben, Logos und Design an Ihr Corporate Design an.
Achtung: Die Branding-Einstellungen sind nur für Ihre gebrandete Subdomain sichtbar (z.B. <ihr-kürzel>.coursespace.de).
Navigation zum Branding
Navigieren Sie zu Organisation in der Seitenleiste
Klicken Sie auf Branding
Sie gelangen zur Branding-Übersicht mit allen Anpassungsmöglichkeiten.
Übersicht
Die Branding-Seite ist in mehrere Bereiche unterteilt:
Basis Farben
Markenfarbe, Hintergrund und Vordergrund
Komponenten
Primär-, Sekundär-, Akzent- und Warnfarben
Seitenleiste
Farben speziell für die Navigation
Weitere Farben
Zusätzliche UI-Farben (Karten, Popups, etc.)
Diagramme
Farbpalette für Diagramme und Grafiken
Logo
Logos für helles und dunkles Theme
Theme-Umschaltung
Die Branding-Einstellungen unterstützen sowohl ein helles als auch ein dunkles Theme. Oben rechts finden Sie den Theme-Umschalter:
Dunkel: Wechselt zur Bearbeitung des dunklen Themes
Hell: Wechselt zur Bearbeitung des hellen Themes
Tipp: Sie können für jedes Theme eigene Farben und Logos definieren. Bearbeiten Sie zunächst das helle Theme und wechseln Sie dann zum dunklen Theme, um dort Anpassungen vorzunehmen.
Basis Farben
Die Basis Farben sind das Fundament Ihres Designs:
Markenfarbe
Die Hauptfarbe Ihrer Marke, verwendet in verschiedenen Elementen
Hintergrundfarbe
Die Haupthintergrundfarbe der Anwendung
Vordergrundfarbe
Die primäre Textfarbe
Farbe ändern
Wählen Sie den Tab Basis Farben
Klicken Sie auf das farbige Quadrat neben der gewünschten Farbe
Wählen Sie die neue Farbe im Farbwähler aus
Alternativ: Geben Sie den HEX-Wert direkt ein (z.B.
#ff5024)
Die Änderung wird sofort in der Benutzeroberfläche angezeigt, aber erst beim Speichern übernommen.
Komponenten-Farben
Unter dem Tab Komponenten finden Sie Farben für interaktive Elemente:
Primärfarbe
Hauptfarbe für Buttons und Aktionen
Sekundärfarbe
Farbe für weniger wichtige Elemente
Akzentfarbe
Hervorhebungen und besondere Elemente
Gedämpfte Farbe
Zurückhaltende oder deaktivierte Elemente
Warnfarbe
Warnungen und Löschaktionen
Seitenleisten-Farben
Der Tab Seitenleiste enthält Farben speziell für die Navigation:
Seitenleiste Hintergrund
Hintergrundfarbe der Navigation
Seitenleiste Text
Textfarbe in der Navigation
Seitenleiste Akzent
Hervorhebungsfarbe in der Navigation
Seitenleiste Primär
Primärfarbe für Elemente in der Seitenleiste
Seitenleiste Rahmen
Rahmenfarbe in der Seitenleiste
Logo-Einstellungen
Im Tab Logo können Sie verschiedene Logo-Varianten für Ihre Organisation hochladen.
Verfügbare Logo-Typen
Je nach aktivem Theme werden unterschiedliche Logos angezeigt:
Logo Breit
Breites Logo für die Navigation
256 x 80 Pixel
Logo Quadratisch
Quadratisches Logo für kleine Anzeigen
128 x 128 Pixel
Login Bild
Bild auf der Login-Seite
256 x 128 Pixel
Hinweis: Die Logo-Ansicht passt sich automatisch dem aktuellen Theme an. Wechseln Sie zwischen Hell und Dunkel, um die Logos für das jeweilige Theme zu bearbeiten.
Logo hochladen
Wechseln Sie zum Tab Logo
Klicken Sie auf das Bild oder den Upload-Bereich
Wählen Sie eine Bilddatei aus (PNG empfohlen für Transparenz)
Das Logo wird sofort angezeigt
Klicken Sie auf Speichern, um die Änderung zu übernehmen
Empfehlungen für Logos
Transparenter Hintergrund: Verwenden Sie PNG-Dateien mit transparentem Hintergrund
Kontrastreich: Stellen Sie sicher, dass das Logo auf dem entsprechenden Theme-Hintergrund gut lesbar ist
Hohe Auflösung: Laden Sie Logos in doppelter Größe für Retina-Displays hoch
Wichtig: Laden Sie für helle und dunkle Themes jeweils angepasste Logo-Versionen hoch, damit die Lesbarkeit gewährleistet ist.
Weitere Farben
Der Tab Weitere Farben enthält zusätzliche UI-Farben für spezielle Komponenten:
Kartenfarbe
Hintergrund für Kartenelemente
Karten Textfarbe
Text in Kartenelementen
Popup Hintergrund
Hintergrund für Popups und Dropdowns
Popup Textfarbe
Text in Popups und Dropdowns
Rahmenfarbe
Ränder und Trennlinien
Eingabefeld
Farbe für Formulare
Fokusring
Fokusanzeige bei Tastaturnavigation
Diagramm-Farben
Im Tab Diagramme definieren Sie eine Farbpalette für Charts und Grafiken:
Diagramm Farbe 1-5
Farben für Datenreihen in Diagrammen
Diese Farben werden automatisch für Balken-, Linien- und Kreisdiagramme verwendet.
Änderungen speichern
Alle Branding-Änderungen müssen explizit gespeichert werden:
Nehmen Sie Ihre Anpassungen vor
Die Änderungen werden live in der Benutzeroberfläche angezeigt
Klicken Sie oben rechts auf Speichern
Die Branding-Einstellungen werden für alle Benutzer Ihrer Organisation übernommen
Achtung: Wenn Sie die Seite verlassen ohne zu speichern, gehen Ihre Änderungen verloren.
Best Practices
Konsistentes Design
Verwenden Sie Ihre Unternehmensfarben konsistent
Achten Sie auf ausreichenden Kontrast zwischen Text und Hintergrund
Testen Sie beide Themes (hell und dunkel)
Barrierefreiheit
Stellen Sie sicher, dass alle Texte gut lesbar sind
Vermeiden Sie Farbkombinationen, die für farbenblinde Benutzer problematisch sind
Mindestkontrast-Verhältnis: 4.5:1 für normalen Text, 3:1 für großen Text
Logo-Qualität
Verwenden Sie Vektor-basierte Logos (SVG) wenn möglich, ansonsten hochauflösende PNGs
Testen Sie die Lesbarkeit auf verschiedenen Bildschirmgrößen
Vermeiden Sie zu detaillierte Logos für die quadratische Variante
Häufig gestellte Fragen
Wo sind die Branding-Einstellungen sichtbar?
Die Branding-Einstellungen sind nur auf Ihrer gebrandeten Subdomain sichtbar (z.B. demo.app.coursespace.de). Auf der Haupt-Domain app.coursespace.de wird das Standard-Design verwendet.
Kann ich verschiedene Designs für helle und dunkle Themes verwenden?
Ja, Sie können für jedes Theme eigene Farben und Logos definieren. Wechseln Sie zwischen den Themes mit dem Button oben rechts und passen Sie die Einstellungen individuell an.
Welches Bildformat sollte ich für Logos verwenden?
PNG wird empfohlen, da es Transparenz unterstützt. Für das breite Logo können Sie auch SVG verwenden. JPEG ist für Logos ungeeignet, da es keine Transparenz unterstützt.
Warum sehe ich meine Änderungen nicht auf der Hauptseite?
Branding-Einstellungen gelten nur für Ihre gebrandete Subdomain. Stellen Sie sicher, dass Sie die richtige URL verwenden und dass Ihr Browser keine gecachte Version anzeigt.
Kann ich das Branding zurücksetzen?
Aktuell ist ein komplettes Zurücksetzen nicht direkt möglich. Sie können jedoch alle Farben manuell auf die Standardwerte zurücksetzen oder den Support kontaktieren.
Weitere Bereiche
Organisationseinstellungen – Allgemeine Einstellungen Ihrer Organisation
Mitgliederverwaltung – Mitglieder Ihrer Organisation verwalten
Lizenzverwaltung – Kurslizenzen verwalten und verteilen
E-Mail Vorlagen – E-Mail-Kommunikation anpassen
Zuletzt aktualisiert