Chapter 2. Customizing the dashboard
Chapter 2. Customizing the dashboard The Red Hat OpenStack Platform (RHOSP) dashboard (horizon) uses a default theme (RCUE), which is stored inside the horizon container. You can add your own theme to the container image and customize certain parameters to change the look and feel of the following dashboard elements: Logo Site colors Stylesheets HTML title Site branding link Help URL Note To ensure continued support for modified RHOSP container images, the resulting images must comply with the Red Hat Container Support Policy . 2.1. Obtaining the horizon container image To obtain a copy of the horizon container image, pull the image either into the undercloud or a separate client system that is running podman. Procedure Pull the horizon container image: You can use this image as a basis for a modified image. 2.2. Obtaining the RCUE theme The horizon container image uses the Red Hat branded RCUE theme by default. You can use this theme as a basis for your own theme and extract a copy from the container image. Procedure Create a directory for your theme: Start a container that executes a null loop. For example, run the following command: Copy the RCUE theme from the container to your local directory: Terminate the container: Result: You now have a local copy of the RCUE theme. 2.3. Creating your own theme based on RCUE To use RCUE as a basis, copy the entire RCUE theme directory rcue to a new location. This procedure uses mytheme as an example name. Procedure Copy the theme: To change the colors, graphics, fonts, and other elements of a theme, edit the files in mytheme. When you edit this theme, check for all instances of rcue including paths, files, and directories to ensure that you change them to the new mytheme name. 2.4. Creating a file to enable your theme and customize the dashboard To enable your theme in the dashboard container, you must create a file to override the AVAILABLE_THEMES parameter. Procedure Create a new file called _12_mytheme_theme.py in the horizon-themes directory and add the following content: The 12 in the file name ensures this file is loaded after the RCUE file, which uses 11 , and overrides the AVAILABLE_THEMES parameter. Optional: You can also set custom parameters in the _12_mytheme_theme.py file. Use the following examples as a guide: SITE_BRANDING Set the HTML title that appears at the top of the browser window. SITE_BRANDING_LINK Changes the hyperlink of the theme logo, which normally redirects to horizon:user_home by default.
sudo podman pull registry.redhat.io/rhosp-rhel8/openstack-horizon:18.0 mkdir ~/horizon-themes cd ~/horizon-themes sudo podman run --rm -d --name horizon-temp registry.redhat.io/rhosp-rhel8/openstack-horizon /usr/bin/sleep infinity sudo podman cp horizon-temp:/usr/share/openstack-dashboard/openstack_dashboard/themes/rcue . sudo podman kill horizon-temp cp -r rcue mytheme AVAILABLE_THEMES = [('mytheme', 'My Custom Theme', 'themes/mytheme')] SITE_BRANDING = "Example, Inc. Cloud" SITE_BRANDING_LINK = "http://example.com"