Integrated branding with Themes management

In Abiquo 6.1 you can now brand the platform in the UI to make branding much easier for resellers and platform owners.

With this feature, from the new Themes management tabs, you can create and apply branding for the whole platform, or for resellers and their customers. You can also manage themes for reseller domains and subdomains.

This feature simplifies the previous branding functionality where developers created branding files for all custom themes and administrators loaded them in the operating system and configured them for use in the UI.

The previous Abiquo branding feature is still available and you can use it, as before, to create advanced theme customizations using CSS.

Abiquo will load themes in the following order:

1. Default theme from CSS file

2. Domain theme (on the login screen)

3. Default theme from themes management tab (after login)

Default themes and reseller themes

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 display the reseller theme when it is active. You can also set a reseller theme for domains and subdomains.

There are two new privileges to work with branding for the platform and resellers.

To manage branding themes:

1. Go to Users view → Themes management tab.

2. To access the default theme, in the Enterprises list, select All; OR
   To access a reseller theme, in the Enterprises list, select a reseller enterprise. Reseller enterprises have an (R) before their name in the UI.

Screenshots of Themes management

Open

Default themes management view

Open

Reseller themes management view

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.

1. Go to Users view → Themes management tab.

2. To access the default theme, in the Enterprises list, select All; OR
   To access a reseller theme, in the Enterprises list, select a reseller enterprise. Reseller enterprises have an (R) before their name in the UI

3. To create a new theme, click + add; OR
   To clone an existing theme, click the clipboard clone button

4. Enter a unique Name for the theme

5. Optionally, for a reseller theme, enter the domains and/or subdomains that will use the theme.
   Do not add protocols. For each domain or subdomain you can only add one theme

6. To make the platform load the theme, select Active

7. Edit the CSS in basic mode (by default) or advanced mode. If you use advanced mode, you can customize more theme elements

8. Optionally, perform advanced manual customizations as described in the https://abiquo.atlassian.net/wiki/spaces/doc/pages/311374572 :

   1. Customize the theme loader for the platform

   2. Add your own CSS file for advanced customizations such as adjustments to the corners of the popups

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 “**”, use the helper tool to set the recommended value.

Themes workflow

This feature is a complete solution to customize themes and the workflow provides an overview of the theme management process.

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:

1. Log in to the UI server

2. Edit the loading-bar CSS file. By default this file is located at /var/www/html/ui/lib/pace/loading-bar.css

3. In the :root section, change the main-color attribute

   :root { --main-color: #4B0F1E; //Replace this value with your value }

4. Optionally, make other advanced modifications as required

5. Save the file

6. Users should clear their browser cache to load the new UI

Advanced CSS configuration

If you need an extra level of customization (rounded buttons, change login section position, and so on), you can use another physical CSS file to define these changes.

To add an advanced CSS configuration:

1. Use the old Abiquo CSS branding process to edit the CSS file for a theme.
   See https://abiquo.atlassian.net/wiki/spaces/doc/pages/311374572

2. Add the CSS file to your theme folder. Remember to check the file ownership and access settings because the Abiquo Tomcat server will need to access the branding files

3. To get Abiquo to load the changes for the whole platform, make the new theme the default theme.
   See https://abiquo.atlassian.net/wiki/spaces/doc/pages/311374572/Abiquo+branding+guide#Set-a-default-theme-for-login-and-enterprises-without-themes