Abiquo branding guide

Changes to branding

See Changes to branding

Introduction to branding

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

• When a user logs in, Abiquo displays the user's theme as defined in the UI

  • If the user’s enterprise is a reseller or a reseller customer, Abiquo uses the reseller theme

  • If the user's enterprise does not have a theme, Abiquo also uses the default theme as defined in theme management

Customize themes in the Abiquo UI

To customize themes in the UI, see Themes management.

For advanced customizations, such as popup corners, login box position, and so on, use Abiquo CSS Branding as described below.

Branding CSS files and folders

This directory listing contains the CSS files for the default theme, which include the files for remote access

The CSS files for branding are described in the following table.

Copy sample theme files to customize

If you wish to perform advanced CSS customizations, copy the sample files and make changes to the CSS.

The platform stores the themes in the user interface files in the theme folder. 

• Base theme: abicloudDefault

• Sample theme: sample_theme

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:

1. Copy the sample_theme folder

2. Rename the folder with the new theme name that will display for the administrator in the Abiquo UI 

3. Optionally copy the CSS files for remote access to the new theme's css folder

   1. theme_guacamole.css 

   2. theme_wmks.css

Design a new theme

You can now use the built-in UI theme design feature to design your themes.
See Themes management.

When you create a theme using CSS files, a new theme may include both image files and CSS.

• The basic UI images and colours are described in this PDF file Abiquo_UI_Style-Images_and_Colors_v600.pdf

• The basic UI image files are also described in the Sample Theme Image Reference.

• You can copy the abicloudDefault img folder from your Abiquo Server to obtain all the default images

• You can style the UI using CSS from the sample_theme

Customize main menu buttons

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:

1. Add the icon sheet file or image files of 24 x 24 pixels to the img folder in your theme 

2. Use CSS

   1. 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).

      .main-menu-section-link-icon-data {
                                          background-image: url(../img/menu-sprite.png);
                                          background-position: 0 -144;
      }

   2. or to load an individual icon from its own image file

      To load the whole image, you must use background-position of 0 0. 

      .main-menu-section-link-icon-data {
                                          background-image: url(../img/MY_VDC_IMAGE.png);
                                          background-position: 0 0;
      }

We recommend that you copy the latest version of this CSS from the UI using developer tools in your browser. 

Set a default logo for all enterprises

To set the default logo for all enterprises:

1. The space reserved for the logo file is 48 x 48 pixels. See Sample Theme Image Reference

2. Add your logo file to the your main theme's img directory

3. In Abiquo, go to Configuration view → General

4. For the Default logo, enter the relative address of your logo file

Branding CSS examples

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.

1. 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

2. Change the background color for the main menu. Search for the following CSS and replace the color as you prefer.

   .main-menu {
       background-color: #333333;
   }

3. Change the font color for the left side list by searching for and replacing the following colors

   .main-menu .centering-container-menu li .main-menu-section-link-active small,
   .main-menu .centering-container-menu li.main-menu-section-link-active a span {
       color: #COLOR_HEX;
   }

4. Change the color of the primary font

   body {
       color: #ec9032;
   }

5. Change the color of the primary button

   .btn-primary {
       background-color: #719e19;
       border-color: #719e19;
   }

6. Change the color of the popup header bar

   .modal-header {
       background-color: #efa253;
   }

7. Optionally, change the background color of the toast error messages

   .toast-success {
     background-color: #51A351;
   }
   .toast-error {
     background-color: #BD362F;
   }
   .toast-info {
     background-color: #2F96B4;
   }
   .toast-warning {
     background-color: #F89406;
   }

Define custom images on the login page using CSS

To set custom images on the login page:

1. Add your files to the theme img folder

2. In the sample-theme.css file, search for the login-logo and login-form_info .card elements

3. For each background-image url, add the relative path of the image file 

4. For the login background, you can also specify the aspect ratio, or style the image further
   
   Login logo CSS

.login-title {
    background-image: url(../img/MY_LOGO.png); 
    background-size: contain;
}

Login background CSS

.login-form_info .card {
   background-image: url(../img/MY_LOGIN_BACKGROUND.png);
   background-size: cover;
   background-position: 50% 50%;
}

Develop advanced branding

Use your browser's web developer tools to identify HTML elements and CSS styles and customize them as required.

Set a default theme for login and enterprises without themes

To style the login zone and any enterprises without their own themes, you can set a default theme.
Abiquo will use the default theme instead of the abicloudDefault theme.

To set the default theme, which will persist after upgrades, do one of the following sets of steps:

• In the theme folder, create a symbolic link, named 'default', which points 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.

Troubleshooting branding

Here are some troubleshooting tips.

• Administrator cannot access branding in the UI
  If the administrators managing resellers are not cloud administrators, assign branding privileges to the users in Abiquo.
  The branding privileges are Manage default themes and Manage reseller themes

• 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.