Styling
Bei der Einbindung von Online-Diensten in Ihre Webseite haben Sie mehrere Möglichkeiten das Design und die Darstellung für Ihre Zwecke anzupassen.
Standard-Design
Ohne Anpassung wird der Online-Dienst in einem auf Barrierefreiheit und Nutzererfahrung optimiertes Frontend ausgeliefert. Es werden automatisch Elemente einspaltig, in einheitlichem Design, für Screenreader optimiert und responsiv aufgrund gegeben Seitenbreite und anderen Faktoren dargestellt. Das Standarddesign ist auf die Primärfarbe #F7A800 (Orange) ausgelegt.
Die notwendigen Dateien und Assets werden von den Ressourcen-Domains automatisch beim Einbinden nachgeladen. Es findet kein Content Flickering statt, da die Laderoutine so optimiert wurde, dass die erzeugten Ansichten nicht mehrstufig beim Benutzer aktualisiert werden müssen.
Manchmal weisen Webseitenhersteller darauf hin, dass bestimmte Iconsets oder Frameworks eingesetzt werden. Eingebettete Assets, beispielsweise Schriftarten, Icons, Hintergrundbilder, werden so geladen und über CSS-Klassen mit den Ansichten verknüpft, dass diese nicht in Konflikt mit den Ressourcen Ihrer Webseite kommen. Daher besteht keine Notwendigkeit, einen Integrationsworkshop zwischen Ihrem Webseitenhersteller und uns zur Einbindung des Standard-Designs zu organisieren.
Weitere Themes mit anderen Grunddesigns und Grundfarben sind zukünftig geplant.
Grunddesign anpassen
Einfache CSS-Regeln, die auf der einbindenden Seite gelten, wie beispielsweise Überschriftenfarben werden automatisch angewendet, weil wir versuchen jedes Design an Komponenten so defensiv wie möglich durchzuführen.
Außerdem haben wir am :root-Element eine Liste an CSS-Variablen (mit Prefix: pmo-) definiert, die die genutzten Einstellungen enthält. Diese Variablen sind nicht prozessspezifisch und nicht klassenabhängig und gelten überall auf der Seite.
Über die Grundkonfiguration können Sie einfache Anpassungen wie Farben, Schriftart, Hintergrundbild, Abstände, Schatten, Border, Schriftgrößen, Highlight-Verhalten, Checkboxdesign, Feldgrößen, Icongrößen konfigurieren. Legen Sie dazu neue Werte am Container oder an bestimmten Klassen oder HTML-Elementen fest. Wir empfehlen, eine gewünschte Liste an Konfigurationswerten für die Klasse pmo-process seitens einbindender Seite auszuliefern, damit diese im gesamten Container gelten.
Liste der globalen CSS-Variablen:
| Variable | Bedeutung | Standard |
|---|---|---|
--pmo-primary-color |
Primärfarbe | #f7a800 |
--pmo-primary-color-hover |
Primäre Hoverfarbe | #ffac27 |
--pmo-cta-color-hover |
Call-To-Action-Hoverfarbe | #666 |
--pmo-danger-color |
Fehlerfarbe | #f00 |
--pmo-danger-color-light |
Abgeschwächte Hintergrundfarbe bei Fehlermeldungen | #fff0f0 |
--pmo-danger-color-dark |
Abgedunkelte Farbe bei Fehlermeldungen | #9d2537 |
--pmo-warning-color |
Warnfarbe | #f5bd00 |
--pmo-warning-color-light |
Abgeschwächte Hintergrundfarbe bei Warnmeldungen | #fffbef |
--pmo-bg |
Hintergrund des Formulars | #e5e5e5 |
--pmo-inactive-color |
Farbe für inaktive Elemente | #9b9da4 |
--pmo-field-color |
Eingabemaskenfarbe | #ced4da |
--pmo-field-background |
Eingabenmaske Hintergrundfarbe | #fff |
--pmo-description-bg |
Hintergrund der Beschreibung | #f9f9f9 |
--pmo-button-primary |
Primärbutton | linear-gradient( 90deg, #ffb238 0%, #ffc05b 30.21%, #ffcc7b 67.19%, #ffdda6 99.99%, #ffcf83 100% ) |
--pmo-button-primary-active |
Aktiver Primärbutton | linear-gradient( 144deg, #fcbc32, #f7a800 50%, #fdd491 ) |
--pmo-button-text-color |
Textfarbe im Button | #212121 |
--pmo-button-primary-shadow |
Schattenfarbe von primären Buttons | #fdd491 |
--pmo-button-secondary-shadow |
Schattenfarbe von sekundären Buttons | #e5e5e5 |
--pmo-button-secondary-border |
Rahmenfarbe von sekundären Buttons | #bababa |
--pmo-button-secondary-active |
Hintergrund von aktiven sekundären Buttons | linear-gradient( 144deg, #fff, #e1e1e1 50%, #fff ) |
--pmo-button-cta-active |
Farbe von aktiven Call-To-Action-Buttons | #595959 |
--pmo-button-cta |
Farbe von Call-To-Action-Buttons | #737373 |
--pmo-text-color |
Textfarbe | #52565b |
--pmo-bage-text |
#fff |
|
--pmo-bage-color |
#737373 |
|
--pmo-accordion-line |
Trennlinienfarbe von Accordion-Elementen | #dbdbdb |
--pmo-accordion-hover |
Hoverfarbe von Accordion-Elementen | #f9f9f9 |
--pmo-input-border-color |
Rahmenfarbe von Eingabemasken | #ced4da |
--pmo-step-border-color |
Rahmenfarbe von Schritt-Indikatoren | #e5e5e5 |
--pmo-container-shadow |
Schatten von abgeschlossenen Formularcontainern | 0 0 .5rem 0 #e3e3e3 |
--pmo-icon-color |
Iconfarbe | #646464dd |
--pmo-family-sans-serif |
Schriftart | "Roboto", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif |
--pmo-message-text-size |
Textgröße bei Meldungen | .875rem |
--pmo-label-size |
Textgröße von Labels; dies ist die Referenzberechnungsgröße für andere Elemente und Abstände des Online-Dienstes | 1rem |
--pmo-title-size |
Textgröße von Schrittüberschriften | calc(var(--pmo-label-size) * 1.3) |
--pmo-section-title-size |
Textgröße von Zwischenüberschriften | calc(var(--pmo-label-size) * 1.1) |
--pmo-description-height |
Maximale Höhe für die Beschreibung | 100rem |
--pmo-label-padding |
Innenabstände von Labels | 1.05rem .75rem |
--pmo-date-calendar-position |
Höhenkorrektur des Kalender-Icons in Datumseingaben | -.3em |
--pmo-field-padding-focus-top |
Innenabstand (oben) für fokussierte Eingabemasken | 1.25rem |
--pmo-field-padding-focus-bottom |
Innenabstand (unten) für fokussierte Eingabemasken | .5rem |
--pmo-field-border-radius |
Radius der Rahmenecken für Eingabenmasken | .5rem |
--pmo-field-border-top |
Rahmen (oben) von Eingabemasken | 1.5px solid |
--pmo-field-border-right |
Rahmen (rechts) von Eingabemasken | 1.5px solid |
--pmo-field-border-bottom |
Rahmen (unten) von Eingabemasken | 1.5px solid |
--pmo-field-border-left |
Rahmen (links) von Eingabemasken | 1.5px solid |
--pmo-border-radius |
Allgemeiner Radius von Rahmenecken | .5rem |
--pmo-checkbox-margin |
Außenabstände von Checkboxen | .5rem |
--pmo-content-space |
Innenabstand (links) von Schritt-Inhalten | 2.5em |
--pmo-title-indicator-space |
Abstand zwischen Schritt-Indikatoren | 0 1.2rem |
--pmo-component-spacing |
Allgemeiner Abstand zwischen zwei Komponenten | 0 |
--pmo-button-border |
Allgemeiner Rahmen von Buttons | 1px solid |
--pmo-bg-image |
Hintergrundbild (tatsächliche Ressource wird von Asset-Server unter einer anderen cachbaren URL ausgeliefert) | url(assets/background-figure.svg) |
--pmo-icon-width |
Standardbreite von Icons | 1em |
--pmo-icon-height |
Standardhöhe von Icons | 1em |
--pmo-icon-vertical-align |
Vertikale Höhenkorrektur für Icons | -.125em |
--pmo-container-spacing |
Abstand zwischen zwei Formular-Containern | 1rem auto |
--pmo-language-icon-size |
Größe des internationalen Icons zur Sprachauswahl | 3rem |
--pmo-bg-image-check |
Angezeigtes Bild für gecheckte Checkboxen (tatsächliche Ressource wird von Asset-Server unter einer anderen cachbaren URL ausgeliefert) | url(assets/border.svg) |
--pmo-bg-min-height |
Mindesthöhe des Hintergrunds | 370px |
--pmo-payment-check-padding |
Innenabstände für Checks in der Bezahlstatusliste | 7.5em 2.5em 6.5em |
--pmo-payment-check-header-padding |
Innenabstände für Header in der Bezahlstatusliste | 1.25em 1.75em |
--pmo-payment-title-size |
Textgröße für Überschriften in der Bezahlstatusliste | 2.25em |
--pmo-payment-title-weight |
Font-Weight für Überschriften in der Bezahlstatusliste | 400 |
--pmo-payment-title-margin |
Außenabstände für Überschriften in der Bezahlstatusliste | 1em 0 1.5em |
--pmo-payment-border-color |
Rahmenfarbe für Elemente der Bezahlstatusliste | #696b71 |
--pmo-payment-box-shadow |
Schlagschatten für Container der Bezahlstatusliste | 0 0 5px .5px var(--pmo-payment-border-color) |
--pmo-no-margin |
Definition für die Verwendung von keinem Außenabstand | 0 |
--pmo-progress-icon-size |
Größe von Icons am Fortschrittsbalken | 4.6875em |
--pmo-progress-icon-padding |
Innenabstände von Icons am Fortschrittsbalken | 0 .5em |
--pmo-progress-bar-height |
Höhe des Fortschrittsbalkens | 1em |
--pmo-progress-bar-margin |
Außenabstände des Fortschrittsbalkens | 0 auto |
--pmo-progress-bar-base-color |
Farbe des Fortschrittsbalkens | #f3f3f3 |
--pmo-progress-bar-load-color |
Farbe des Fortschrittsbalkens beim Laden | #ffb23b |
--pmo-step-indicator-size |
Größe des Schritte-Indikators | 1.5em |
--pmo-market-map-width |
300px |
|
--pmo-market-map-title-weight |
400 |
|
--pmo-markets-map-width |
295px |
|
--pmo-markets-map-height |
295px |
|
--pmo-leaflet-popup-content-img-width |
200px |
|
--pmo-leaflet-popup-content-img-height |
200px |
|
--pmo-markets-map-desktop-width |
365px |
|
--pmo-markets-map-desktop-height |
365px |
|
--pmo-upload-field-size |
Mindesthöhe für die Drag-and-Drop-Fläche von Uploads | 6.4rem |
Spezifische CSS-Regeln ergänzen
Die Einbindung eines Online-Dienstes rendert keinen Shadow-DOM, sondern den HTML-Content direkt in den definierten HTML-Container mit der Prozess-Kennung. Daher haben Sie einige Möglichkeiten, auf das Styling über das Grunddesign hinaus direkten Einfluss zu nehmen.
Die Komponenten und Teilelemente der Online-Dienste werden mit CSS-Klassen ausgeliefert. Diese sind stets mit pmo- als Prefix ausgeliefert, um Überschneidungen mit Ihrer Webseite zu vermeiden.
Wenn Sie das ausgelieferte HTML untersuchen, können Sie feststellen, dass die Komponenten mit zwei Arten von Klassen befüllt sind, den allgemeinen Klassen und den feldspezifischen, beispielsweise hat die Eingabemaske für den Vornamen des Antragstellenden die Klasse pmo-form-control, wie alle Eingabemasken, und zusätzlich pmo-component-applicant-firstname, welche eindeutig im gesamten Formular für Vornamen des Antragstellenden verwendet wird. Analog zu diesem Beispiel sind alle Elemente, auch in geschachtelter Form, deklariert.
Möchten Sie allgemein die Eingabemasken oder Grundelemente einheitlich anpassen, empfehlen wir die CSS-Regeln der allgemeinen Klassen zu überschreiben bzw. zu ergänzen. Möchten Sie beispielsweise alle Hinweistexte umgestalten, könnten Sie die entsprechenden CSS-Regeln zur Klasse pmo-hint hinzufügen.
Viele Felder erhalten außerdem ein id-Attribut. Für das Design empfehlen wir, CSS nicht über die Ids, sondern stets über die Klassen zu definieren. Die Ids werden im JavaScript verwendet, um die Verwendung und Umsetzung bestimmter Formularlogiken zu ermöglichen, und werden unsererseits nicht auf Änderungen am Styling-Standardisierungsvorgehen überwacht. Im Gegensatz dazu achten wir sehr stark darauf, dass verwendete CSS-Klassen nachträglich nicht mehr verändert werden, weil wir wissen, dass Sie ggf. Styling-Anpassungen über diese Klassen angewendet haben.
Vollständiges Redesign
Sie haben die Möglichkeit über die Konfigurationsoption data-prevent-default-css sämtliches Standarddesign abzuschalten und Ihre eigenen CSS-Definitionen einzusetzen.
Diese Variante erzeugt den höchsten Aufwand bei Ihren Entwicklern und Integratoren. Sie haben aber auch die volle Kontrolle über das Aussehen jedes Elements.
Wir übernehmen keine Gewährleistung der korrekten Darstellung oder Benutzerführung durch den Online-Dienst bei Anpassungen am Styling, die durch Sie durchgeführt wurden.
Wenden Sie sich bei Fragen an den Support an: pmonline@govconnect.de