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 imagelogo_light(.png)
: Same as the main logo, but e.g. in our case with white writinglogo_mail(.png)
: The logo which is taken by the default Axon Ivy Engine Email Notificationslogo_small(.png)
: The logo in small (square format recommended), used by e.g. error, login pagesfavicon(.png)
: The logo for the browser tab (square format recommended)background(.png)
: A background image, e.g. used by the Portal login screencustom.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:
And want to have the
logo.png
:And the
custom.css
:1:root { 2 --ivy-primary-color-h: 365; 3 --ivy-primary-color-s: 96%; 4 --ivy-primary-color-l: 45%; 5 --ivy-primary-dark-color: hsl(365, 96%, 35%); 6}
If we configure it correctly we will get the following result: