Whitelabeling-Archiv
Ein Whitelabeling-Archiv muss von einer vom Whitelabeling-Dogu erreichbaren Netzwerkadresse gehostet werden. Zum Beispiel kann es über das Sonartype Nexus Dogu in einem raw Repository gehostet werden.
Aufbau des Whitelabeling-Archiv
Das Whitelabeling-Archiv besteht aus einem Zip-Archiv, das eine main.css
im Root des Archivs besitzt. Optional können
Bilder / Logos in einen image
-Ordner abgelegt werden.
Die Struktur wird dann folgendermaßen aussehen:
whitelabeling.zip
├─ main.css (notwendig)
└─ image/ (optional)
└─ ihr-eigenes-logo.png (optional, beliebige Dateinamen möglich)
Aufbau von main.css
Die Datei main.css
enthält Variablen, um die u.a. Farben und Bilder anzupassen.
Außerdem sind hier auch dogu-spezifische Variablen (z.B. für das CAS-Dogu) enthalten
Eine vollständige
main.css
mit allen Variablen ist hier zu finden.
Farben
Diese Variablen geben die allgemeinen Farben an die im CES verwendet werden. Sie ermöglichen Styleänderung u.A. im Warp-Menü, den CAS-Seiten (Login/Logout), oder der Dogu-Starting-Seite.
Farbe | Variablenname | Beschreibung |
---|---|---|
Marke | --ces-color-brand |
Farbe wird für Akzente benutzt (z.B. Knöpfe, Trennlinien) |
Erfolg | --ces-color-success |
Farbe für die Hervorhebung von Erfolgsstatus |
Gefahr | --ces-color-danger |
Farbe für Warnungen und potentiell gefährliche Operationen |
Warnung | --ces-color-warning |
Farbe für Fehlermeldungen |
Neutral | --ces-color-neutral |
|
Hintergrund | --ces-color-default-background |
Normale Hintergrundfarbe |
--ces-color-default-focus-inner |
Ergänzende Fokusfarbe für Kontrast zu Nicht-Standard-Hintergründen | |
Fokus | --ces-color-default-focus-outer |
Umrandungsfarbe von fokussierten Elementen, z.B Links, Knöpfe |
Text | --ces-color-default-text |
Farbe von Standardtext |
--ces-color-inverted-text |
Bilder
Diese Variablen geben die allgemeinen Bilder an die im CES verwendet werden, wie zum Beispiel das Standard-CES-Logo.
Variablenname | Beschreibung |
---|---|
--ces-logo-default |
Das Standard-Logo im CES. Wird u.a. auf der CAS Login-Seite verwendet. |
--ces-logo-default-ratio |
Das Seitenverhältnis des Standard-Logos. |
CAS spezifische Variablen
Diese Variablen ermöglichen eine Styleänderung der CAS-Seiten, wie zum Beispiel die Login- und die Logout-Seite.
Variablenname | Beschreibung |
---|---|
--cas-config-logo-background |
Die Hintergrundfarbe des Logos im CAS. |
Fehler-Seiten
Diese Variablen ermöglichen eine Styleänderung der Fehler-Seiten. Dazu gehören die folgenden Seiten:
- "Dogu startet"-Seite: Wenn ein Dogu zurückmeldet, dass es während des Starts noch nicht betriebsbereit ist
- "Wartungsmodus"-Seite: Wenn der Wartungsmodus des Ecosystems aktiv ist
- "Seite nicht gefunden - 404": Wenn eine Seite nicht im Ecosystem vorhanden ist
- Allgemeine Fehler: weitere Fehlerseiten, u. A. für 401, 403, 500, 502, ...
Einige der Variablen haben als Standardwert wiederum den Verweis auf eine andere Variable. Somit ist es möglich den Wert der Variable allgemein zu verändern, oder spezifisch zu setzen in dem die entsprechende ces-error
-Variable verwendet wird.
Variablenname | Standardwert | Beschreibung |
---|---|---|
--ces-error-color |
--ces-color-brand |
Die Textfarbe der Fehler-Seite. |
--ces-error-button-color-bg |
--ces-error-color |
Die Farbe des Buttons auf der Fehler-Seite. |
--ces-error-button-color-text |
--ces-color-color-inverted-text |
Die Textfarbe des Buttons auf der Fehler-Seite. |
--ces-error-button-color-hover |
--ces-color-brand-strong |
Die Hover-Farbe des Buttons auf der Fehler-Seite. |
--ces-error-button-color-active |
--ces-color-brand-stronger |
Die Active-Farbe des Buttons auf der Fehler-Seite. |
--ces-error-logo |
url("../img/forbidden.svg") |
Die URL zum Logo auf der Fehler-Seite. |
--ces-error-logo-width |
20rem |
Die Breite des Logos im Desktop-Modus auf der Fehler-Seite. |
--ces-error-logo-height-mobile |
12rem |
Die Höhe des Logos im Mobil-Modes auf der Fehler-Seite. |
--ces-error-docs-visibility |
visible |
Gibt an ob der Doku-Lin auf Fehler-Seite angezeigt wird. (visible / hidden ) |
Für folgende Fehlerseiten können zusätzlich eigene Logos konfiguriert werden
Dogu-Starting
Variablenname | Standardwert | Beschreibung |
---|---|---|
--ces-dogu-starting-logo |
url("../img/dogu-starting.svg") |
Die URL zum Logo auf der Dogu-Starting-Seite. |
--ces-dogu-starting-logo-animated |
url("../img/dogu-starting-animated.svg") |
Die URL zum animierten Logo auf der Dogu-Starting-Seite. |
--ces-dogu-starting-logo-width |
var(--ces-error-logo-width) |
Die Breite des Logos im Desktop-Modus auf der Dogu-Starting-Seite. |
--ces-dogu-starting-logo-height-mobile |
var(--ces-error-logo-height-mobile) |
Die Höhe des Logos im Mobil-Modes auf der Dogu-Starting-Seite. |
Wartungsmodus
Variablenname | Standardwert | Beschreibung |
---|---|---|
--ces-maintenance-logo |
url("../img/maintenance.svg") |
Die URL zum Logo auf der Wartungsmodus-Seite. |
--ces-maintenance-logo-width |
var(--ces-error-logo-width) |
Die Breite des Logos im Desktop-Modus auf der Wartungsmodus-Seite. |
--ces-maintenance-logo-height-mobile |
var(--ces-error-logo-height-mobile) |
Die Höhe des Logos im Mobil-Modes auf der Wartungsmodus-Seite. |
404-Seite
Variablenname | Standardwert | Beschreibung |
---|---|---|
--ces-not-floud-logo |
url("../img/not-floud.svg") |
Die URL zum Logo auf der "Nicht gefunden"-Seite. |
--ces-not-floud-logo-width |
var(--ces-error-logo-width) |
Die Breite des Logos im Desktop-Modus auf der "Nicht gefunden"-Seite. |
--ces-not-floud-logo-height-mobile |
var(--ces-error-logo-height-mobile) |
Die Höhe des Logos im Mobil-Modes auf der "Nicht gefunden"-Seite. |
Warp-Menü
Diese Variablen ermöglichen eine Styleänderung des Warp-Menüs.
Einige der Variablen haben als Standardwert wiederum den Verweis auf eine andere Variable. Somit ist es möglich den Wert der Variable allgemein zu verändern, oder spezifisch zu setzen in dem die entsprechende ces-warp
-Variable verwendet wird.
Variablenname | Standardwert | Beschreibung |
---|---|---|
--ces-warp-logo |
Das Cloudogu-Logo als SVG | Die URL zum Logo des Warp-Menüs (z.B.: url("./img/my-logo.svg") ). |
--ces-warp-logo-bg |
transparent |
Die Hintergrundfarbe des Logos im Warp-Menü. |
--ces-warp-bg |
--ces-color-brand |
Die Hintergrundfarbe des Warp-Menüs. |
--ces-warp-bg-hover |
--ces-color-brand-strong |
Die Hover-Farbe des Warp-Menüs. |
--ces-warp-bg-active |
--ces-color-brand-stronger |
Die Active-Farbe des Warp-Menüs. |
--ces-warp-border |
--ces-color-default-background |
Die Rahmenfarbe des Warp-Menüs. |
--ces-warp-border-hover |
--ces-color-default-background |
Die Hover-Farbe des Rahmens im Warp-Menü. |
--ces-warp-border-active |
--ces-color-default-background |
Die Active-Farbe des Rahmens im Warp-Menü. |
--ces-warp-text |
--ces-color-inverted-text |
Die Textfarbe des Warp-Menüs. |
--ces-warp-text-hover |
--ces-color-inverted-text |
Die Hover-Farbe des Textes im Warp-Menü. |
--ces-warp-text-active |
--ces-color-inverted-text |
Die Active-Farbe des Textes im Warp-Menü. |
Selector
Bei der Erstellung der eigenen main.css
ist darauf zu achten den Selector :root.ces-whitelabel
zu verwenden,
damit die eigenen Styles eine höhere Spezifität als die default Styles haben.
Beispiel für den Selector in der main.css
:
:root.ces-whitelabel {
--ces-color-brand-stronger: #003250;
--ces-color-brand-strong: #00426B;
--ces-color-brand: #00629E;
--ces-color-brand-weak: #9EDAFF;
--ces-color-brand-weaker: #D4EDFC;
/*...*/
}
Beispiel main.css
:root.ces-whitelabel {
/* Colors */
--ces-color-brand-stronger: #003250;
--ces-color-brand-strong: #00426B;
--ces-color-brand: #00629E;
--ces-color-brand-weak: #9EDAFF;
--ces-color-brand-weaker: #D4EDFC;
--ces-color-success-stronger: #0A2913;
--ces-color-success-strong: #145226;
--ces-color-success: #1F7A38;
--ces-color-success-weak: #85E09E;
--ces-color-success-weaker: #EBFAEF;
--ces-color-danger-stronger: #521414;
--ces-color-danger-strong: #7A1F1F;
--ces-color-danger: #CC3333;
--ces-color-danger-weak: #EBADAD;
--ces-color-danger-weaker: #F8EDED;
--ces-color-warning-stronger: #3D3700;
--ces-color-warning-strong: #574E00;
--ces-color-warning: #707600;
--ces-color-warning-weak: #FFE500;
--ces-color-warning-weaker: #FFFACC;
--ces-color-neutral-stronger: #333333;
--ces-color-neutral-strong: #4D4D4D;
--ces-color-neutral: #666666;
--ces-color-neutral-weak: #CCCCCC;
--ces-color-neutral-weaker: #F5F5F5;
--ces-color-default-background: #FFFFFF;
--ces-color-default-focus-inner: #FFFFFF;
--ces-color-default-focus-outer: #CC14CC;
--ces-color-default-text: #0D1C26;
--ces-color-inverted-text: #FCFCFD;
/* Images */
/* The base64 encoded default logo */
--ces-logo-default: url('data:image/svg+xml;base64,PHN2ZyBpZD0iZ2VzY2hsb3NzZW5lc19FbGVtZW50IiBkYXRhLW5hbWU9Imdlc2NobG9zc2VuZXMgRWxlbWVudCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgODM4LjY3IDUxMy43NyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMyNGEyZGN9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNzIxLjMxIDMyOS4zNmE2MC42NiA2MC42NiAwIDAgMS0xMTcuMSAyMi4yNGwuNTMgMi41MS0xMTguMSAyMy4zN2E2Ny43MyA2Ny43MyAwIDAgMS0xMzUuNC4xN2wtMTE5LTIzLjU0YTYwLjY4IDYwLjY4IDAgMSAxIDUuMjctMjQuNzVsMTE3LjMgMjQuMTRhNjcuODMgNjcuODMgMCAwIDEgNTEuNjQtNDQuNjRoLS4wNnYtNzAuMjVhNjAuNjggNjAuNjggMCAxIDEgMjQuMjUuMTV2NzBhNjguMjEgNjguMjEgMCAwIDEgNTIuMjcgNDQuNjFsMTE2LjUzLTI0IC42IDIuODFjLS4wNS0uOTMtLjA3LTEuODctLjA3LTIuODFhNjAuNjYgNjAuNjYgMCAxIDEgMTIxLjMxIDB6Ii8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNzQyIDE3My41MWMtNTUuMzItMjUuODgtMTA2LjUtMjMtMTQ3LjY1LTYuMTgtMi00Mi42Ny0yMC44OC04My43Ni01Ny0xMThDNDY3LjExLTE3LjE4IDM1My44Ni0xMSAyODcuNTUgNjIuNzVjLTI3LjggMzAuOTMtNDIgNjcuNDEtNDQuMiAxMDQuNTYtNDEuMTMtMTYuODQtOTIuMy0xOS42Ny0xNDcuNTkgNi4yLTcwLjI0IDMyLjg2LTEyNS42IDEzNi4xMi03NS4wNyAyMzYuMTQgMzYuODIgNzIuOSAxMjguNDkgMTA3LjU3IDE4NyAxMDEuNjRsNDIzLjU3LjEzQzY4OS44MSA1MTYuNzMgNzgwLjQ2IDQ4MiA4MTcgNDA5LjY1YzUwLjU1LTEwMC4wMi00LjgxLTIwMy4yOC03NS0yMzYuMTR6bTE0LjU5IDIwOS4yM2MtMjEuNTUgMzkuNy01OC43NSA1NC43My0xMDAuNzcgNTguNTRINTA2LjU5Yy0xOS4zOSAyNC40NS00Ny4zNCA0My41OC04Ny41NSA0My41OC0zNS44MyAwLTY2LjQyLTE1LjI1LTg3LjU1LTQzLjU4bC0xNDggLjE0Yy00Mi42Ni0zLjU4LTgwLjUyLTE4LjQ5LTEwMi4zNC01OC42OC0zMS44NC01OC42Ni02LjU4LTEyNS40NSA0OC4zNy0xNTIuMzJzMTIyLTEuODUgMTQ4IDU0LjY3YTExNC4yOCAxMTQuMjggMCAwIDEgNi4xNyAxOC4xNnM0LjIzLTUgNC45My01Ljc3YzIwLjQ2LTIxLjU3IDMzLjUzLTI5IDUzLjMyLTM5LjkyYTkxLjY5IDkxLjY5IDAgMCAxLTEzLjc4LTE2LjM2Yy0uNTctMS0xLTEuODEtMS4yMy0yLjEyLTIzLjE2LTM0LjMyLTI2LjcxLTg5LjgyIDkuMjQtMTMxLjg0QzM3NS41MiA2MS4yIDQ0Mi42OCA1Ni45MyA0OTAgOTUuNjZjMzEuODggMjYuMDggNTIuMTkgNzkuNTYgMjcuNjMgMTMxLjhsLS4wNy4xcy04LjU0IDE3LjkzLTIxLjc4IDMwYzE5Ljc5IDExIDMyLjg2IDE4LjM1IDUzLjMyIDM5LjkyLjcuNzQgNC44OCA1LjczIDQuOTMgNS43N2ExMTUuMyAxMTUuMyAwIDAgMSA2LjE3LTE4LjE2YzI1LjkyLTU2LjUyIDkzLTgxLjU0IDE0Ny45NS01NC42N3M4MC4yMyA5My42NiA0OC4zOSAxNTIuMzJ6Ii8+PC9zdmc+');
/*
* The ratio of ces-logo-default image (width/height). This variable is important to scale the image correctly in e.g. cas.
* Whenever the image is change, the ration variable has to be set as well
*/
--ces-logo-default-ratio: 1.63;
/* CAS specific variables */
--cas-config-logo-background: transparent;
/* Dogu-Starting-Page specific variables */
--ces-dogu-starting-color: var(--ces-color-brand, #00629E);
--ces-dogu-starting-button-color-bg: var(--ces-dogu-starting-color, #00629E);
--ces-dogu-starting-button-color-text: var(--ces-color-inverted-text, #FCFCFD);
--ces-dogu-starting-button-color-hover: var(--ces-color-brand-strong, #00426B);
--ces-dogu-starting-button-color-active: var(--ces-color-brand-stronger, #003250);
--ces-dogu-starting-logo-animated: url("./image/dogu-starting-animated.svg");
--ces-dogu-starting-logo: url("./image/dogu-starting.svg");
--ces-dogu-starting-logo-width: 20rem;
--ces-dogu-starting-logo-height-mobile: 12rem;
--ces-dogu-starting-docs-visibility: visible;
/* Warp-Menu specific variables */
--ces-warp-logo: url('data:image/svg+xml;base64,PHN2ZyBpZD0iZ2VzY2hsb3NzZW5lc19FbGVtZW50IiBkYXRhLW5hbWU9Imdlc2NobG9zc2VuZXMgRWxlbWVudCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgODM4LjY3IDUxMy43NyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNGRkZGRkZ9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNzIxLjMxIDMyOS4zNmE2MC42NiA2MC42NiAwIDAgMS0xMTcuMSAyMi4yNGwuNTMgMi41MS0xMTguMSAyMy4zN2E2Ny43MyA2Ny43MyAwIDAgMS0xMzUuNC4xN2wtMTE5LTIzLjU0YTYwLjY4IDYwLjY4IDAgMSAxIDUuMjctMjQuNzVsMTE3LjMgMjQuMTRhNjcuODMgNjcuODMgMCAwIDEgNTEuNjQtNDQuNjRoLS4wNnYtNzAuMjVhNjAuNjggNjAuNjggMCAxIDEgMjQuMjUuMTV2NzBhNjguMjEgNjguMjEgMCAwIDEgNTIuMjcgNDQuNjFsMTE2LjUzLTI0IC42IDIuODFjLS4wNS0uOTMtLjA3LTEuODctLjA3LTIuODFhNjAuNjYgNjAuNjYgMCAxIDEgMTIxLjMxIDB6Ii8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNzQyIDE3My41MWMtNTUuMzItMjUuODgtMTA2LjUtMjMtMTQ3LjY1LTYuMTgtMi00Mi42Ny0yMC44OC04My43Ni01Ny0xMThDNDY3LjExLTE3LjE4IDM1My44Ni0xMSAyODcuNTUgNjIuNzVjLTI3LjggMzAuOTMtNDIgNjcuNDEtNDQuMiAxMDQuNTYtNDEuMTMtMTYuODQtOTIuMy0xOS42Ny0xNDcuNTkgNi4yLTcwLjI0IDMyLjg2LTEyNS42IDEzNi4xMi03NS4wNyAyMzYuMTQgMzYuODIgNzIuOSAxMjguNDkgMTA3LjU3IDE4NyAxMDEuNjRsNDIzLjU3LjEzQzY4OS44MSA1MTYuNzMgNzgwLjQ2IDQ4MiA4MTcgNDA5LjY1YzUwLjU1LTEwMC4wMi00LjgxLTIwMy4yOC03NS0yMzYuMTR6bTE0LjU5IDIwOS4yM2MtMjEuNTUgMzkuNy01OC43NSA1NC43My0xMDAuNzcgNTguNTRINTA2LjU5Yy0xOS4zOSAyNC40NS00Ny4zNCA0My41OC04Ny41NSA0My41OC0zNS44MyAwLTY2LjQyLTE1LjI1LTg3LjU1LTQzLjU4bC0xNDggLjE0Yy00Mi42Ni0zLjU4LTgwLjUyLTE4LjQ5LTEwMi4zNC01OC42OC0zMS44NC01OC42Ni02LjU4LTEyNS40NSA0OC4zNy0xNTIuMzJzMTIyLTEuODUgMTQ4IDU0LjY3YTExNC4yOCAxMTQuMjggMCAwIDEgNi4xNyAxOC4xNnM0LjIzLTUgNC45My01Ljc3YzIwLjQ2LTIxLjU3IDMzLjUzLTI5IDUzLjMyLTM5LjkyYTkxLjY5IDkxLjY5IDAgMCAxLTEzLjc4LTE2LjM2Yy0uNTctMS0xLTEuODEtMS4yMy0yLjEyLTIzLjE2LTM0LjMyLTI2LjcxLTg5LjgyIDkuMjQtMTMxLjg0QzM3NS41MiA2MS4yIDQ0Mi42OCA1Ni45MyA0OTAgOTUuNjZjMzEuODggMjYuMDggNTIuMTkgNzkuNTYgMjcuNjMgMTMxLjhsLS4wNy4xcy04LjU0IDE3LjkzLTIxLjc4IDMwYzE5Ljc5IDExIDMyLjg2IDE4LjM1IDUzLjMyIDM5LjkyLjcuNzQgNC44OCA1LjczIDQuOTMgNS43N2ExMTUuMyAxMTUuMyAwIDAgMSA2LjE3LTE4LjE2YzI1LjkyLTU2LjUyIDkzLTgxLjU0IDE0Ny45NS01NC42N3M4MC4yMyA5My42NiA0OC4zOSAxNTIuMzJ6Ii8+PC9zdmc+');
--ces-warp-logo-bg: transparent;
--ces-warp-bg: var(--ces-color-brand);
--ces-warp-bg-hover: var(--ces-color-brand-strong);
--ces-warp-bg-active: var(--ces-color-brand-stronger);
--ces-warp-border: var(--ces-color-default-background);
--ces-warp-border-hover: var(--ces-color-default-background);
--ces-warp-border-active: var(--ces-color-default-background);
--ces-warp-text: var(--ces-color-inverted-text);
--ces-warp-text-hover: var(--ces-color-inverted-text);
--ces-warp-text-active: var(--ces-color-inverted-text);
}