Chat Styling Guide

In the following article, you will learn the CSS commands to style and customize the chat window to your liking.

Please note: every CSS command starts with #foxbase-selector

Below you will find an example of how to implement the first CSS command for "Change chat window size".

#foxbase-selector .ai-chat{
width: 100%
height: 600px
}

Layout & Sizing

Change chat window size

.ai-chat {

width: 100%;

height: 600px;

}

Make chat window full screen size

.ai-chat {

width: 100dvw;

height: 100dvh;

box-sizing: border-box;

}

Add margin outside the chat window

.ai-chat {

margin top: 20px;

margin-bottom: 20px;

margin-left: 20px;

margin-right: 20px;

}

Remove border around chat window

.ai-chat {

border: none;

}

Change border radius of chat window

.ai-chat {

border radius: 10px;

}

Change border radius of chat header

.ai-chat .chat-header {

border-top-left radius: 10px;

border-top-right radius: 10px;

}

Visual Design & Colors

Change background color of chat window

.ai-chat {

background-color: #f0f0f0;

}

Change background color of all messages

.ai-chat .chat-message {

background-color: #f0f0f0;

}

Change background color of user messages

.ai-chat .chat-message[data-role="user"] {

background-color: #f0f0f0;

}

Change background color of assistant messages

.ai-chat .chat-message[data-role="assistant"] {

background-color: #f0f0f0;

}

Change background color of chat header

.ai-chat .chat-header {

background-color: #f0f0f0;

}

Change background color of send button

.ai-chat .chat-input .send-button svg > g > rect:first-child {

fill: #f0f0f0;

}

Change icon color of send button

.ai-chat .chat-input .send-button svg > g > g > path:first-child {

fill: #333;

}

Typography & Text

Note that the font must be placed as a file on a publicly accessible folder, or you must give FoxBase, the digtizer.app, access to it. Paste the URL at the beginning of the CSS mask and define your font families for your fonts. E.g. Bold, Italic, Condensed etc.

@font-face {
    font-family: 'space-grotesk-bold';
    src: url(https://cdn.foxbase.de/fonts/Space_Grotesk/SpaceGrotesk-Bold.ttf) format("ttf")
}

Change font family of all text

.ai-chat {

font-family: "Comic Sans MS", cursive, sans-serif;

}

Change size and style of chat header title

.ai-chat .chat-header > :first-child {

font-size: 24px;

font-weight: bold;

color: #333;

}

Change color of chat header action dots

.ai-chat .chat-header .header-actions svg > g > path:first-child {

fill: #333;

}

Change font size and color of all messages

.ai-chat .chat-message {

font-size: 16px;

color: #333;

}

Change font size and color of user messages

.ai-chat .chat-message[data-role="user"] {

font-size: 16px;

color: #333;

}

Change font size and color of assistant messages

.ai-chat .chat-message[data-role="assistant"] {

font-size: 16px;

color: #333;

}

Change font size and color of text input placeholder

.ai-chat .chat-input .input-sizer .input-field::p laceholder {

font-size: 16px;

color: #999;

}

Change font size and color of text input text

.ai-chat .chat-input .input-sizer .input-field {

font-size: 16px;

color: #333;

}

Change font size and color of "clear chat" action

.ai-chat .chat-header .header-actions .actions .action {

   font-size: 16px;

   color: red;

}