CSSCurrent de:Web Application Designer

Aus Cryptshare Documentation
Version vom 6. Oktober 2023, 07:48 Uhr von imported>Frorathm
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Wechseln zu:Navigation, Suche



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.

Da die Schriftfarbe der Schaltflächen Weiß ist, sollten die gewählten Farben nicht zu hell sein. Somit gewährleisten Sie eine gute Lesbarkeit.

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).

Passen Sie (falls überhaupt notwendig) nur eine der beiden Größen an, damit das Logo nicht verzerrt dargestellt wird. In den meisten Fällen reicht eine Anpassung der Höhe auf 100% aus, um das Logo so zu skalieren, dass es ganz in die Darstellungsfläche passt. Falls das Logo anschließend auf der rechten Seite noch abgeschnitten wird, versuchen Sie stattdessen eine Anpassung der Breite auf 100%, ohne Anpassung der Höhe.

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.

Beachten Sie folgende Hinweise, um bei Nutzung eines Hintergrundbildes eine optimale Benutzerfreundlichkeit zu erreichen:
  • 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.

Verwenden Sie die in Ihrem Browser integrierten Entwicklungswerkzeuge (zumeist mit F12 aufrufbar), um die benötigten CSS-Selektoren anhand der Live-Vorschau zu ermitteln.
Änderungen von CSS-Selektoren
Bitte beachten Sie, dass sich in zukünftigen Updates CSS-Selektoren aufgrund von Weiterentwicklungen der Cryptshare Web App verändern können. Prüfen Sie daher nach jedem Update, ob Änderungen am fortgeschrittenen CSS weiterhin funktionieren. Aufgrund der vollkommenen Freiheit, Änderungen durch fortgeschrittenes CSS durchzuführen, ist es der Pointsharp GmbH nicht möglich, sicherzustellen, dass nach jedem Update diese Änderungen weiterhin funktional sind.