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:
- nubusPortalFrontend.portalFrontend.branding.backgroundImage
- nubusPortalFrontend.portalFrontend.branding.css
- nubusPortalFrontend.portalFrontend.branding.favicon
- nubusPortalFrontend.portalFrontend.branding.logo
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.

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"

To ensure that the Portal Frontend uses the updated configuration, you must restart the Kubernetes pod. You must first identify the name of the pod, and then pass the name to kubectl for deletion. Run the commands shown in Listing 4.4.
Listing 4.4 Restart pod for portal frontend to apply customization#
```
$ kubectl get pods --namespace "$NAMESPACE_FOR_NUBUS" | grep "portal-frontend"
$ kubectl delete pod $NAME_OF_POD
```

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:
- nubusPortalFrontend.portalFrontend.branding.css
- nubusPortalFrontend.portalFrontend.branding.favicon
- nubusPortalFrontend.portalFrontend.branding.logo
- nubusPortalFrontend.portalFrontend.branding.backgroundImage
To apply the updated configuration, run the commands in Listing 4.3.
To ensure that the Portal Frontend uses the updated configuration, you must restart its Kubernetes pod. Run the commands in Listing 4.4.

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.0.0

Customization of portal theme

Contents