White-labeling CloudBolt

The look and feel of CloudBolt can be customized to varying degrees, ranging from changing the menu colors to match your company's branding, to adding a banner to the header, to white-labeling the entire product and removing all references to 'CloudBolt'. The following guide will explain how to make these changes, as well as any number of further customizations. For many of these tasks, you will need SFTP and SSH access to your CloudBolt server. In general, changes should always be made in the /var/opt/cloudbolt/proserv/ directory to avoid getting overwritten when CloudBolt is upgraded.

CloudBolt Logos

Replacing logos can be done with two steps: first, copy a new logo to your CloudBolt server and place it in the appropriate subdirectory within /var/opt/cloudbolt/proserv/static/, and then collect those new files to be served by CloudBolt by logging in via SSH and executing the command:

/opt/cloudbolt/manage.py collectstatic --noinput

Header Logo

A CloudBolt logo is shown in the header menu as a link to the dashboard. To replace it, you will need two SVG-formatted versions of your logo: a light and a dark-colored one, each 40px square with the logo filling between 50% to 75% of the width and height of the image. To mimic the default CloudBolt colors, the light version should be colored #FFFFFF and the dark version should be colored #335B83.

Copy the light version to /var/opt/cloudbolt/proserv/static/logos/cb-cloud-white.svg, and copy the dark version to /var/opt/cloudbolt/proserv/static/logos/cb-cloud-blue.svg. Then, execute the command:

/opt/cloudbolt/manage.py collectstatic --noinput

Footer Logo

The footer contains a white CloudBolt combination mark that opens a window listing version and build info. To replace this logo, use an SVG-formatted version of your logo that is light-colored and displays well at a height of 32px. Copy your logo to this location on the CloudBolt server:

/var/opt/cloudbolt/proserv/static/logos/cb-horizontal-white.svg, and execute the command:

/opt/cloudbolt/manage.py collectstatic --noinput

To hide the footer completely, see Manual Customizations below.

Login Page & About Page Logo

The login page and the window that opens to show version and build info both include a CloudBolt logo. To replace this logo, use an SVG-formatted version of your logo that is dark-colored and displays well at a height of 48px. Copy your logo to this location on the CloudBolt server:

/var/opt/cloudbolt/proserv/static/logos/cb-horizontal.svg, and execute the command:

/opt/cloudbolt/manage.py collectstatic --noinput

Loading Icon

When pages are loading, a pulsing logo is shown to indicate the request is in progress. That logo is just a .png file, so to replace it, use a dark logo that displays well at a height of 122px. Copy your logo to this location on the CloudBolt server:

/var/opt/cloudbolt/proserv/static/logos/cloudbolt-lines-logo-blue.png, and execute the command:

/opt/cloudbolt/manage.py collectstatic --noinput

Favicon

Many browsers display an icon next to the web address and when bookmarked. To replace the icon, use an ICO-formattedfile at least 16px squared. Copy your logo to this location on the CloudBolt server:

/var/opt/cloudbolt/proserv/static/img/CloudBolt.ico, and execute the command:

/opt/cloudbolt/manage.py collectstatic --noinput

 

Branding and Colors

Most of the colors used throughout CloudBolt can be customized through the UI. Those settings are available in the Admin under Users & Settings -> Branding. Edit the portal being used, and fields are available to set colors for text, background, menus, and tooltips.

 

Manual Customizations

For more style changes that can't be made via the Portal Branding or by overwriting images, a customer css file can be created that allows for any customizations. 

mkdir -p /var/opt/cloudbolt/proserv/static/css
vim /var/opt/cloudbolt/proserv/static/css/customer.css

Add whatever css customizations are necessary, then run:

/opt/cloudbolt/manage.py collectstatic --noinput

For example, if you want to replace one of the SVG logos like the header image mentioned above with a different image type, you can add the following to customer.css:

    .nav-header-tabs li[data-topnav="dashboard"] a {
      background-image: url(/static/logos/my-custom-header-logo.png);
    }

Or another example, if you want to completely hide the logo in the footer instead of replace it, you could include the following:

    html body #footer img {
      // Hide the original logo which is in an img tag that we cannot control with CSS
      display:none !important;
    }

Completely hide the footer:

    html body #footer { display: none !important; }

Hide a link in the Docs menu:

    /* Hide the 'Create a Support Ticket' menu item */
    li[data-topnav=help] .dropdown-menu li:last-child {
      display: none;
    }

Completely hide the Docs menu:

/* Hide the entire 'Docs' menu */
li[data-topnav=help] {
display: none;
}

Change the loading icon, aka spinner:

    html body .spinner {
      background: url('../logos/your-own.png') no-repeat 0 0 !important;
    }

Templates and Email

Full templates can also be overwritten. Any template can be copied from its location in /opt/cloudbolt/templates/ and put in a matching path within /var/opt/cloudbolt/proserv/templates/. For example, to make changes to the login template:

mkdir /var/opt/cloudbolt/proserv/templates/registration/
cp /opt/cloudbolt/templates/registration/login.html /var/opt/cloudbolt/proserv/templates/registration/
vim /var/opt/cloudbolt/proserv/templates/registration/login.html
(edit as desired)
service httpd restart

Another example, to customize the copyright statement on the About page (accessed by clicking the logo in the footer), execute the following commands:

cp /opt/cloudbolt/templates/about.html /var/opt/cloudbolt/proserv/templates/
vim /var/opt/cloudbolt/proserv/templates/about.html
(edit as desired)
service httpd restart

To customize the content of emails that CloudBolt sends, copy any file in /opt/cloudbolt/templates/email/ to /var/opt/cloudbolt/proserv/templates/email/ (making the directory if necessary). Then, make your desired changes to the new location and call service httpd restart.

Undoing Customizations

Colors customized using the Portal settings can be undone via the link at the bottom of the Portal's edit page.

To undo customizations made by placing files in the `/var/opt/cloudbolt/proserv/` directory, remove the files and execute the following commands on your CloudBolt server:

/opt/cloudbolt/manage.py collectstatic --noinput
service httpd restart

 

Have more questions? Submit a request

1 Comments

  • -1
    Avatar
    Tor Peck
    Edited by Tor Peck
Please sign in to leave a comment.