Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

Preparing branding

...

Prepare themes as described in Abiquo Branding Guide

...

Table of Contents

Tip

For details of how to manage branding within the UI see Themes management

Info

This section applies to Abiquo CSS branding, which is in versions prior to Abiquo 6.1. You can also use this process to upload CSS files for extra branding configuration, such as changes to buttons in the UI.

This page describes how to upload a theme for whitelabelling and install it on an Abiquo UI Server

Back up the Abiquo UI

In addition to regular backups, we recommend that you make a quick backup of the UI before enabling branding.

To back up the Abiquo UI:

  1. Log in to a shell on the Abiquo server with a user with root permissions and make a copy of the UI folder

    Code Block
    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 Abiquo, if the users managing enterprises are not cloud administrators.
In Users View, check that the users have the "Manage enterprises" and "Modify enterprise theme" privileges.

Expand

Image Removed


...

Upload themes and logos to the Abiquo UI

Upload an optional default theme to style the login screen and your enterprise themes, including the image files.

Note: the abicloudDefault folder contains the predefined default theme; do not overwrite this folder or the login screen will not display correctly.

...

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

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

...

Upload a branding theme

To upload a branding theme do these steps:

  1. Compress the theme, for example, if the theme is in a folder called customer

    Code Block
    tar -cvfz customer.tar.gz customer
  2. Copy the theme to the UI server, for example

    Code Block
    scp root@api-ui-server:~/Downloads/customer.tar.gz customer.tar.gz
  3. Log in to the UI server and go to the theme directory.

    Code Block
    cd /var/www/html/ui/theme

...

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

...

  1. (warning) Back up any existing customer theme by copying the theme directory

  2. Copy the customer theme to the theme directory and uncompress it
    (warning) This will overwrite any existing theme

    Code Block
    cp ~/customer.tar.gz . 
    tar -xvzf customer.tar.gz

...

  1. To check

...

Set a default theme

You can set a default theme that Abiquo will use to style the login zone, as well as the enterprises without themes.

  • When you set a default theme, Abiquo still requires the abicloudDefault theme as before because it is the base theme. 
  • You do not need to add the default theme to the list of themes in client-config-custom.json unless it will be used by tenants

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

    Code Block
    languagebash
    > 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 UI configuration to add new themes to Enterprise menu

...

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

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

Edit the file and add the base theme and the custom themes as an element within the brackets { and }. 

Code Block
 "client.themes": [
 	"abicloudDefault",
 	"my_custom_theme"
 ]
Note

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

Restart the Apache daemon to load files into the cache

Code Block
service httpd restart

Activate New Themes

To activate new themes, when you create or edit an enterprise, do these steps.

  1. To change the Enterprise logo in the top left-hand corner, enter the relative path from the ui folder to the enterprise logo file, e.g. theme/blue_theme/img/abiquo_gray.png 
  2. To change the Default theme, select a theme. Only themes configured in the client-config-custom.json file are shown.

    Tip

    If you didn't restart the Apache daemon when you copied the logo file to the server, restart it now to ensure the new logo is visible

    Image Removed

Users clear browser cache to display new themes

Note
titleImportant

This is an essential step for the correct display of the new theme

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

...

  1. that the Apache server can read the theme, list all files and permissions:

    Code Block
    ls -al

    If the owner of the files is not the same as other UI files, change it to match. For example:

    Code Block
    chown -R root:root customer

(warning) The abicloudDefault folder contains the predefined default theme. Do not overwrite this folder or the login screen will not display correctly.

...