User Interface Branding

To make the branding work in your HTML Dialogs, be sure to use the latest default templates or your pre-existing templates have been migrated to the branding concept.

Apply Custom Styles and Branding

In HTML Dialogs, all branding resources are loaded css-variables the ivy-branding library. This is used by default in all default templates. If you want to use it in your dialogs or own templates, too, you can do so as follows:

1<!-- favicon -->
2<link rel="shortcut icon" href="#{resource['ivy-branding:favicon']}" />
3
4<!-- logo -->
5<p:graphicImage name="logo" library="ivy-branding" alt="Logo" />
6
7<!-- custom.css -->
8<h:outputStylesheet name="colors.css" library="ivy-branding" />

Of course, you can also define your own images or CSS files. Subsequently, you can load these using the ivy-branding resource loader. For example, you can change the image of your custom error dialog depending on the current application.

Resources

The following resources are currently used by the Axon Ivy Engine, the HTML Dialogs and the Portal:

  • logo(.png): The main logo image

  • logo_light(.png): Same as the main logo, but e.g. in our case with white writing

  • logo_mail(.png): The logo which is taken by the default Axon Ivy Engine Email Notifications

  • logo_small(.png): The logo in small (square format recommended), used by e.g. error, login pages

  • favicon(.png): The logo for the browser tab (square format recommended)

  • background(.png): A background image, e.g. used by the Portal login screen

  • custom.css: A general CSS file with variables to customize colors, etc.

Use custom.css to override css-variables. If you’re interested in more customization, there are more variables provided by the Portal.

Warning

CSS variables are only supported in the themes serenity-ivy and freya-ivy.

Tip

We support all image file formats known to browsers, e.g. .jpg, .png, .svg. However, if there are multiple files with different extensions (e.g. logo.png and logo.svg) in the same directory, the first found by the OS will be used.

Example

Let’s say we are in the company ACME and we want to brand a dialog with our logo and primary color:

  • So, we have the dialog:

    branding-default-dialog

  • And want to have the logo.png:

    branding-acme-logo

  • And the custom.css:

    1:root {
2  --primary-color-h: 365;
3  --primary-color-s: 96%;
4  --primary-color-l: 45%;
5  --primary-dark-color: hsl(365, 96%, 35%);
6}

  • If we configure it correctly we will get the following result:

    branding-acme-dialog