> For the complete documentation index, see [llms.txt](https://docs.satisfilabs.com/resource-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.satisfilabs.com/resource-center/ai-agent-engine/enhance-the-chat-experience/page-themes/custom-css-requests.md).

# Custom CSS Requests

## Add a Full Banner/Header Image

1. In the Satisfi Labs dashboard, go to **Studio -> Page Themes**
2. Select the theme you'd like to edit
3. Upload the banner to the Satisfi Labs dashboard under **Images**
4. Copy the image URL for later use
5. Add the following CSS to the **Custom CSS** container

```
.satisfi_headerContainer{
background-image : url(INSERT IMAGE URL HERE);
height: 85px;
width: auto;
background-size : 100% 100%;
background-repeat : no-repeat;
}
```

6. Paste the image URL you copied in Step 4 into the area of code above (INSERT IMAGE URL HERE)
7. Find the headerTextColor field in the page theme settings and update the custom setting to transparent
8. Save the theme

{% hint style="info" %}
Confirm there is no header image uploaded within page settings!
{% endhint %}

***

## Adjust the Avatar Size

<figure><img src="/files/d8Qtql4g2BqoxSaWjuMs" alt="" width="375"><figcaption><p>Avatars Can Be Added in Page Settings</p></figcaption></figure>

1. In the Satisfi Labs dashboard, go to **Studio -> Page Themes**
2. Select the theme you'd like to edit
3. Add the following CSS to the **Custom CSS** container:

```
.satisfi_avatar{background-size: 3.5rem auto; padding-left: 3.75rem;}
```

4. You can adjust the size as needed by changing the 3.5 and 3.75 values above
5. Save the theme

{% hint style="info" %}
The avatar needs to be uploaded under page settings before completing these steps!
{% endhint %}

***

## Shift Input Container Text

<figure><img src="/files/HiynRh22b7yWsAUAovmD" alt="" width="375"><figcaption><p>"Ask a Question" was shifted to align on the right side vs. the traditional left side</p></figcaption></figure>

1. In the Satisfi Labs dashboard, go to **Studio -> Page Themes**
2. Select the theme you'd like to edit
3. Add the following CSS to the **Custom CSS** container:

```
.satisfi_textInput.satisfi_textAreaInput::placeholder {
    text-align: right !important;
}
```

4. **Save** the theme
5. Click on **Studio -> Pages**

{% hint style="info" %}
If you'd like to adjust this for only one page, duplicate the existing page theme and name it accordingly.&#x20;
{% endhint %}

***

## Custom Font Size <a href="#custom-font-size" id="custom-font-size"></a>

1. In the Satisfi Labs dashboard, go to **Studio -> Page Themes**
2. Select the theme you'd like to edit
3. Add the following CSS to the **Custom CSS** container:

```
.satisfi_headerContainer h1 {
border-bottom: 0px dotted #000066 !important;
}
.satisfi_chat {
font-size: 14px !important
}    
```

4. Adjust the font size next to the font family field
5. **Save** the theme

***

## Custom Popup Settings

1. In the Satisfi Labs dashboard, go to **Studio -> Page Themes**
2. Select the theme you'd like to edit
3. Add the following CSS to the **Custom CSS** container:

{% code overflow="wrap" %}

```
.satisfi_chat-button:hover{ background-color: var(--chatButtonBackground) !important; color: var(----chatButtonFontColorMobile) !important;  }
```

{% endcode %}

**For Simpleview Users:**

{% code overflow="wrap" %}

```
.satisfi_chat-button:hover { color: var(--chatButtonFontColor); padding: var(--chatButtonPadding); background-color: var(--chatButtonBackground); }
```

{% endcode %}

4. **Save** the theme