The Abiquo HTML 5 user interface can be branded for the login screen and at the tenant level with multiple different themes.
At the login screen, Abiquo uses the default theme. To customize the login screen, create a theme that styles the login elements and set it is as the default theme.
To configure more than one theme with different URLs for each theme, see Abiquo UI theme per subdomain
The platform stores the themes as part of the user interface in the theme folder. The base theme is called abicloudDefault.
To create themes, copy the sample_theme folder, rename it with the new theme name, and customize the CSS as described in this documentation. The sample CSS is not suitable for use in Abiquo directly. The sample_theme_2 file contains color examples.
Note that the platform overwrites the abicloudDefault, sample_theme and sample_theme_2 files in every release.
This directory listing contains the CSS files for the default theme, which include the files for remote access (note that theme_novnc.css is deprecated).
The CSS files for branding are described in the following table.
|theme_guacamole.css||Guacamole remote access console. |
The platform will add the VM label, or friendly name, in the browser window above the console.
|theme_wmks.css||WMKS remote console|
A new theme may include both image files and CSS.
The image files used by Abiquo in the sample theme can be used as a reference when developing your images. The image files are described in the Sample Theme Image Reference
As mentioned above, the Abiquo sample_theme contains CSS to modify the theme for enterprise branding and the sample_theme_2 contains examples with other colors.
To get you started, here are some tips for working with CSS.
You can replace the icons of the top menu bar with your own icons that are 30x30 pixels in size. You can use an icon sheet or individual images. An icon sheet is the more efficient option.
Add the icon sheet file to the img directory and use CSS coordinates to reference the location of each icon on the sheet. For an example of the icon sheet, see Sample Theme Image Reference
Here is an example of the CSS used to reference the virtual datacenter icon in the icon sheet.
This means that the top left-hand corner of the icon is at the coordinates (0,-90).
The CSS to load the main menu buttons in the same format as the Abiquo icon sheet is as follows. We recommend that you copy the latest version of this CSS from the UI using developer tools in your browser.
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
The default logo displayed in the top-left corner of the screen. If an enterprise doesn't have a logo defined by editing the enterprise, Abiquo will use this one. Search for "abiquo_logo.png" and replace it with your logo name. Then add your logo file in the img directory.
Change the font color for the main menu buttons. Search for the following CSS and replace the colors for the different link states as required.
Change the font color for the user's enterprise name in the main menu. Search for the following CSS and replace 99999 with a valid web color.
Change the background color for the header menu. Search for the following CSS and replace the color as you prefer.
Change the background color for the footer menu from the default of #333333.
As you can see, the default style uses the same colors for several similar elements and you can perform a search and replace for these multiple elements.
Change the font color for the left side list by searching for and replacing the following colors
Change the color of the user name at the right of the top menu bar
Change the color of the popup header bar
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 client.themes UI property in the /var/www/html/ui/conf/client-config-custom.json file accordingly.
Add the themes in the order they will appear in the Edit enterprise popup. The abicloudDefault theme must be the first on the list, or the Abiquo UI will not run.
For example, here we have added abicloudDefault, then blue_theme and green_theme:
In Users view, edit the enterprise
Enter the Enterprise logo with the relative path from the folder where it is located, e.g. theme/blue_theme/img/abiquo_gray.png
After you have tried some basic changes, the Abiquo style sheet PDF can help you to visualize the CSS elements that you need to change to achieve a specific look.
Reference document for Abiquo branding:
Remember that you can also use your browser's web developer tools to identify CSS elements.
To style the login zone, set a default theme. The platform will also use this theme for any enterprises without their own themes. So if all your tenants will have the same theme, you can create enterprise branding in this theme too and set it as the default.
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. See https://tomcat.apache.org/tomcat-8.0-doc/config/resources.html#Common_Attributes
Remember to check the file ownership and access settings, because the Abiquo Tomcat server will need to access the branding files.
If the administrators managing tenants are not cloud administrators, remember to assign branding privileges in Abiquo.
In Users View, check that the users have the "Manage enterprises" and "Modify enterprise theme" privileges. See Manage Roles
This is an essential step for the correct display of the 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.