...
Table of Contents |
---|
...
class | tocc |
---|
...
Tip |
---|
For details of how to manage branding within the UI see Themes management |
Info |
---|
This section |
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
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/
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
Info | ||
---|---|---|
| ||
The main Abiquo theme is called "abicloudDefault". If this theme is the default and it is not present or not correct, the login screen will not display properly. |
...
...
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:
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/theme
...
Extract the theme (which will OVERWRITE any theme with the same name). For example, when the theme was compressed with tar and gzip
...
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
...
Set a default theme
You can set a default theme that Abiquo will 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:
Code Block language bash > 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.
...
Edit client-config-custom.json to add new themes
...
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 default theme and the custom themes 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, do these steps.
- Log in to the Abiquo GUI as the user with the "Modify enterprise themes" privilege
- Create or Edit an enterprise
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".
- Select a Theme
- only themes specified in the ui/config/client-config-custom.json file are shown
- Click Save
- Log out
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 |
Clear the browser cache on client machines
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.
- Log in again as a user of the enterprise to check the new logo and theme
...
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.
...