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/
)
Admin Portal | cbadmin/index.html |
Navigation Bar | common/header.html |
About CloudBolt Popup | about.html |
Login Page | registration/login.html |
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
0 Comments