Versions Compared

Old Version 32

changes.mady.by.user MS

Saved on

compared with

New Version Current

changes.mady.by.user MS

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
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/


...

Upload

...

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

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

...

Compress your theme folder

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

...

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 
...
Edit UI configuration to add new themes to enterprise menu
To add new themes to the enterprise menu, edit the UI configuration:
...
Log in to a shell on the Abiquo server as a user with the appropriate permissions (e.g. root or sudo user)
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"
 ]
...
  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.
...