Versions Compared

Version Old Version 98 New Version Current
Changes made by

MS (Unlicensed)

Xavier Fernández

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents
Tip

You can create themes and brand Abiquo from within the UI, including for resellers with separate domains or subdomains. See Themes management.

Info

This page describes how to manually create

...

an advanced CSS theme to

...

white-label the Abiquo

...

multi-cloud platform. This process was used for branding in versions prior to Abiquo 6.1, and you can also use it to create CSS files for extra configuration, such as customized buttons.

...

Changes to branding

See Changes to branding

...

The CSS files for branding are described in the following table.

File

Branding for

theme.css

Abiquo UI

theme_guacamole.css

Guacamole remote access console. See https://wiki.abiquo.com/display/doc/Branding+Guacamole

theme_wmks.css

WMKS remote console. See https://wiki.abiquo.com/display/doc/Branding+WMKS

theme_novnc.css

Deprecated file

...

Copy sample theme files to customize

...

Here are some branding examples to help you get started. When you copy the sample_theme folder to a new folder, make a note of the folder name because it is the name of the theme and you will need to configure and select it in Abiquo later.

...

  1. Change the background color of the application. Search for the CSS class ".main-background-color" and change FFFFFF to another valid web color, for example, light grey EEEEEE

  2. Change the background color for the main menu. Search for the following CSS and replace the color as you prefer.

    Code Block
    .main-menu {
    Code Block
    
    background-color: #333333;
}

  3. Change the font color for the left side list by searching for and replacing the following colors

    Code Block
    .main-menu .centering-container-menu li .main-menu-section-link-active small,
.main-menu .centering-container-menu li.main-menu-section-link-active a span {
    color: #COLOR_HEX;
}

  4. Change the color of the primary font

    Code Block
    body {
    color: #ec9032;
}

  5. Change the color of the primary button

    Code Block
    .btn-primary {
    background-color: #719e19;
    border-color: #719e19;
}

  6. Change the color of the popup header bar

    Code Block
    .modal-header {
    background-color: #efa253;
}

  7. Optionally, change the background color of the toast error messages

    Code Block
    .toast-success {
  background-color: #51A351;
}
.toast-error {
  background-color: #BD362F;
}
.toast-info {
  background-color: #2F96B4;
}
.toast-warning {
  background-color: #F89406;
}

...

Remember to check the file ownership and access settings because the Abiquo Tomcat server will need to access the branding files.

...

New branding for resellers

Enhanced Branding Options: Resellers can now configure several key elements directly within the theme settings, offering greater flexibility and control over the branding of their portals:

  • Custom Support Popup Text: In the /ui/lang/lang_en_US_custom.json file, resellers can customize the "support_popup.text" to provide specific support information tailored to their customers.

  • Customized "Powered By" Messages: The "globals.poweredBy" and "globals.poweredbyshort" fields can now include the reseller's Twitter handle and a personalized "Powered By" message, reinforcing brand presence.

  • Theme-Specific Logo and URL Settings: Resellers have the option to set a unique logo for the top left of the portal and configure the URL that is accessed when the enterprise logo is clicked. This allows each reseller to maintain a distinct brand identity within the portal.

  • Custom Logout Redirection: Resellers can specify a URL to redirect users after logout, enhancing the customer journey by seamlessly integrating their own web portals or sites.

branding.pngImage Added

...

Troubleshooting branding

...