Atom feed of this document
  
Kilo -  Kilo -  Kilo -  Kilo -  Kilo -  Kilo -  Kilo -  Kilo - 

 Customize the dashboard

Once you have the dashboard installed you can customize the way it looks and feels to suit your own needs.

[Note]Note

The OpenStack dashboard by default on Ubuntu installs the openstack-dashboard-ubuntu-theme package.

If you do not want to use this theme you can remove it and its dependencies using the following command:

# apt-get remove --auto-remove openstack-dashboard-ubuntu-theme
[Note]Note

This guide focuses on the local_settings.py file, stored in /openstack-dashboard/openstack_dashboard/local/.

This guide is adapted from How To Custom Brand The OpenStack "Horizon" Dashboard.

The following can easily be customized:

  • Site colors

  • Logo

  • HTML title

  • Site branding link

  • Help URL

 

Procedure 4.1. Logo and site colors

  1. Create two logo files, png format, with transparent backgrounds using the following sizes:

    • Login screen: 365 x 50

    • Logged in banner: 216 x 35

  2. Upload your new images to the following location: /usr/share/openstack-dashboard/openstack_dashboard/static/dashboard/img/

  3. Create a CSS style sheet in the following directory: /usr/share/openstack-dashboard/openstack_dashboard/static/dashboard/css/

  4. 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;
    }
  5. Open the following HTML template in an editor of your choice: /usr/share/openstack-dashboard/openstack_dashboard/templates/_stylesheets.html

  6. Add a line to include your newly created style sheet. For example 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' />
        ...
  7. Restart Apache:

    On Ubuntu:

    # service apache2 restart

    On Fedora, RHEL, CentOS:

    # service httpd restart

    On openSUSE:

    # service apache2 restart

  8. To view your changes simply reload your dashboard. If necessary go back and modify your CSS file as appropriate.

 

Procedure 4.2. HTML title

  1. Set the HTML title, which appears at the top of the browser window, by adding the following line to local_settings.py:

                SITE_BRANDING = "Example, Inc. Cloud"
            

  2. Restart Apache for this change to take effect.

 

Procedure 4.3. HTML title

  1. The logo also acts as a hyperlink. The default behavior is to redirect to horizon:user_home. To change this, add the following attribute to local_settings.py

    SITE_BRANDING_LINK = "http://example.com"
  2. Restart Apache for this change to take effect.

 

Procedure 4.4. Help URL

  1. By default the help URL points to http://docs.openstack.org. Change this by editing the following arritbute to the URL of your choice in local_settings.py

    'help_url': "http://openstack.mycompany.org",
  2. Restart Apache for this change to take effect.

Questions? Discuss on ask.openstack.org
Found an error? Report a bug against this page

loading table of contents...