Red Hat Summit Red Hat SummitSupportConsoleDevelopersStart a trialContact

Chapter 5. Customizing the Dashboard

After you have the OpenStack dashboard installed, you can customize its look and feel to suit your own needs. The customization options here focuses on the settings included in the local_settings.py file, stored in /openstack-dashboard/openstack_dashboard/local/.

Note

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

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

# rpm -e --nodeps openstack-dashboard-theme
Copy to Clipboard Toggle word wrap

You can customize the following elements of the dashboard. Note that for a Director deployment, you will need to log in to each controller node as heat-admin to make the changes.

  • Logo
  • Site colors
  • HTML title
  • Site branding link
  • Help URL
  • Stylesheets

Logo and Site Colors:

  1. Create two logo files in png format with transparent backgrounds of the following sizes:

    • Login screen (Example: login_logo.png): 365 x 50
    • Logged in banner (Example: banner_logo.png): 216 x 35
  2. Upload your new images to the following location: /usr/share/openstack-dashboard/openstack_dashboard/static/dashboard/img/
  3. Create a SCSS style sheet in the following directory: /usr/share/openstack-dashboard/openstack_dashboard/static/dashboard/scss/

  4. Change the colors and image file names as appropriate. Note that the relative directory paths should be the same. The following example file demonstrates how to customize your SCSS file: 

    /*
* New theme colors for the dashboard that override the defaults:
*  dark blue: #355796 / rgb(53, 87, 150)
*  light blue: #BAD3E1 / rgb(186, 211, 225)
*/

h1.brand {
background: #355796 repeat-x top left;
border-bottom: 2px solid #BAD3E1;
}
h1.brand a {
background: url(../img/login_logo.png) top left no-repeat;
}
#splash .login {
background: #355796 url(../img/banner_logo.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;
}
    Copy to Clipboard Toggle word wrap
  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.scss file: 

     <link href='bootstrap/css/bootstrap.min.scss' media='screen' rel='stylesheet' />
 <link href='dashboard/css/{% choose_scss %}' media='screen' rel='stylesheet' />
 <link href='dashboard/css/custom.scss' media='screen' rel='stylesheet' />
    Copy to Clipboard Toggle word wrap
  7. Restart the Apache server: 
# # systemctl restart httpd
Copy to Clipboard Toggle word wrap
  1. To view your changes simply reload your dashboard. If necessary, go back and modify your SCSS file as appropriate.

HTML Title:

  1. To set the HTML title that appears at the top of the browser window, add the following line to local_settings.py. 

    SITE_BRANDING = "Example, Inc. Cloud"
    Copy to Clipboard Toggle word wrap
  2. Restart the Apache server.

Site Branding Link:

  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 with the desired URL target to local_settings.py. 

    SITE_BRANDING_LINK = "http://example.com"
    Copy to Clipboard Toggle word wrap
  2. Restart the Apache server.

Help URL:

  1. By default the help URL points to https://access.redhat.com/documentation/en-US/Red_Hat_Enterprise_Linux_OpenStack_Platform/7/index.html. You can change the help URL by editing the following attribute to the URL of your choice in local_settings.py. 

    'help_url': "http://openstack.mycompany.org",
    Copy to Clipboard Toggle word wrap
  2. Restart the Apache server.

Custom Stylesheets:

It is possible to define custom stylesheets for your dashboard. Dashboard’s base template, openstack_dashboard/templates/base.html, defines multiple blocks that can be overridden. To define custom SCSS files that apply only to a specific dashboard, create a base template in your dashboard’s templates folder, which extends the dashboard’s base template.

Example: openstack_dashboard/dashboards/my_custom_dashboard/templates/my_custom_dashboard/base.html. In this template, you can redefine block CSS: 

{% extends 'base.html' %}
{% block css %}
  {% include "_stylesheets.html" %}
  {% load compress %}
  {% compress css %}
  <link href='{{ STATIC_URL }}my_custom_dashboard/scss/my_custom_dashboard.scss' type='text/scss' media='screen' rel='stylesheet' />
  {% endcompress %}
{% endblock %}
Copy to Clipboard Toggle word wrap
Note

Don’t forget to include _stylesheets.html which includes all default stylesheets for the dashboard.

Red Hat logoGithubredditYoutubeTwitter

Learn

Try, buy, & sell

Communities

About Red Hat Documentation

We help Red Hat users innovate and achieve their goals with our products and services with content they can trust. Explore our recent updates.

Making open source more inclusive

Red Hat is committed to replacing problematic language in our code, documentation, and web properties. For more details, see the Red Hat Blog.

About Red Hat

We deliver hardened solutions that make it easier for enterprises to work across platforms and environments, from the core datacenter to the network edge.

Theme

© 2026 Red HatBack to top