company logo

Hilfecenter

Zu ovos play wechseln
Alle SammlungenHäufig gestellte Fragen - Administrator*innenAllgemeine VerwaltungWie ändere ich die Farbe und das Logo meiner App-Instanz?

Wie ändere ich die Farbe und das Logo meiner App-Instanz?

Farben und Logos deiner App-Instanz kannst du über das Admin Dashboard anpassen.

Im Admin Dashboard kannst du als Administrator*in die CI-Eigenschaften deiner App-Instanz frei wählen und jederzeit adaptieren.


Farbeinstellungen deiner App-Instanz anpassen

Wechsle zum Menüpunkt Verwalten und Instanz-Einstellungen, um die CI-Einstellungen aufzurufen.

Auf dieser Seite findest du verschiedene Einstellungsbereiche. Für die Farbeinstellungen, klappen Sie den Bereich Theme-Farben aus.

Im Bereich Theme-Farben findest du eine Farbpalette mit den bereits verwendeten Farben.

Im Bereich

Klicke auf das Pipette-Symbol, um eine Farbe anzupassen. Es öffnet sich ein Fenster mit einem Farbregler. In diesem Farbregler, kannst du die Farbe aus dem Farbfeld wählen, indem du in die gewünschte Farbposition klickst. Mit dem unteren Balken wählst du dabei den gewünschten Farbton. Du kannst die Farbe auch mit dem jeweiligen HEX-Code eintragen.

Klicken Sie auf das

Mit dem Zurücksetzen-Symbol kannst du die Farbe auf den Standardwert zurücksetzen. Zusätzlich kannst du mit dem Pfeil-Symbol, auch eine RGB- oder HSL-Maske anzeigen.

Klicken Sie auf das Pfeil-Symbol, um zwischen HEX, RGB und HSL zu wechseln.

Um eine Information zu erhalten, welchen Effekt die gewählte Farbe auf die App hat, bewegst du den Maus-Cursor über das Fragezeichen-Symbol neben dem Namen der Farbe.

Primärfarbe

Die Primärfarbe wird als Hauptfarbe und für Hervorhebungen wie Überschriften oder Buttons verwendet.

Die Primärfarbe wird für alle Hervorhebunden verwendet.

Primäre Schriftfarbe

Die Primäre Schriftfarbe wird für alle Fließtexte, Labels und alle Texte, die nicht als Überschrift formatiert sind, verwendet.

Sekundäre Schriftfarbe

Die Sekundäre Schriftfarbe wird auf sekundären Buttons (z.B. "Schließen"), Platzhalter und Hinweistexte verwendet.

Die Sekundäre Schriftfarbe wird zusätzlich zur Primären Schriftfarbe verwendet.

Trennlinienfarbe

Die Trennlinienfarbe definiert die Farbe für Trennlinien innerhalb von Inhalten oder im Code Scanning-Modul.

Die Trennlinienfarbe bestimmt die Farbe aller Trennlinien.

Hintergrundfarbe

Die Hintergrundfarbe wird für alle Seitenhintergründe verwendet.

Logos und Hintergründe deiner App-Instanz anpassen

Wechsle zum Menüpunkt Verwalten und Instanz-Einstellungen, um die CI-Einstellungen aufzurufen.

Auf dieser Seite findest du verschiedene Einstellungsbereiche. Für die Logo- und Hintergrundeinstellungen, klappe den Bereich Logos & Hintergrundbilder aus.

In diesem Bereich findest du Bild-Upload Felder für die jeweiligen Bilder, die in deiner App-Instanz angezeigt werden.

Logos können mithilfe der Bild-Upload Felder hochgeladen werden.

Ziehe die Bilddateien für Logos per Drag & Drop in die jeweiligen Bild-Upload Felder oder klicke auf die Felder, um die Datei-Ablage deines Betriebssystems zu öffnen und wähle die gewünschte Bild-Datei aus.

Bewege die Maus über die Fragezeichen-Symbole, um mehr Infos zum jeweiligen Upload Feld anzuzeigen.

Logo Bild

Dieses Logo wird auf dem Authentifizierungs-Hintergrundbild platziert. Das Logo Bild wird auch als Logo für das Admin Dashboard Menü verwendet. Für das Logo empfehlen wir eine Auflösung von mindestens 100 Pixel für die lange Kante.

Das Logo Bild wird am Authentifizierungs-Hintergrund angezeigt und im Admin Dashboard.

info icon
Hinweis: Das Logo Bild wird auf dem Authentifizierungs-Hintergrund dargestellt. Bei Bedarf, verwende daher ein Logo mit transparentem Hintergrund.

Authentifizierung Logo Höhe (in px)

Mit dieser Einstellung definiere die Größe des Logos auf der Authentifizierungs-Seite. Die Standardeinstellung beträgt 50 Pixel. Ändere diese Einstellung z.B. auf 100 Pixel, wird das Logo doppelt so groß angezeigt. 100 Pixel sind dabei das Maximum.

Sie können die Größe des Logos auf der Authentifizierungs-Seite bis zu 100 Pixel vergrößern.

Authentifizierungs-Hintergrundbild

Dieses Bild wird als Hintergrund auf der Authentifizierungs-Seite angezeigt. Das Hintergrundbild wird dabei an die Größe des Endgeräts angepasst und gegebenenfalls zugeschnitten.

Wird nur die mobile Variante als App verwendet empfehlen wir folgende Bild-Einstellungen:

  • 720 x 1280 Pixel (oder gleiches Verhältnis)

  • kleiner als 200kb

  • .jpg (für detailreiche Bilder)

  • .png für Illustrationsgrafiken

Wird auch die Web-Variante verwendet, empfehlen wir ein 16:9-Querformat mit 1920 × 1280 Pixel zu verwenden, aber den Schwerpunkt des Designs für die mobile Variante mittig zu platzieren.

Admin Authentifizierungs-Hintergrundbild

Dieses Bild wird für den Login-Screen des Admin Dashboards verwendet. Das Hintergrundbild wird dabei an die Größe des Endgeräts angepasst und gegebenenfalls zugeschnitten.

Das Admin Authentifizierungs-Hintergrundbild wird für die Login-Seite des Admin Dashboards angezeigt.

Es gelten dieselben Bild-Empfehlungen wie für das Authentifizierungs-Hintergrundbild.

Header Logo Bild

Dieses Logo wird in der App in der linken oberen Ecke angezeigt. Das Logo wird auf einer weißen Kachel angezeigt. Beim Klick darauf landet man in der App auf der ersten Hauptseite.

Das Header Logo Bild wird in der App links oben angezeigt.

Favicon

Dieses Icon wird im Browser-Tab angezeigt. Je nach verwendetem Browser variiert die Darstellungsgröße. Wir empfehlen eine Abwandlung des Logos in einem 1:1 Format ohne Text oder kleinen Details.

Das Favicon wird in der Browser-Leiste angezeigt.

War diese Antwort hilfreich für dich?
😞
😐
😁