How to customize the OpenStack dashboard¶

We exlpain how to customize the OpenStack dashboard, modifying the Ubuntu theme.

Let’s start from the default Login page:

Figure 1. OpenStack login page

Change the logo on the login page¶

ssh to the OpenStack dashboard server
Copy your logo (PNG or SVG format) to /usr/share/openstack-dashboard-ubuntu-theme/static/themes/ubuntu/img/

Edit the CSS file:

`/usr/share/openstack-dashboard/static/themes/ubuntu/_styles.scss`

Find the line containing the string logo-ubuntu-orange.svg (the name of the Ubuntu logo):
```
`background-image: *url("/static/themes/ubuntu/img/logo-ubuntu-orange.svg");`
```
Change the line to:
```
`background-image: url("/static/themes/ubuntu/img/$CUSTOMLOGO");`
```
where $CUSTOMLOGO is the name of the custom logo file.
Modify position and size of the image if needed, setting the parameters background-position and background-size accordingly

Re-create the compressed CSS files:

python /usr/share/openstack-dashboard/manage.py compress --force

ssh to the OpenStack dashboard server
Copy your logo (PNG or SVG format) to /usr/share/openstack-dashboard-ubuntu-theme/static/themes/ubuntu/img/

Edit the CSS file:

/usr/share/openstack-dashboard/static/themes/ubuntu/_styles.scss

Find the line containing the string logo-ubuntu-white.svg (the name of the Ubuntu logo):
```
background-image: url("/static/themes/ubuntu/img/logo-ubuntu-white.svg");
```
Change the line to:
```
background-image: url("/static/themes/ubuntu/img/$CUSTOMLOGO");
```
where $CUSTOMLOGO is the name of the custom logo file.
Modify position and size of the image if needed, setting the parameters background-position and background-size accordingly

Re-create the compressed CSS files:

python /usr/share/openstack-dashboard/manage.py compress --force

Edit the CSS file:

/usr/share/openstack-dashboard/static/themes/ubuntu/_styles.scss

Find the line containing the string “OpenStack Dashboard”:
```
content: "OpenStack Dashboard";
```
Change “OpenStack Dashboard” with a custom string.

Re-create the compressed CSS files:

python /usr/share/openstack-dashboard/manage.py compress --force

Edit the file:

/usr/share/openstack-dashboard/horizon/templates/auth/_login_form.html

In case the multiple authentication method is enabled in the dashboard configuration, a help message appears under the “Authenticate using” box:

`If you are not sure which authentication method to use, contact your administrator.`

To change it with a custom message:

Edit the file:

/usr/share/openstack-dashboard/horizon/templates/auth/_description.html