How To Custom Brand The OpenStack “Horizon” Dashboard

computer,Uncategorized 9 May 2012 | 4 Comments

I’m deploying OpenStack “Essex” on Ubuntu Server 12.04, and have the openstack-dashboard package installed to provide the web-based “Horizon” GUI component newly added for the Essex release. Canonical also provides an openstack-dashboard-ubuntu-theme package that brands the Python-based Django GUI. Despite that the last major Canonical-maintained packages based on the OpenStack “Diablo” release in Ubuntu 11.10 did not include an administrative GUI, Horizon — as a standalone component — has been very stable for a mainstream debut. In the future, though, I’d like to see a quick and easy way to change the default branding to use your own logo, colors, and titles using only the GUI’s administrative screens.

The horizon documents briefly mention branding customization to give you a head start, but you probably want more specific steps. Here’s my custom-branded Horizon dashboard with custom colors, logo, and site title:

Once you know where to make the appropriate changes, it’s super simple. Step-by-step:

  1. Create a graphical logo with a transparent background. The text “TGen Cloud” in this example is actually rendered via .png files of multiple sizes I created with a graphics program. I used a 200×27 for the logged-in banner graphic, and 365×50 for the login screen graphic.
  2. Set the HTML title (shown at the top of the browser window) by adding the following line to /etc/openstack-dashboard/local_settings.py
    SITE_BRANDING = "Example, Inc. Cloud"
  3. Upload your new graphic files to:
    /usr/share/openstack-dashboard/openstack_dashboard/static/dashboard/img/
  4. Create a new CSS stylesheet — we’ll call ours custom.css — in the directory:
    /usr/share/openstack-dashboard/openstack_dashboard/static/dashboard/css/
  5. Edit your CSS file using the following as a starting point for customization, which simply overrides the Ubuntu customizations made in the ubuntu.css file. Change the colors and image file names as appropriate, though the relative directory paths should be the same.
    /*
    * 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;
    }
  6. Open the following HTML template in an editor:
    /usr/share/openstack-dashboard/openstack_dashboard/templates/_stylesheets.html
  7. Add a line to include your new stylesheet: (I’ve highlighted the new line in bold.)
    ...
     <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' />
    ...
  8. Restart apache just for good measure:
     sudo service apache2 restart
  9. Reload the dashboard in your browser and fine tune your CSS appropriate.

You’re done!

Creative Commons License
How To Custom Brand The OpenStack &#8220;Horizon&#8221; Dashboard by preston.lee is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 United States License.
Based on a work at www.prestonlee.com.
Permissions beyond the scope of this license may be available at http://www.prestonlee.com.

Tagged in , , , , , , , , , ,

4 Responses on “How To Custom Brand The OpenStack “Horizon” Dashboard”

  1. Tan Dang says:

    I have applied those steps for my openstack, but somehow, when I restart apache2, it doesn’t work. If you know something about that error, please let me know as soon as possible!

    Another question is my horizon meet a error below:

    SyntaxError at /auth/login/
    invalid syntax (client.py, line 1)
    Request Method: POST
    Request URL: http://10.8.41.50/horizon/auth/login/
    Django Version: 1.4.1
    Exception Type: SyntaxError
    Exception Value:
    invalid syntax (client.py, line 1)
    Exception Location: /usr/lib/python2.7/dist-packages/novaclient/v1_1/client.py in , line 1
    Python Executable: /usr/bin/python
    Python Version: 2.7.3
    Python Path:
    ['/usr/share/openstack-dashboard/openstack_dashboard/wsgi/../..',
    '/usr/lib/python2.7',
    '/usr/lib/python2.7/plat-linux2',
    '/usr/lib/python2.7/lib-tk',
    '/usr/lib/python2.7/lib-old',
    '/usr/lib/python2.7/lib-dynload',
    '/usr/local/lib/python2.7/dist-packages',
    '/usr/lib/python2.7/dist-packages',
    '/usr/share/openstack-dashboard/',
    '/usr/share/openstack-dashboard/openstack_dashboard']

    Can you fix it! Please let me through my email or leave comment! Please help me, I have ten days left for my thesis!!!! Thanks

  2. Pierre Rabreau says:

    Hi

    I try this note step by step and have an issue with applying the css file then I had to add fews command to make it work
    # Note the compress command has not work at first I had to install lesscpy before :
    yum install python-lesscpy
    then
    /usr/share/openstack-dashboard/manage.py compress
    and collecstatitic to update the new logo image file.
    /usr/share/openstack-dashboard/manage.py collectstatic

  3. Nerd says:

    Same changes applied it works gr8 !!!

Trackbacks/Pingbacks

  1. [...] Adapted from a blog post by Preston Lee. [...]

Leave a Reply