Abiquo Branding Admin Guide

This section describes how to manage themes in Abiquo.

Prepare Branding

Back up Abiquo system elements

Abiquo recommends that you perform regular backups of the whole Abiquo platform. However, it may be useful to perform the following quick backup before enabling branding.

Back up the client UI folder

1. Log in to a shell on the Abiquo server with a user with root permissions

2. Make a backup copy of the UI folder

   mkdir /opt/abiquo/quick_ui_backup
   tar cvfz /opt/abiquo/quick_ui_backup/ui_`date +%Y%m%d`.tar.gz /var/www/html/ui/
   

Optionally assign branding privileges in the Abiquo UI

In the Abiquo UI you will see the "Modify enterprise theme" privilege in the Users category on the Privileges screen. This privilege is automatically assigned to a cloud administrator, but you can also assign it to another user that can manage enterprises.

1. Log in to the Abiquo UI as a cloud administrator
2. Go to Users View
3. Click the role of a user with the "Manage enterprises" privilege
4. Check the box to assign the "Modify enterprise theme" privilege to the user 
   
   

Edit Images

You can use these images as a guideline for the image size and type. See Abiquo Style Guide and Sample Theme Image Reference

Upload themes and logos to the Abiquo UI   

Upload themes to the Abiquo UI

1. Compress your theme folder
2. Log in to the Abiquo Server and copy your theme to theme folder
   
   • The theme folder is /var/www/html/ui/theme

   • For example, using wget from the Abiquo Server to a Linux machine

     wget myuser@mymachine:~/Downloads/mytheme_base_theme.tar.gz /var/www/html/ui/theme
     

3. Move or copy any existing theme with this name to another folder name

   cd /var/www/html/ui/theme
   mv my_custom_theme my_custom_theme_backup
   

Extract the theme (which will OVERWRITE any theme with the same name). For example, when the theme was compressed with tar and gzip

tar -zxvf my_custom_theme.tar.gz

Remember to check the file ownership and access settings, because the Abiquo Tomcat server will need to access the branding files.

Set a default theme

You can set a default theme that Abiquo can use to style the login zone and enterprises when no other theme is selected. You cannot select the default theme directly. When you set a default theme, Abiquo still requires the abicloudDefault theme as before. You do not need to add the default theme to the list of themes in client-config-custom.json. 

To set a default theme that will persist after upgrades you can 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:

  > theme/ ln -s sample_theme_2 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

• If you do not wish to use a symbolic link 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.

Edit client-config-custom.json to add new themes

1. Log in to a shell on the Abiquo server as a user with the appropriate permissions (e.g. root or sudo user)

2. Edit the client-config-custom.json file to add new enterprise themes

   cd /var/www/html/ui/config
   vi client-config-custom.json

3. Edit the file and add the default theme and the custom themes within the brackets { and }. 

    "client.themes": [
    	"abicloudDefault",
    	"my_custom_theme"
    ]

   You must add abicloudDefault or the user interface will not load properly

   Check your JSON file format with a JSON checker to ensure that the UI will load properly

4. Restart the Apache daemon to load files into the cache

   service httpd restart

Activate New Themes

To activate new themes, do these steps.

1. Log in to the Abiquo GUI as the user with the "Modify enterprise themes" privilege
2. Create or Edit an enterprise

3. In the Enterprise Logo field, enter the relative path from the theme folder and name of the logo file. For example, "rose_console_theme/img/abiquo_gray.png".

4. Select a Theme
   
   1. only themes specified in the ui/config/client-config-custom.json file are shown
5. Click Save
6. Log out

Clear the browser cache on client machines

All users should clear the browser cache on their machines before logging in to Abiquo again.

1. Log in again as a user of the enterprise to check the new logo and theme