Customize the dashboardAdapted 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.The following example shows a customized dashboard with
custom colors, logo, and site title:To customize the dashboard: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 <plee@tgen.org>
*/
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.htmlAdd 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:$sudo service apache2 restart$sudo service httpd restart$sudo service apache2 restartReload the dashboard in your browser to view your
changes.Modify your CSS file as appropriate.