Changes to branding

4.0

CSS files

• Each Abiquo theme now has only one CSS file called theme.css that contains all CSS elements

Upgrade steps

1. Create a main theme.css file and copy inside it the content of theme_unsecured.css and theme_secured.css in that order
2. 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
3. Create enterprise theme.css files for individual tenants by renaming the theme_secured.css files to theme.css
4. 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
5. 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

• Guacamole tab title will be renamed with VM label.
• Guacamole styling will load the default theme found at theme/default/css/theme_guacamole.css

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.

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

2. Define the styles for the progress bars for the Dashboard metrics chart
   Add this code to the theme CSS file.

   /* Progress bar */
   .progress-bar {
       background-color: #003245;
   }
   
   .resource-progress-bar {
       background-color: rgb(147,228,147);
   }
   
   .resource-used-over-soft-limit {
       background-color: #ffe877;
   }
   
   .resource-soft-limit {
       background-color: #FFA500;
   }
   
   .resource-hard-limit {
       background-color: #FF0000;
   }
   
   .resource-progress-bar-nolimit {
       background: rgb(147,228,147); /* For browsers that do not support gradients */
       background: -webkit-linear-gradient(left, rgba(147,228,147,0.9), rgba(147,228,147,0)); /* For Safari 5.1 to 6.0 */
       background: -o-linear-gradient(left, rgba(147,228,147,0.9), rgba(147,228,147,0)); /* For Opera 11.1 to 12.0 */
       background: -moz-linear-gradient(left, rgba(147,228,147,0.9), rgba(147,228,147,0)); /* For Firefox 3.6 to 15 */
       background: linear-gradient(left, rgba(147,228,147,0.9), rgba(147,228,147,0)); /* Standard syntax */
   }

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.

For each element, add a new selector for v4.5 as follows.

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.

.widgets-container {
background-color: #e7e8ee7d;
}

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

5.0.0

The new Abiquo UI has a cleaner look that is easy to style.

The new Abiquo 5.0 UI will require a new stylesheet with different CSS but the process for managing branding files remains the same.

The sample_theme files have been updated for the new UI.

The new Abiquo UI uses an icon sheet for the main menu buttons.