Page Comparison

...

...

...

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

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

...

1. and make a

...

1. copy of the UI folder

...

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

...

...

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

     Code Block
     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

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

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

   Code Block
   tar -zxvf my_custom_theme.tar.gz

Add the unsecured zone theme

To add the unsecured zone theme for user login

1. Open the main UI directory.

   Info
   By default, you can only create one unsecured zone theme If you wish to create more than one login environment, you will need to serve each one with a separate URL. Please contact Abiquo Support for assistance

2. Edit index.html and add the link to the CSS for the unsecured theme.

• You MUST add this as the LAST CSS to load, so that it has priority over the default Abiquo theme. You can search for the comment lines shown here, to help position the link correctly in the file. For example:

  Code Block
  <!-- Unsecured theme to load (Optional) --> <!-- Example: <link rel="stylesheet" type="text/css" href="theme/sample_theme_2/css/theme_unsecured.css" /> --> <link rel="stylesheet" type="text/css" href="theme/my_custom_theme_X/css/theme_unsecured.css" />

  After login, secured zone CSS files will have priority over unsecured zone file. This is because Abiquo will load the secured zone files listed in client-config-custom.json AFTER the unsecured zone CSS file in index.html.

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

...

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/

...

Edit the file and add the default theme and the custom themes.

{
 "config.endpoint": "https://mjsabq.bcn.abiquo.com/api",
 "client.themes": [
 "abicloudDefault",
 "my_custom_theme"
 ]
}

...

Restart the Apache daemon to load files into the cache

service httpd restart

Activate New Themes

Activate a new unsecured theme on the Abiquo Server

1. The new theme will be available next time users load the page

Activate a new enterprise logo and theme in the Abiquo GUI

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

Image Removed

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

...

1. theme

   Back up any existing customer theme by copying the theme directory

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

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

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

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

...