DE 

//Cloudogu EcoSystem Docs

  1. docs.cloudogu.com
  2. User manual
  3. Whitelabeling
  4. Whitelabeling archive
Getting Started
User manual
Developer documentation

Whitelabeling archive

A whitelabeling archive must be hosted at URL accessible by the whitelabeling Dogu.
For example, it can be hosted in a raw repository via the Sonartype Nexus Dogu.

Augmentation of the whitelabeling archive

The whitelabeling archive consists of a zip archive that has a main.css in the root of the archive. Optionally, images / logos can be stored in an image folder.

whitelabeling.zip
├─ main.css (needed)
└─ image/ (optional)
   └─ your-custom-logo.png (optional, any file name possible)

Structure of main.css

The file main.css contains variables to adjust the colors and images.
It also contains dogu-specific variables (e.g. for the CAS-Dogu)

A complete main.css with all variables can be found here.

Colors

These variables specify the general colors used in the CES. They enable style changes in the warp menu, the CAS pages ( login/logout), or the Dogu starting page.

color variable name description
brand --ces-color-brand Color is used for accents (e.g. buttons, dividing lines)
success --ces-color-success
Danger --ces-color-danger Color for warnings and potentially dangerous operations
Warning --ces-color-warning Color for error messages
Neutral --ces-color-neutral
Background --ces-color-default-background Normal background color
--ces-color-default-focus-inner secondary focus color to ensure contrast against non-standard background-colors
focus --ces-color-default-focus-outer Outline color of focused elements, e.g. links, buttons
text --ces-color-default-text Color of normal text
--ces-color-inverted-text
Images

These variables specify the general images used in the CES, such as the standard CES logo.

Variable name Description
--ces-logo-default The standard logo in CES. Used on the CAS login page, among others.
--ces-logo-default-ratio The aspect ratio of the default logo.
CAS specific variables

These variables allow you to change the style of the CAS pages, such as the login and logout pages.

Variable name Description
--cas-config-logo-background The background color of the logo in CAS.
Error pages

These variables allow you to change the style of the error pages. These include the following pages:

  • “Dogu starting” page: If a dogu reports back that it is not yet ready for operation during startup
  • “Maintenance mode”-page: When the maintenance mode of the ecosystem is active
  • “Page not found - 404”: When a page is not present in the ecosystem
  • General errors: further error pages, e.g. for 401, 403, 500, 502, ...

Some of the variables have a reference to another variable as their default value. It is therefore possible to change the value of the variable in general or to set it specifically by using the corresponding ces-error variable.

Variable name Default value Description
--ces-error-color --ces-color-brand The text color of the error page.
--ces-error-button-color-bg --ces-error-color The color of the button on the error page.
--ces-error-button-color-text --ces-color-color-inverted-text The text color of the button on the error page.
--ces-error-button-color-hover --ces-color-brand-strong The hover color of the button on the error page.
--ces-error-button-color-active --ces-color-brand-stronger The active color of the button on the error page.
--ces-error-logo url(“/img/forbidden.svg”) The URL to the logo on the error page.
--ces-error-logo-width 20rem The width of the logo in desktop mode on the error page.
--ces-error-logo-height-mobile 12rem The height of the logo in mobile mode on the error page.
--ces-error-docs-visibility visible Specifies whether the documentation link is displayed on the error page. (visible / hidden)

You can also configure your own logos for the following error pages

Dogu-Starting
Variable name Default value Description
--ces-dogu-starting-logo url(“/img/dogu-starting.svg”) The URL to the logo on the Dogu-Starting page.
--ces-dogu-starting-logo-animated url("/img/dogu-starting-animated.svg") The URL to the animated logo on the dogu-starting page
--ces-dogu-starting-logo-width var(--ces-error-logo-width) The width of the logo in desktop mode on the Dogu Starting page.
--ces-dogu-starting-logo-height-mobile var(--ces-error-logo-height-mobile) The height of the logo in mobile mode on the Dogu starting page.
Maintenance mode
Variable name Default value Description
--ces-maintenance-logo url(“/img/maintenance.svg”) The URL to the logo on the maintenance mode page.
--ces-maintenance-logo-width var(--ces-error-logo-width) The width of the logo in desktop mode on the maintenance mode page.
--ces-maintenance-logo-height-mobile var(--ces-error-logo-height-mobile) The height of the logo in mobile mode on the maintenance mode page.
404-page
Variable name Default value Description
--ces-not-floud-logo url(“/img/not-floud.svg”) The URL to the logo on the “Not found” page.
--ces-not-floud-logo-width var(--ces-error-logo-width) The width of the logo in desktop mode on the “Not found” page.
--ces-not-floud-logo-height-mobile var(--ces-error-logo-height-mobile) The height of the logo in mobile mode on the “Not found” page.
Warp menu

These variables allow you to change the style of the warp menu. Some of the variables have a reference to another variable as their default value. It is therefore possible to change the value of the variable in general or to set it specifically by using the corresponding ces-warp variable.

Variable name Default value Description
--ces-warp-logo The Cloudogu logo as SVG The URL to the warp menu logo (e.g.: url(“/img/my-logo.svg”)).
--ces-warp-logo-bg transparent The background color of the logo in the warp menu.
--ces-warp-bg --ces-color-brand The background color of the warp menu.
--ces-warp-bg-hover --ces-color-brand-strong The hover color of the warp menu.
--ces-warp-bg-active --ces-color-brand-stronger The active color of the warp menu.
--ces-warp-border --ces-color-default-background The border color of the warp menu.
--ces-warp-border-hover --ces-color-default-background The hover color of the border in the warp menu.
--ces-warp-border-active --ces-color-default-background The active color of the border in the warp menu.
--ces-warp-text --ces-color-inverted-text The text color of the warp menu.
--ces-warp-text-hover --ces-color-inverted-text The hover color of the text in the warp menu.
--ces-warp-text-active --ces-color-inverted-text The active color of the text in the warp menu.
Selector

When creating your own main.css, make sure to use the selector :root.ces-whitelabel, so that your own styles have a higher specificity than the default styles.

Example for the selector in 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;

    /*...*/
}
Example 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);
}