Chat Styling Guide

In dem folgenden Artikel lernst du die CSS Befehle kennen, um das Chat fenster nach deinen Wünschen zu stylen und anzupassen.

Bitte beachte: jeder CSS Befehl startet mit #foxbase-selector

Im folgenden findest du ein Beispiel, wie nun der erste CSS Befehl für “Change chat window size” umzusetzen wäre.

#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

Beachte, dass die Schriftart als Datei auf einem öffentlich zugänglichem Ordner liegen muss, oder du FoxBase, der digtizer.app, Zugriff dazu erteilen musst. Füge die URL am Anfang der CSS Maske ein und definiere deine Font Families für deine Schriftarten. Bspw. 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::placeholder {

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;

}