Changes to branding in Abiquo 3.8
Abiquo 3.8 introduces noVNC as the default remote access application. The noVNC client is an HTML browser app. You can style this app with a stylesheet. See Branding noVNC
Abiquo themes have two zones: unsecured and secured
Prior to log in, Abiquo displays the unsecured zone theme.
When a user logs in, Abiquo displays the appropriate secured zone theme for the user's enterprise.
To configure more than one unsecured zone theme with different URLs for each theme, see Abiquo UI theme per subdomain
Your themes will be stored in the theme folder. The default theme is called abicloudDefault. The sample theme you can copy and rename to customize Abiquo is called sample_theme.
There is an example of a custom test with other colors in the sample_theme_2 file.
Abiquo will overwrite the default files (abicloudDefault, sample_theme and sample_theme_2) in each new release.
The sample_theme folder contains the CSS to customize Abiquo but you must copy and rename the folder. The sample CSS is not suitable for use in Abiquo directly.
The image files used by Abiquo in the sample theme can be used as a reference when developing your images. See the Sample Theme Image Reference
You can use CSS to style the Abiquo user interface.
The secured zone is the part of the application that users access after logging in.
You can customize the main menu buttons with an icon sheet or with individual images. The main menu buttons are part of the secured zone theme that your users will see after login.
An icon sheet is more efficient than a group of images.
You can replace the icons of the top menu bar with your own icons of size 30x30 pixels. If you already have an icon image sheet from previous versions, add the file to the img directory and copy the existing CSS coordinates (using developer tools in your browser) to reference the location of each icon on the 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 Abiquo sample_theme contains CSS to modify the theme for enterprise branding and the sample_theme_2 contains a custom test with other colors.
Cascading Style Sheets
Copy the sample_theme folder to a new folder for your new theme. Make a note of the theme name in order to add it to Abiquo later.
Here are some branding examples to help you get started.
Edit the new theme and modify the following elements for an enterprise theme. Edit the "theme_secured.css" file and change the following items.
The following examples were defined from the development version of the CSS and there may be some changes in 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.
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
The CSS to load the main menu buttons if they are in the same format as the Abiquo icon sheet is as follows.
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 ensure the theme is properly served, restart the Apache daemon
For example, here we have added abicloudDefault, then the blue and green themes.
After you refresh the page (e.g. log out and log back in again), you will see the new secured theme. To ensure the theme is properly loaded, Abiquo recommends that users clear the browser cache.
The theme for the unsecured zone is the only theme visible before users log in.
To help you get started you can edit the "theme_unsecured.css" file and modify the following elements, which are the basic elements of the unsecured zone theme.
Edit the main background color and edit the watermark image. Add your watermark file to the img folder. Note that these changes can be overridden with changes to the secured zone theme but the watermark generally won't be displayed in the secured zone due to the solid backgrounds defined by default.
Edit the logo on the login dialog and the size of the logo image (by default 50% 50%). Remember to add your logo to the img folder.
To give you an idea of the type of images used, the images that appear in the sample unsecured zone theme are described in the Sample Theme Image Reference. After you have prepared your theme, you can deploy it on the Abiquo server.
Copy the new theme to the Abiquo UI server in the theme folder (by default this is /var/www/html/ui/theme) and make sure permissions will allow the Apache daemon to access the file.
Edit index.html and add the CSS link.
You MUST add this as the LAST CSS to load, so that it has priority over the default Abiquo theme
Note that secured zone CSS files with enterprise themes will have priority over the unsecured zone CSS files because Abiquo will load the secured zone CSS files last
To ensure the new theme is correctly served, restart the Apache daemon:
To see the new theme, users should clear the cache and reload the Abiquo UI.