Of all the IaaS software stack available, the one gaining rapidly in popularity is OpenStack. It has a huge community behind it and it enjoys support from several large IT vendors therefore ensuring a clear and long development and support roadmap ahead. Naturally it makes a logical deployment choice by numerous cloud vendors across the globe.
If you have your own OpenStack deployment, in this guide I will show you how to quickly perform a custom rebranding using some minor configuration tweaks.
If you have a OpenStack Grizzly testbed, then most likely your Horizon dashboard looks something like this:
First of all you should remove the default Ubuntu theme. Perform the steps below as superuser.
sudo su
dpkg –purge openstack-dashboard-ubuntu-theme
Next you should prepare two transparent logos, ideally of dimensions 200×27 and 365×50, lets call them logo_small.png and logo_medium.png.
Upload these images to the OpenStack images folder on the node where Horizon is installed.
/usr/share/openstack-dashboard/openstack_dashboard/static/dashboard/img/
Next you should create a small custom css file that would bypass the OpenStack default rendering. You should put the custom css file under this directory on the Horizon node. Lets say that you name the css file as custom.css.
/usr/share/openstack-dashboard/openstack_dashboard/static/dashboard/css/
Here is the example css file content that I have used:
/*
* New theme colors for dashboard that override the defaults:
*
* By Preston Lee
*/
h1.brand {
background: #DAEDE9 repeat-x top left;
border-bottom: 2px solid #BAD3E1;
}
h1.brand a {
background: url(../img/logo_small.png) top left no-repeat;
}
#splash .login {
background: #DAEDE9 url(../img/logo_medium.png) no-repeat center 35px;
}
#splash .login .modal-header {
border-top: 1px solid #BAD3E1;
}
.btn-primary {
background-image: none !important;
background-color: #7EC4B7 !important;
border: none !important;
box-shadow: none;
}
.btn-primary:hover,
.btn-primary:active {
border: none;
box-shadow: none;
background-color: #66AB9F !important;
text-decoration: none;
}
Next edit the file using the text editor of your choice:
/usr/share/openstack-dashboard/openstack_dashboard/templates/_stylesheets.html
Simply add this line at the end of the file
And finally restart your httpd service and see the change in the dashboard page. For ubuntu use this command:
service apache2 restart; service memcached restart
Here is how the transformed dashboard page looks for our lab’s testbed setup:
Adapted from a blog post by Preston Lee.