4.1. Customization of portal theme#

This section describes how to customize the Univention Portal theme in Nubus for Kubernetes. You need the Helm Chart for Nubus, your customized custom_values.yaml deployment file, and the files for customization described in this section.

You can customize the following elements of the Univention Portal:

The favorite icon, also known as favicon.
The background image.
The style sheet. For a list of variables, see Style sheet variables.
The logo for the loading animation.

For all of these elements you need to provide a suitable file, such as an image file or a CSS file. Creating these files is beyond the scope of this document.

Important

Kubernetes stores the aforementioned elements of the Univention Portal customization in a ConfigMap, and they have a size limit of 1 MiB. If your customization changes exceed this size limit, you can store large images outside of Nubus and add a URL reference in the style sheet CSS file.

4.1.1. Configure and apply custom theme#

To apply your custom files to the Univention Portal, use the following steps:

Base64-encode the files as shown in Listing 4.1.
Listing 4.1 Encode files for customization to Base 64#
```
$ base64 --wrap 0 $FILENAME
```
Add the Base64 encoded string of the content to your custom_values.yaml with the following keys:
Listing 4.2 shows an example.
Listing 4.2 Configuration in custom_values.yaml#
```
nubusPortalFrontend:
  portalFrontend:
    branding:
      backgroundImage: "<Base64 encoded string of the background image.>"
      css: "<Base64 encoded string of the CSS file.>"
      favicon: "<Base64 encoded string of the favicon.>"
      logo: "<Base64 encoded string of the logo.>"
```

To apply the updated configuration in your custom_values.yaml file to Nubus, run the commands in Listing 4.3. Kubernetes then automatically restarts the affected Kubernetes pods with the applied configuration.

Listing 4.3 Apply customization to Nubus#

$ export NAMESPACE_FOR_NUBUS="Set to your Kubernetes namespace"
$ export RELEASE_NAME="The Helm Chart release name"
$ export VERSION="Your version of Nubus"
$ helm upgrade \
   "$RELEASE_NAME" \
   --namespace="$NAMESPACE_FOR_NUBUS" \
   oci://artifacts.software-univention.de/nubus/charts/nubus \
   --values custom_values.yaml \
   --version "$VERSION"

4.1.2. Restore default theme#

To restore the default Univention Portal theme in Nubus for Kubernetes, follow these steps:

Remove each customization setting from your custom_values.yaml that you want to restore to the default. You find the settings in the following keys:
To apply the updated configuration, run the commands in Listing 4.3.

4.1.3. Style sheet variables#

The CSS style sheet defines the following variables. The list only mentions the variables without explaining them in detail. The style sheet also defines several CSS classes.

When you open the portal in your browser, you can find the style sheet in the web developer tools, in the style editor in the custom.css file. You can also use the web developer tools to live edit the style and see its effect on the portal. However, you must manually save the changes and apply them to Nubus for Kubernetes, as described in Configure and apply custom theme.

Nubus for Kubernetes - Customization and Modification Manual 1.x

Customization of portal theme

Contents