Overview

CloudBolt has a number of mechanisms to update both the branding of the application as well as make changes to the out of the box UI. 

Branding and Portals

To update colours, logos and allow for multiple brands on the same CloudBolt instance, see Branding and Portals.

Email Templates

To update the content of emails and their styling see Emails

UI Customization

To add new functionality to the CloudBolt UI, see UI Extensions.

To modify or remove links to built-in functionality where there isn’t a setting to disable the feature. CloudBolt allows you to override HTML templates, include custom CSS and override images.

Overriding HTML Templates

Requirement: root SSH/SFTP access to the CB appliance.

To override an HTML template, we copy the master template to the corresponding override directory:

Copy from /opt/cloudbolt/templates/ to the same path in /var/opt/cloudbolt/proserv/templates/ where its content can be updated.

For example to update registration/login.html

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

If you are not familiar with vim, it can be helpful to copy the html file off your cloudbolt appliance and into an editor such as Visual Studio Code that will assist you with providing the valid syntax for html updates.

Some useful template paths (relative to /opt/cloudbolt/templates/ and /var/opt/cloudbolt/proserv/templates/)

When templates are correctly modified in the proserv directory, they will persist through CloudBolt upgrades, however it can be useful to compare templates after an upgrade to ensure functionality added during an upgrade isn’t being hidden as the template may be overriding an entire page or list of menu options. For more targeted customisation or styling changes we suggest using CSS customisation.

Overriding CloudBolt Logos

Several logos used throughout CloudBolt can be customized per Portal via the UI using Branding and Portals including: top menu logo, the footer logo, the loading icon, and a custom banner to be displayed above the top menu.

Similar to the HTML template override directory, images can be overrriden by copying a replacement image to the same relative path under: /var/opt/cloudbolt/proserv/static/. However to make these updates take effect you need to execute the following administrative command on the appliance.

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

Example: 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

Example: 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/favicon.ico, and execute the command:

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

Custom CSS and hiding elements

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 an introduction to creating styles for specific elements and how to use Chrome DevTools inspect to identify elements to update: see Get Started with CSS.

Example: Replace dashboard logo with png

Add the following to customer.css:

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

Example: Hiding a image or entire section

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

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

Example: 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;
}

Example: Change the loading icon/spinner

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

Removing 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