Skip to content

Local customisations

Azimuth allows a few site-specific customisations to be made to the user interface, if required.

The Azimuth UI includes a documentation link in the navigation bar at the top of the page. By default, this link points to the generic Azimuth user documentation that covers usage of the reference appliances.

However it is recommended to change this link to point at local documentation that is specific to your site, where possible. This documentation can include additional information, e.g. how to get an account to use with Azimuth, which is out-of-scope for the generic documentation.

To change the documentation link, use the following variable:

environments/my-site/inventory/group_vars/all/variables.yml
azimuth_documentation_url: https://docs.example.org/azimuth

Theming

The Azimuth UI is built using the Bootstrap frontend toolkit, which provides a grid system and several built-in components.

Bootstrap is built to be customisable - please consult the Bootstrap documentation for more information on how to do this. Several websites also provide free and paid themes for Bootstrap - by default, Azimuth uses the Pulse theme from the Bootswatch project.

Replacing the Bootstrap theme

It is possible to replace the Bootstrap theme completely by pointing to a different compiled CSS file. For example, the following configuration tells Azimuth to use the Zephyr theme from Bootswatch:

environments/my-site/inventory/group_vars/all/variables.yml
azimuth_theme_bootstrap_css_url: https://docs.example.org/azimuth

Injecting custom CSS

In addition to replacing the entire theme, Azimuth also allows custom CSS to be injected. This can be useful for applying small tweaks, or making modifications to the Azimuth UI that are not part of your chosen theme.

In particular, custom CSS can be used to add a logo to the navigation bar. For example, the following snippet adds the Azimuth logo to the navigation bar instead of the cloud label:

environments/my-site/inventory/group_vars/all/variables.yml
azimuth_theme_custom_css: |
  .navbar-brand {
    background-size: auto 100%;
    background-repeat: no-repeat;
    text-indent: -9999px;

    background-image: url('https://raw.githubusercontent.com/stackhpc/azimuth/master/branding/azimuth-logo-white-text.png');
    height: 60px;
    width: 220px;
  }

Tip

The image must already be available somewhere on the internet - Azimuth does not currently have support for hosting the logo itself.

The height and width should be adjusted to match the aspect ratio of your logo and the desired size in the Azimuth UI.

Warning

If you are using the default Pulse theme, make sure to include the following at the top of your custom CSS:

@import url(/pulse-overrides.css);

This is because Azimuth has some Pulse-specific tweaks that you will need to keep. For more details, see the CSS file, which has comments indicating why these are necessary.

Last update: April 9, 2024
Created: April 9, 2024