# Branding

The look and feel of OpenIAM can be changed using **Cascading Style Sheets (CSS)**, an industry-standard way of styling a web page. While the content of a page is rendered with HTML, its look and feel is determined by CSS files. Creating CSS styles that work seamlessly across different browsers is a delicate task for basic websites, and reasonably challenging when customizing web applications like OpenIAM. It is important to test each change that you make and ensure it works as expected in all areas of OpenIAM.

If you are not familiar with CSS, see [this link](https://www.w3schools.com/css/css_intro.asp). You should spend some time to become confident with Cascading Style Sheets before you start editing your style sheets.

### What can be customized using CSS?

Every page's style can be overridden using CSS.

{% hint style="info" %}
Any page that is defined by page template (Role, Groups, User Self-registering forms, etc.) can be customized to have custom HTML.
{% endhint %}

**What cannot be changed using CSS?**

* The HTML structure of the page.
* Any `<img>` tags are not configurable via the UI.

You can override CSS for a particular Content Provider and/or a Pattern. To do this, follow the instructions below.

## Customizing branding in OpenIAM

#### Configure the UI Theme

The first step (before creating the CSS file), is to set up the UI Theme. Go to **Administration** > **UI Themes**. Then, to edit the existing theme click the *Edit* icon in front of it; to create a new theme, select **New UI Theme**.

Enter the correct name and URL. Click *Save*.

#### Assign the theme to the Content provider

After creating a theme, you can then assign it to a Content Provider.

Go to **Access Control** > **Content Providers**.

There is a default theme used for all the Content Provider's URI patterns, if the pattern doesn't specify its own UI Theme. To change the theme, find your content provider, click the *edit* icon and choose your theme in the *UI Theme* drop-down.

#### Select a UI theme for the URI pattern

This step is **optional**. You can specify a UI Theme for a URI Pattern. The selected pattern will override the one in the parent Content Provider.

By default, all Patterns inherit UI Themes from the Content Provider settings.

Access the **Edit Content Provider** window and scroll to the *URL Patterns* form located at the bottom of the window. Click the *Edit* icon in front of the Pattern to update. On the following example we will edit the `/selfservice/*` pattern.

Choose the theme required in *UI Theme* field:

#### Update CSS

Once the previous steps are finished, update the CSS files. The last CSS file to load on each page will be the *Stylesheet URL* of the UI Theme. This way, you can override any and all of our default CSS.


---

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