Customize the dashboard

Adapted from How To Custom Brand The OpenStack “Horizon” Dashboard.

You install the OpenStack dashboard through the openstack-dashboard package. You can customize the dashboard with your own colors, logo, and site title through a CSS file.

Canonical also provides an openstack-dashboard-ubuntu-theme package that brands the Python-based Django interface.

Create a graphical logo with a transparent background. The text TGen Cloud in this example is rendered through .png files of multiple sizes created with a graphics program.
Use a 200×27 for the logged-in banner graphic, and 365×50 for the login screen graphic.
Set the HTML title, which appears at the top of the browser window, by adding the following line to /etc/openstack-dashboard/local_settings.py:
SITE_BRANDING = "Example, Inc. Cloud"
Upload your new graphic files to the following location: /usr/share/openstack-dashboard/openstack_dashboard/static/dashboard/img/
Create a CSS style sheet in the following directory: /usr/share/openstack-dashboard/openstack_dashboard/static/dashboard/css/

Edit your CSS file to override the Ubuntu customizations in the ubuntu.css file.

Change the colors and image file names as appropriate, though the relative directory paths should be the same. The following example file shows you how to customize your CSS file:

/*
* New theme colors for dashboard that override the defaults:
*  dark blue: #355796 / rgb(53, 87, 150)
*  light blue: #BAD3E1 / rgb(186, 211, 225)
*
* By Preston Lee <[email protected]>
*/
h1.brand {
background: #355796 repeat-x top left;
border-bottom: 2px solid #BAD3E1;
}
h1.brand a {
background: url(../img/my_cloud_logo_small.png) top left no-repeat;
}
#splash .login {
background: #355796 url(../img/my_cloud_logo_medium.png) no-repeat center 35px;
}
#splash .login .modal-header {
border-top: 1px solid #BAD3E1;
}
.btn-primary {
background-image: none !important;
background-color: #355796 !important;
border: none !important;
box-shadow: none;
}
.btn-primary:hover,
.btn-primary:active {
border: none;
box-shadow: none;
background-color: #BAD3E1 !important;
text-decoration: none;
}

Open the following HTML template in an editor: /usr/share/openstack-dashboard/openstack_dashboard/templates/_stylesheets.html

Add a line to include your custom.css file:

...
 <link href='{{ STATIC_URL }}bootstrap/css/bootstrap.min.css' media='screen' rel='stylesheet' />
 <link href='{{ STATIC_URL }}dashboard/css/{% choose_css %}' media='screen' rel='stylesheet' />
 <link href='{{ STATIC_URL }}dashboard/css/custom.css' media='screen' rel='stylesheet' />
 ...

Restart apache:

On Ubuntu: