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, 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 the 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 themes you create with the theme management feature will load with priority over the themes you create with Abiquo CSS branding.

Display themes management view

Privileges: Manage default themes or Manage reseller themes

To display Themes management view, go to Users → Themes management.

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

Default theme

The Default theme will load if no others themes (for resellers) are active.

Privileges: Manage default themes

To display Default themes:

Go to Users view
In the Enterprises list, select All
Go to Themes management

Reseller themes

Reseller themes are for resellers and their customer enterprises. The platform will display the reseller theme when it is active. You can also set a reseller theme for domains and subdomains.

Privileges: Manage reseller themes

To display reseller themes management view:

Go to Users view
In the Enterprises list, 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.

Privileges: Manage default themes or Manage reseller themes

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
- To clone a theme, click the duplicate clone button.
- To create a new theme, click the + add button
Complete the dialog.
1. Enter the Name of the theme. The name must be unique
2. Optionally, for a reseller theme, add domains/subdomains that will use the theme
  - Don’t include the protocol, only the domain/subdomain value (e.g: www.abiquo.com, demo.abiquo.com, example.com/users/)
  - You can define a domain or subdomain for one reseller theme only
3. Select if the theme will be Active
4. Start editing 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).

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)	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)	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)	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 workflow and extra configuration

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

Customize the preloader

You cannot customize the preloader with this new UI feature because it’s the first element loaded before API communication is ready. But, you can customize the preloader for your whole platform with CSS.

To customize the preloader, modify the CSS file.

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

Extra configuration

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

The feature allows you to configure limited CSS classes to make it 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.

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.