The Abiquo HTML 5 user interface can be branded for the login screen and at the tenant level with multiple different themes.
The login screen uses the default theme
To customize the login screen, create a theme that styles the login elements and set it is as the default
To configure more than one theme with different URLs for each theme, see Abiquo UI theme per subdomain
This directory listing contains the CSS files for the default theme, which include the files for remote access
The platform stores the themes in the user interface files in the theme folder.
The sample theme CSS is not suitable for use in Abiquo directly.
The platform overwrites the default and sample theme folders at every release.
To create a theme:
Your new theme may include both image files and CSS.
To get you started, here are some tips for working with CSS.
The platform loads the images on the main menu buttons from the Abiquo icon sheet. For full details, see the Sample Theme Image Reference.
To customize the main menu buttons, you can use an icon sheet or individual images:
to reference the location of each icon on the sheet, for example
This means that the top left-hand corner of the icon is at the coordinates (0,-144).
or to load an individual icon from its own image file
To load the whole image, you must use background-position of 0 0.
We recommend that you copy the latest version of this CSS from the UI using developer tools in your browser.
To set the default logo for all enterprises:
The space reserved for the logo file is 48 x 48 pixels. See Sample Theme Image Reference
Add your logo file to the your main theme's img directory
Here are some branding examples to help you get started. When you copy the sample_theme folder to a new folder, make a note of the folder name because it is the name of the theme and you will need to configure and select it in Abiquo later.
Edit your theme.css file and modify the following elements to style the UI for the enterprise.
The following examples may differ from the sample files. The sample files will be updated whenever necessary but these examples will only be updated occasionally.
Change the background color of the application. Search for the CSS class ".main-background-color" and change FFFFFF to another valid web color, for example, light grey EEEEEE
Change the background color for the main menu. Search for the following CSS and replace the color as you prefer.
Change the font color for the left side list by searching for and replacing the following colors
Change the color of the primary font
Change the color of the primary button
Change the color of the popup header bar
Optionally change the background color of the toast error messages
To set custom images on the login page:
Login logo CSS
Login background CSS
To deploy an enterprise theme in the Abiquo UI, do the following steps. (Note that you can find more detailed instructions in the Abiquo Branding Admin Guide)
Copy the new theme's folder to the /var/www/html/ui/theme folder on the server where the UI is running.
Make sure Apache is able to access all the theme files.
To enable this theme to be selected for enterprises:
Edit the /var/www/html/ui/conf/client-config-custom.json file
Go to the client.themes UI property. The abicloudDefault theme must be the first on the list, or the Abiquo UI will not run.
Add your themes in the order they will appear in the Edit enterprise popup.
For example, here we have added abicloudDefault, then blue_theme and green_theme:
To ensure the new UI properties are properly loaded, log out from the UI, clear your browser cache and log in to Abiquo again
Go to Users view → create or edit the enterprise
For the Enterprise logo, enter the relative path from the UI folder, e.g. theme/blue_theme/img/abiquo_gray.png
Use your browser's web developer tools to identify HTML elements and CSS styles and customize them as required.
To style the login zone use a default theme. The platform will also use this theme for any enterprises without their own themes.
To set a default theme, which will persist after upgrades, do one of the following steps:
In the theme folder, create a symbolic link, named 'default', which points to the desired theme to mark it as the default:
Note that Tomcat does not allow access to symbolic links by default and you will need to enable the allowLinking property.
Remember to check the file ownership and access settings because the Abiquo Tomcat server will need to access the branding files.
If you have an issue with branding, remember to check your CSS, JSON, and file system access for the branding files.
New themes do not display property
You MUST clear your browser cache to correctly display a new theme
All users who have previously accessed the platform should clear the browser cache on their machines before logging in to Abiquo again.To test a new logo and theme, log in again as a user of the enterprise you are branding.