# 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


---

# 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.satisfilabs.com/resource-center/ai-agent-engine/enhance-the-chat-experience/page-themes/custom-css-requests.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.