Themes management

Introduction to themes management

The Abiquo platform can manage enterprise tenants directly, or with a reseller hierarchy. Abiquo supports branding of the UI for all enterprises with a default theme, and for resellers and their customers.

In previous versions, for custom themes, developers created the branding files, then administrators loaded them and configured the UI to display them. With this new theme management feature, you can easily manage themes directly in the Abiquo UI, except for a few minor details.

This feature focuses on making branding configuration easier for resellers, and it includes the management of themes for reseller domains and subdomains.

The Abiquo branding feature with CSS files is still available and you can use it as before to create advanced customizations using CSS. The styles you create with the theme management feature will load with priority over the styles you create with Abiquo CSS branding. See Themes flowchart and Extra configuration below.

Display themes management view

There are two types of themes: the default theme and reseller themes.

The Default theme will load if no others themes (for resellers) are active.
Reseller themes are for resellers and their customer enterprises. The platform will load the reseller theme when it is active. You can also set a reseller theme for domains and subdomains.

Privileges: Manage default themes or Manage reseller themes

To display themes:

Go to Users view
For the default theme, in the Enterprises list, select All
OR
For a reseller theme, select a Reseller enterprise
Go to Themes management

Create or modify a theme

For details of how to create a theme, see:

Themes flowchart

The theme management feature is a complete solution to customize themes. The following diagram gives a global view of how theme management works.

Customize the preloader

As the UI loads, the platform will display progress on a loading bar with the preloader.

You cannot customize the preloader as part of a UI theme because it loads before the API can send the theme.

To customize the preloader for your whole platform, use CSS.

Modify the preloader CSS file, for example, as shown here.

"open ui_path/lib/pace/loading-bar.css"
:root {
  --main-color: #4B0F1E; //Replace this value with your value
}

Extra configuration

The theme management feature lets you configure limited CSS classes only so it is easy to use. If you need an extra level of customization (rounded buttons, change login section position, etc….), you can use another CSS file to define these changes.

Adding this extra level of customization is at your own risk if the CSS file is not well formatted or if the definitions are not correct

To create extra configuration:

Create your theme following the instructions for Abiquo CSS Branding in the Abiquo branding guide
In the theme folder, create a symbolic link, named default to point to your default theme to mark it as the default. For example, for a theme called my_default_theme.
```
> theme/ ln -s my_default_theme default
```
For example, for the empty theme.
```
> theme/ ln -s empty default
```

Note that Tomcat does not allow access to symbolic links by default and you will need to enable the allowLinking property.
See https://tomcat.apache.org/tomcat-9.0-doc/config/resources.html

Or if you do not wish to use a symbolic link (e.g. for security reasons), in the theme folder, rename or copy the folder of the theme you would like to use as the default to create a default folder.

Remember to check the file ownership and access settings because the Abiquo Tomcat server will need to access the branding files.