White-labeling CloudBolt

Note: CloudBolt 7.3 introduces a number of features that allows customizing the overall branding of CloudBolt through the UI using the Branded Portals. Images and colors set on the Portal will alter how the site looks to end users connecting to that Portal, and the name used for the Portal will be used in place of CloudBolt throughout the product. We recommend upgrading to the latest version of CloudBolt to get these features.

 

Customizing CloudBolt via the Branded Portals is available in the Admin under Users & Settings -> Branding and Multi-Tenant Portals. 

Manual Customizations

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

Several logos used throughout CloudBolt can be customized per Portal via the UI. Edit the portal to be used, and fields are available to set images for the logo shown in the top menu, the footer logo, the loading icon, and a custom banner to be displayed above the top menu.

Replacing other 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

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

 

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.