Table of Contents |
---|
More detailed instructions about branding
Back up the Abiquo UI
Back up Abiquo system elements:
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:
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 a branding
...
If the users managing enterprises are not cloud administrators, assign branding privileges in Abiquo.
In Users View, check that the users have the "Manage enterprises" and "Modify enterprise theme" privileges. See Manage Roles
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 that 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
|
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
|
...
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 |
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
...
theme
To upload a branding theme do these steps:
Compress the theme, for example, if the theme is in a folder called customer
Code Block tar -cvfz customer.tar.gz customer
Copy the theme to the UI server, for example
Code Block scp root@api-ui-server:~/Downloads/customer.tar.gz customer.tar.gz
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 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.
- 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
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
Users clear browser cache to display new themes
Note | ||
---|---|---|
| ||
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.
...
theme
Back up any existing customer theme by copying the theme directory
Copy the customer theme to the theme directory and uncompress it
This will overwrite any existing themeCode Block cp ~/customer.tar.gz . tar -xvzf customer.tar.gz
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.
...