Html Dialog Themes

With themes the visual appearance of the application such as the color scheme and the decoration of components can be changed. PrimeFaces comes with a number of predefined themes where you can choose from. Or you can create your own theme using the theme generator tool jQuery ThemeRoller. To learn more about PrimeFaces themes, the web site PrimeFaces Themes is the right starting point:

The theme called modena-ivy is configured as the default. New dialogs will be created with the serenity-ivy theme, if you choose a standard version 8 layout. However, you can easily configure another default theme with the following steps:

The PrimeFaces Community Themes and Serenity Themes are already included in the product. To use a own theme copy your themeXY.jar file into the folder /webapps/ivy/WEB-INF/lib of Designer and Engine respectively
Edit the theme setting parameter primefaces.THEME in the file /webapps/ivy/WEB-INF/web.xml
The parameter primefaces.THEME can also be set as a head attribute in your template.xhtml file (works only with IvyPrimefacesThemeResolver).
```
<h:head>
    ...
    <f:attribute name="primefaces.THEME" value="#{theme}"/>
    ...
</h:head>
```
Restart Axon.ivy

Tip

By using the ch.ivyteam.ivy.jsf.primefaces.IvyPrimefacesThemeResolver the theme can be configured by application and session. See web.xml or app.yaml

Serenity Themes

If you choose a serenity theme, you have the possibility to choose all default serenity themes or the serentiy-ivy theme. If you do so you have to import an additional layout.css file:

e.g. serenity-lime theme

<h:head>
  <f:attribute name="primefaces.THEME" value="serenity-lime" />
  <h:outputStylesheet name="css/layout-lime.css" library="serenity-layout" />
  <h:outputScript name="js/layout.js" library="serenity-layout" />
  ...
</h:head>

or the serentiy-ivy theme

<h:head>
  <f:attribute name="primefaces.THEME" value="serenity-ivy" />
  <h:outputStylesheet name="css/layout-ivy.css" library="serenity-layout" />
  <h:outputScript name="js/layout.js" library="serenity-layout" />
  ...
</h:head>

Color Customizing

In our age, customizing is important so that a customer feels at home when he opens a page where the company colors are used. And fortunately for everyone, new technologies makes customizing much easier.

If you use our serenity-preview theme (this will be the default serenity-ivy theme in the next major release), you have the possibility to easily change the colors according to your wishes. For this purpose, we provide you css-variables that you can overwrite.

Warning

The serenity-preview theme is available with 8.0.4, but it is only a preview theme and may not work in every browser as expected.

To do so, you have to add a new css file to your resources and import it into your template:

<h:outputStylesheet name="layouts/styles/color-customize.css" />

Within this file you can overwrite some colors. For example, the primary-color:

:root {
   --primary-color-h:195;
   --primary-color-s:100%;
   --primary-color-l:29%;
   --primary-color:hsl(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l));
}

Note

We use hsl colors, and you will notice that some of them are split into the individual values. These are important for some color effects (e.g when you move the mouse over a button).

For all possible variables, have a look at our HtmlDialogDemos. These use an additional file color-customize.css to override colors.