# Creating and adding a custom CSS file to OpenIAM

Creating a custom CSS file allows you to tailor the appearance and behavior of an application beyond the default styling provided out of the box by OpenIAM. This can help align the user interface with your corporate branding requirements, improve usability and accessibility, or adapt the layout to your specific business needs and workflows.

In case this is what you need, OpenIAM provides a possibility to customize the look and feel of your application using a CSS file, as described below.

{% stepper %}
{% step %}

### Create the directory structure.

```bash
sudo mkdir -p /data/openiam/conf/ui/static/custom/bootstrap-ui/css
sudo mkdir -p /data/openiam/conf/ui/static/custom/images
sudo chown -R openiam:openiam /data/openiam
```

{% endstep %}

{% step %}

### Add your CSS file.

Place your stylesheet at:

```bash
/data/openiam/conf/ui/static/custom/bootstrap-ui/css/custom.css
```

The file **must** be named `custom.css`. Custom images can be placed under the `images/` directory at the same level.
{% endstep %}

{% step %}

### Restart the UI static service

```bash
sudo systemctl restart openiam-ui-static
```

{% endstep %}

{% step %}

### Configure UI theme and Content provider

Once the UI container is up and running, go to **Access Control** > **Content Provider** in the application and select the content provider in use. After that, go to **URI patterns**.

<figure><img src="/files/XHMEtmY4tQRkfbdBpcRp" alt=""><figcaption></figcaption></figure>

Click **Create** and create a new pattern in a similar way as depicted below.

<figure><img src="/files/Qevd346Ovlq5muPFxazS" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/z0qiXtbSYROxn4NjeT1Y" alt=""><figcaption></figcaption></figure>

**Save** and check if the pattern was added.

<figure><img src="/files/1ePH5bwKlHDZNVdwnHqs" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Add a new UI theme

Go to **Administration** > **UI Themes** and click **edit**. In the **Stylesheet URL** field, enter the web-accessible path to your CSS file, e.g. `/openiam-ui-static/bootstrap-ui/css/custom.css`.

<figure><img src="/files/3JvogoOI4GN9bhiN5tVs" alt=""><figcaption></figcaption></figure>

Go to **Content provider** and find the **UI theme** line. Add the theme edited in the step above.

<figure><img src="/files/2TpvCPYDyTeicwOZoOHm" alt=""><figcaption></figcaption></figure>

Hit `Ctrl + F5` to reload the cache. The CSS is applied, as shown below.

<figure><img src="/files/Dv6hHZ5KUZwgnq3DFLR9" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

{% hint style="info" %}
**Note:** In browser developer tools, the CSS file may appear as **custom.css?2026.4.2** where `2026.4.2` is the version of OpenIAM. This is expected cache-busting behavior, not an error.
{% endhint %}

{% hint style="success" %}
**Tip:** If the CSS does not apply after restarting, verify directory ownership (`sudo chown -R openiam:openiam /data/openiam`), restart the service again, and test in a browser incognito window or with a hard reload (Ctrl+F5).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-beta.openiam.com/branding/creating-and-adding-a-custom-css-file-to-openiam.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.