Abiquo Documentation Cookies Policy

Our Documentation website uses cookies to improve your experience. Please visit our Cookie Policy page for more information about cookies and how we use them.


Documentation

Skip to end of metadata
Go to start of metadata

 

Introduction to HTML 5 UI branding

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 branding zones

Abiquo themes have two zones: unsecured and secured

  • The unsecured zone includes all the elements  prior to user login
    • An unsecured zone style sheet can modify elements in both the unsecured zone and the secured zone
  • The secured zone includes all elements after user login
    • An enterprise style sheet is a secured zone style sheet
    • A secured zone style sheet will override an unsecured zone style sheet 

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.  

Custom themes with custom URLs

To configure more than one unsecured zone theme with different URLs for each theme, see Abiquo UI theme per subdomain  

Theme structure

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.

app/theme/
|-- abicloudDefault
|-- sample_theme
| |-- css
| | |-- theme_secured.css
| | --- theme_unsecured.css
| \-- img
| |-- abiquo_gray.png
| |-- abiquo_login.png
| |-- abiquo_watermark.png
| |-- favicon.ico
| \-- mainmenu-buttons.png
\-- sample_theme_2
|-- css
| |-- theme_secured.css
| \-- theme_unsecured.css
\-- img
|-- abiquo_login.png
\-- abiquo_watermark.png

 

Description of image files

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

Abiquo HTML 5 UI Branding With CSS

You can use CSS to style the Abiquo user interface.

Design a new theme for the secured zone

The secured zone is the part of the application that users access after logging in.

Main Menu Button Images

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.

.main-menu-section-link-icon-library {
  background: url(../../abicloudDefault/img/mainmenu-buttons.png) no-repeat 0 -90px;
}

This means that the top left-hand corner of the icon is at the coordinates (0,-90). 

Sample theme files

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

  • Always copy the sample file to a new file and rename it
  • Always work with classes because IDs will change from one version to the next
  • Cascading Style Sheets are hierarchical, so do not change the order of styles in the file unless you know what you are doing
    • At times, changes to CSS may result in unexpected side effects
  • If you have never worked with CSS before:
    • Start with basic changes to the elements in the style sheets, for example colors.
    • Consider reading about how CSS works and doing some tutorials before you begin advanced branding

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.


  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

    .main-background-color {
        background-color: #FFFFFF;
    }


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

    .main-menu-logo .ab-logo.default-cover {
        background: transparent url("../img/abiquo_logo.png") no-repeat 50% 10px;
    }

    Then add your logo file in the img directory.

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

    .main-menu-section-link {
        color: #FFFFFF;
    }
    .main-menu-section-link:visited {
        color: #FFFFFF;
    }
    .main-menu-section-link:hover {
        color: #FFFFFF;
    }
    .main-menu-section-link-active {
        color: #ec9032;
    }
    .main-menu-section-link-active:visited {
        color: #ec9032;
    }
    .main-menu-section-link-active:hover {
        color: #ec9032;
    }
  4. 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.

    .main-menu-enterprise-label {
        color: #999999;
    }
  5. Change the background color for the header menu. Search for the following CSS and replace the color.

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


  6. Change the background color for the footer menu from the default of #333333.

    .main-footer {
        background-color: #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.

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

    .side-menu-font {
        color: #000000;
    }
    .side-menu-font:hover {
        color: #000000;
    }
    .side-menu-font-active {
        color: #FFFFFF;
    }
    .side-menu-font-active:hover {
        color: #FFFFFF;
    }


  8. Change the color of the user name at the right of the top menu bar

    .main-menu-user-name-link {
        color: #ec9032;
    }


  9. Change the color of the popup header bar

    .modal-header {
        background-color: #efa253;
    }
Loading and styling main menu buttons

The CSS to load the main menu buttons if they are in the same format as the Abiquo icon sheet is as follows.

 Click here to expand...
/* 30x30 pixel icons, loaded as background.*/

.main-menu-section-link-icon-home {
   background: url(../img/mainmenu-buttons.png) no-repeat 0 0;
}

.main-menu-section-link-icon-structure {
   background: url(../img/mainmenu-buttons.png) no-repeat 0 -30px;
}

.main-menu-section-link-icon-data {
   background: url(../img/mainmenu-buttons.png) no-repeat 0 -60px;
}

.main-menu-section-link-icon-library {
   background: url(../img/mainmenu-buttons.png) no-repeat 0 -90px;
}

.main-menu-section-link-icon-users{
   background: url(../img/mainmenu-buttons.png) no-repeat 0 -120px;
}

.main-menu-section-link-icon-pricing{
   background: url(../img/mainmenu-buttons.png) no-repeat 0 -150px;
}

.main-menu-section-link-icon-events{
   background: url(../img/mainmenu-buttons.png) no-repeat 0 -180px;
}

.main-menu-section-link-icon-configuration{
   background: url(../img/mainmenu-buttons.png) no-repeat 0 -210px;
}

.main-menu-section-link-icon-home-active {
   background-position: -40px 0px;
}

.main-menu-section-link-icon-structure-active {
   background-position: -40px -30px;
}

.main-menu-section-link-icon-data-active {
   background-position: -40px -60px;
}

.main-menu-section-link-icon-library-active {
   background-position: -40px -90px;
}

.main-menu-section-link-icon-users-active {
   background-position: -40px -120px;
}

.main-menu-section-link-icon-pricing-active {
   background-position: -40px -150px;
}

.main-menu-section-link-icon-events-active {
   background-position: -40px -180px;
}

.main-menu-section-link-icon-configuration-active {
   background-position: -40px -210px;
}
Branding style sheet reference

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.

Deploy a secured zone enterprise theme in the Abiquo UI
  1. On the Abiquo server, the UI themes are located in the folder /var/www/html/ui/theme
  2. Copy the new theme's folder from your working system to the theme folder on the Abiquo server (or the server where the UI is running) and make sure permissions will allow the Apache daemon to access the file. 
  3. To ensure the theme is properly served, restart the Apache daemon

    service httpd restart
  4. To enable this theme to be selected for enterprises, edit the client-config-custom.json file
    • By default this file can be found in the config folder inside the UI folder
  5. First you must specify abicloudDefault theme, or the Abiquo UI will not run
  6. Add your themes in the order they will appear in the Edit enterprise popup.
    • For example, here we have added abicloudDefault, then the blue and green themes.

      "client.themes" : [
      "abicloudDefault",
      "blue",
      "green"
      ]

       

  7. In Users view, edit the enterprise and select the secured theme from the pulldown menu.

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.

Design the theme for the unsecured zone

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. 

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

    body {
        background-color: #ec9032;
        background-image: url("../img/abiquo_watermark.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 50%;
    }
  2. 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.

    .login-title {
        background: transparent url("../img/abiquo_login.png") no-repeat 50% 50%;
    }

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.

Deploy the unsecured zone theme

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

    <link rel="stylesheet" type="text/css" href="theme/my_custom_theme_X/css/theme_unsecured.css" />

    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:

service httpd restart

To see the new theme, users should clear the cache and reload the Abiquo UI.