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

The steps to create a default theme and a reseller theme are very similar. But for a reseller you can also configure domains and subdomains. You can create multiple themes of each type, but you can set one default theme as active and one theme per reseller only.

In Abiquo 6.1.3+, you can create a theme for a reseller and configure the domain and login information. Then you can allow the reseller admin to modify the other configuration only.

In Abiquo 6.1.3+, the new privilege to Manage theme login configuration enables users to manage Domains, Login CSS configuration, and Cookies bar configuration.

Privileges: Manage default themes or Manage reseller themes, Manage theme login configuration

Before you begin:

Prepare your images.
Add your images to a theme img folder on the Abiquo server or another web server and obtain the path to the image.
For example: theme/abicloudDefault/img/imageName.png or https://url/img/imageName.png.

To create or modify a theme:

Go to Users → Themes management for All enterprises or a reseller enterprise
Click a button to clone or add a theme, or select an existing theme and edit it.
Complete the dialog.
Enter the Name of the theme. The name must be unique
Optionally, for a reseller theme, for Domains, add domains/subdomains for login to the theme:
1. In Abiquo 6.1.3+, you will need the Manage theme login configuration privilege
2. Don’t include the protocol, only the domain/subdomain value (e.g: www.abiquo.com, demo.abiquo.com, example.com/users/)
3. You can define each domain or subdomain for one reseller theme only
4. The administrator can can prohibit the use of a list of domains with an Abiquo Configuration property on the API server
Select if the theme will be Active
To use this theme in the UI, select Active theme
Edit CSS configuration.
You can edit in basic mode (by default) or advanced mode. If you use advanced mode, you can customize more theme details (see next section).
To check the theme, click Test theme, then Stop testing theme
To update the theme, click Save

Changes to the theme will display after the user refreshes their browser window.

Theme CSS sections and element configuration

This section describes all the sections and elements that you can configure when creating or editing a theme.

For some images, you can set a value of none to use no image or remove the default image.

For improved theme rendering, some values must be a tint value of the main color. For color values marked with ** (double asterisk), use the helper tool to set the recommended value.

Section (modes, login)	Element	UI element
Main CSS configuration (basic/advanced)	Colors Main color Secondary color	These two colors will be used to set different elements in CSS classes. In basic mode, colors will be assigned automatically. In advanced mode, user clicks the Apply buttons to assign colors.
	Enterprise logo Recommended size: 50 px x 50px
Login CSS configuration (basic/advanced, login)	Main login logo path background-image padding-bottom
	Main login background background-image background-color
	Left section background background-image background-color color (text color)
Cookies bar configuration (advanced, login)	Bottom cookies bar background-color color (text color)
	Bottom cookies ‘I understand’ button background-color color (text color)
	Bottom cookies ‘I understand’ button (hover) background-color color (text color)
	Bottom cookies ‘policy’ buttons background-color color (text color)
	Bottom cookies ‘policy’ buttons (hover) background-color color (text color)
Buttons, checkboxes and links CSS configuration (advanced)	Main button background-color border-color
	Main button (disabled) background-color border-color
	Main button (hover) background-color border-color
	Active button background-color **
	Link button color
	Checkbox background-color border-color
Lists, pagination and grids CSS configuration (advanced)	Pagination number color color
	Main list selected item background-color ** color
	Grid header background-color color
	Grid selected row background-color color
Popup CSS configuration (advanced)	Popup header color background-color
	Popup left menu background-color color
Other elements CSS configuration (advanced)	Selected tab underline color border-color
	Scroll CHROME THUMB background-color border-radius
	Scroll CHROME HOVER background-color
	Scroll Firefox - General style background-color

Themes flowchart

This 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.