4.0
CSS files
Upgrade steps
Create a main theme.css file and copy inside it the content of theme_unsecured.css and theme_secured.css in that order
Set the new theme.css as the default theme. The default theme configuration will persist after Abiquo upgrades. See Abiquo branding admin guide#Set a default theme
Create enterprise theme.css files for individual tenants by renaming the theme_secured.css files to theme.css
In Abiquo 4.0, the version of noVNC has been upgraded. To update the noVNC branding, add the appropriate elements to the theme_novnc.css file, as described in Branding noVNC
You can also brand the WMKS console for vCloud director with the theme_wmks.css file
You can set a default theme using a symbolic link named "default" to the theme folder, or by copying the theme folder. See Abiquo branding admin guide#Setadefaulttheme
Action plan tree display fix
In Action plan tree display, the VM name disappears when opening the action plan list. This is a CSS issue in the theme that can be fixed manually.
Edit the /theme/CLIENT_THEME/css/theme.css
Add these lines:
/* Set color to an open VM in the tree */
.virtual-appliance-control-list a .main-menu-section-link-active {
color: #051861; /* Or desired color */
}
/* Set color to a selected Action Plan */
.virtual-appliance-control-list .ab-topiclist-tree .ab-active a {
color: #FFFFFF; /* Or desired color */
}4.2
Branding Guacamole for remote access to VMs
See Branding Guacamole
4.4
Theme update as part of upgrade
If you are upgrading from version 4.2.x or earlier, and you are using custom themes, make the following changes to your themes as part of the upgrade process.
Check that main menu buttons are properly defined. If not, users may see several superimposed buttons.
If you are not using custom main buttons, delete this block that defines the old icons from the theme CSS file:
.main-menu-section-link-icon-home {background:url(../img/mainmenu-buttons.png) no-repeat 0px 0px}
.main-menu-section-link-icon-structure {background:url(../img/mainmenu-buttons.png) no-repeat 0px -30px}
.main-menu-section-link-icon-data {background:url(../img/mainmenu-buttons.png) no-repeat 0px -60px;}
.main-menu-section-link-icon-library {background:url(../img/mainmenu-buttons.png) no-repeat 0px -90px;}
.main-menu-section-link-icon-users{background:url(../img/mainmenu-buttons.png) no-repeat 0px -119px;}
.main-menu-section-link-icon-pricing{background:url(../img/mainmenu-buttons.png) no-repeat 0px -150px;}
.main-menu-section-link-icon-events{background:url(../img/mainmenu-buttons.png) no-repeat 0px -180px;}
.main-menu-section-link-icon-configuration{background:url(../img/mainmenu-buttons.png) no-repeat 0px -210px;}
.main-menu-section-link-icon-dashboard {background:url(../img/mainmenu-buttons.png) no-repeat 0px -295px}
.main-menu-section-link-icon-home-active {background-position:-39px 0px;}
.main-menu-section-link-icon-structure-active {background-position:-39px -30px;}
.main-menu-section-link-icon-data-active {background-position:-39px -60px;}
.main-menu-section-link-icon-library-active {background-position:-39px -90px;}
.main-menu-section-link-icon-users-active {background-position:-39px -119px;}
.main-menu-section-link-icon-pricing-active {background-position:-39px -150px;}
.main-menu-section-link-icon-events-active {background-position:-39px -180px;}
.main-menu-section-link-icon-configuration-active {background-position:-39px -210px;}
.main-menu-section-link-icon-dashboard-active {background-position:-39px -295px}To customize an icon, disable the default icon and set the new icon.
For example, to make the infrastructure icon point to the myButton PNG file.
# Disable the default icon:
.main-menu-section-link-icon-structure .main-menu-section-link-icon-default{ visibility: hidden;}
# Set the new icon:
.main-menu-section-link-icon-structure {background:url(../img/myButton.png)}
Define the styles for the progress bars for the Dashboard metrics chart
Add this code to the theme CSS file.
4.5
Theme update as part of upgrade
If you are upgrading, and you are using custom themes, make the following changes to your themes as part of the upgrade process.
Previously, to customize the color of top menu element in the theme.css file the CSS was as follows.
.main-menu-section-link-active,
.main-menu-section-link-active:visited,
.main-menu-section-link-active:hover {
color: #00FF00;
}
For each element, add a new selector for v4.5 as follows.
.main-menu-section-link-active,
.main-menu-section-link-active .fa,
.main-menu-section-link-active:visited,
.main-menu-section-link-active:hover {
color: #00FF00;
}
4.6
No changes to branding.
4.6.1
Abiquo 4.6.1 introduces some changes to the styling using CSS of Abiquo dashboards. As a result of these changes to the look and feel of the dashboard, you may wish to update screenshots in your documentation.
To customize the color of the background of the widget panels, use the following CSS in your theme stylesheet and replace the color as required.
4.7.0
Abiquo 4.7.0 introduces remote access via web console to vCenter VMs. You can brand the WebMKS console for vCenter using the same CSS as for vCloud. See Branding WMKS