CSSCurrent de:Web Application Designer
Web Application Designer
Sie können die Anpassung des Designs der Benutzeroberfläche direkt in der Administrationsoberfläche vornehmen. Einfache Anpassungen können im Standard-Modus vorgenommen werden (Registerkarte "Standard"). Weitergehende Anpassungen, für die allerdings spezielle technische Kenntnisse erforderlich sind, können im Fortgeschrittenen-Modus (Registerkarte "Fortgeschritten") vorgenommen werden. Klicken Sie anschließend auf "Übernehmen", um die Änderungen zu speichern und für die Benutzeroberfläche zu aktivieren.
Live-Vorschau
Auf der rechten Seite des Hauptbereiches wird eine Live-Vorschau des Designs angezeigt. Diese enthält beispielhaft eine Auswahl an Darstellungs- und Eingabeelementen, an denen die Auswirkungen der Anpassungen geprüft werden können. Alle Änderungen, die Sie vornehmen, werden direkt in der Live-Vorschau angezeigt.
Standard
Im Bereich "Standard" sind einfache Anpassungen der Benutzeroberfläche der Webanwendung möglich, ohne dass weitere technische Kenntnisse erforderlich sind. In den meisten Fällen sind diese Möglichkeiten ausreichend, um die Anwendung an Ihr Corporate Design anzupassen.
Allgemein
Neben neutralen Graustufen werden in der Anwendung im Wesentlichen zwei Akzentfarben verwendet. Die Primärfarbe dient der Hervorhebung der Haupt-Aktionen einer Seite, beispielsweise der wichtigsten Schaltflächen. Untergeordnete Aktionen oder Zusatzfunktionen werden durch die Sekundärfarbe akzentuiert. Wählen Sie die Farben mithilfe des Farbreglers aus oder tragen Sie den RGB-Wert der Farbe im Hexadezimalformat in die entsprechenden Eingabefelder ein, wenn Ihnen dieser bekannt ist.
Logo
Im Kopfbereich der Anwendung ist eine Fläche für die Darstellung des Logos vorgesehen. Als Vorgabe ist das Cryptshare-Logo eingebunden, welches Sie durch ein eigenes Logo ersetzen können. Zulässig sind folgende Dateitypen:
- JPEG (*.jpg)
- PNG (*.png)
- SVG (*.svg)
Achten Sie darauf, dass die Farben im Logo für den Farbraum RGB gespeichert sind. Der Farbraum für Printmedien CMYK verursacht in manchen Browsern Probleme. Um die Darstellungsgröße des bereitgestellten Logos auf die zur Verfügung stehende Fläche anzupassen, können Breite und Höhe der Grafik relativ zur Fläche (in %) oder absolut (in Pixel) angegeben werden. Die Fläche, die standardmäßig für das Logo zur Verfügung steht, hat eine Breite von 540 Pixeln und eine Höhe von 70 Pixeln. Um Ihr Logo auf dieser Fläche zu platzieren, aktivieren Sie die Checkbox "Breite anpassen" bzw. "Höhe anpassen". Wird nur eine der beiden Größen angepasst, wird die andere anhand des Seitenverhältnisses proportional zur angepassten Größe ermittelt. Werden beide Größen nicht angepasst, wird das Logo in Originalgröße dargestellt (ggf. als Ausschnitt, falls die zur Verfügung stehende Fläche nicht ausreicht).
Das Logo kann innerhalb der zur Verfügung stehenden Fläche links, rechts oder zentriert ausgerichtet werden. Wählen Sie dazu die entsprechende Option in der Auswahlliste "Positionierung".
Hintergrund
Als Hintergrund für die Anwendung, also der Bereich, der um den Anwendungsbereich herum angezeigt wird, kann entweder eine Farbe oder ein Hintergrundbild verwendet werden. Wählen Sie eine Datei aus und klicken Sie auf "Hochladen", um sie als Hintergrundbild festzulegen. Zulässig sind folgende Dateitypen:
- JPEG (*.jpg)
- PNG (*.png)
- SVG (*.svg)
Achten Sie darauf, dass die Farben im Logo für den Farbraum RGB gespeichert sind. Der Farbraum für Printmedien CMYK verursacht in manchen Browsern Probleme.
- Aufgrund der Standardfarben der Anwendung eignen sich dunklere Bilder eher als helle.
- Setzen Sie Auflösung und Kompression so, dass die Dateigröße klein genug ist, um auch langsamere (z.B. mobile) Verbindungen zu bedienen. Als Maximalgröße empfehlen wir 100 Kilobyte.
- Wählen Sie ein Bild mit wenigen Details oder wenden Sie einen Unschärfefilter darauf an, damit der Hintergrund nicht von der eigentlichen Anwendung ablenkt.
Möchten Sie statt eines Bildes eine einfarbige Fläche als Hintergrund, aktivieren Sie "Hintergrundfarbe verwenden" und wählen die gewünschte Farbe aus.
Fortgeschritten
In diesem Modus können zusätzliche Anpassungen mithilfe von benutzerdefinierten CSS-Regeln vorgenommen werden. Diese überschreiben ggf. die Standard-Vorgaben sowie die im Standard-Bereich vorgenommenen Anpassungen.