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

The Abiquo branding system has been changed to enable customers to easily perform their own branding of the Abiquo user interface.

Branding now uses cascading style sheets (CSS). Customers can edit and personalize a .css file to apply branding changes.

This section contains a brief description of the new system for advanced users.

For full details of how to customize a theme, see Abiquo Branding Guide and for how to add a theme to Abiquo, see Abiquo Branding Admin Guide

New branding file organization

Branding now has a different structure. The branding files are located in the theme folder under the main UI folder (by default this is /var/www/html/ui)

app/theme/
|--- abicloudDefault
|--- sample_theme
|--- sample_theme_2
|--- my_custom_theme_1
|--- my_custom_theme _2
...
\--- my_custom_theme_n

The abicloudDefault theme is the basic Abiquo theme. Do not edit this theme.

DO NOT EDIT abicloudDefault. When Abiquo makes changes in future versions, this file will be overwritten during the upgrade and your changes will be lost.

The Sample Theme

The sample_theme is a template that Abiquo will overwrite in each new release.

The sample_theme contains a list of classes that you can use to customize the branding data.

This theme is not suitable for using directly in Abiquo. To create your own theme, you must copy and rename this theme, customize it and add it to Abiquo following the Abiquo instructions.

The sample theme folder structure is as follows.

\-- sample_theme
    |-- css
    |   |-- theme_secured.css
    |   \-- theme_unsecured.css
    \-- img
        |-- abiquo_gray.png
        |-- abiquo_login.png
        |-- abiquo_watermark.png
        |-- favicon.ico
        \-- mainmenu-buttons.png

You can easily create your own themes as described below.

Create a new theme

To create a theme:

  1. Copy the sample_theme or sample_theme_2 folder and rename it with the desired name
    • alternatively, create a new folder and create your own CSS files

      \-- my_custom_theme_X
          \-- css
              |-- theme_secured.css
              \-- theme_unsecured.css
  2. Edit the CSS files 
    • Change colors, backgrounds, etc
    • If a class is deleted, the default Abiquo theme is resolved for that class
  3. Add your own image files to the img folder and style them as required
  4. To add the theme to Abiquo (i.e. to make the theme selectable on the Create or Edit enterprise dialog), edit the client-config-custom.json file. Add the theme name into the "client.themes" variable

    	"client.themes" : [
           "abicloudDefault",
           "sample_theme",
           "sample_theme_2"
       ]

    The enterprise theme will be available for selection by a user with the appropriate privileges (Manage enterprises and Modify enterprise theme)

  5. To load the unsecured theme, 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" />

      Abiquo will load the secured CSS after the unsecured CSS, so the secured CSS will have priority

  6. Reload the Abiquo user interface in your browser

Upgrade Abiquo

The procedure to upgrade Branding when upgrading the Abiquo UI client is:

  1. Back up your theme folders
  2. Upgrade Abiquo UI client
  3. Copy your themes from the backup to the "theme" folder
  4. Check that the client-config-custom.json file has the "client.themes" variable with your theme names
  5. Edit index.html to load the unsecured theme
  6. Reload the Abiquo user interface page
  7. Check and adjust branding styles
  8. Restart the Apache daemon to load the new files into the cache
  9. Notify users that they should clear their browser cache