In dem folgenden Artikel lernst du die CSS Befehle kennen, um den Chat nach deinen Wünschen zu stylen und anzupassen.
💡 Beachte: jeder allgemeine CSS Befehl startet mit .ai-chat-wrapper .ai-chat { … }
Das folgende Template kannst du nutzen und in “Settings” > “General Settings” > “CSS Editor” reinkopieren.
Die im Template eingetragenen Werte entsprechen den Default Einstellungen ohne direkte Auswirkungen auf das Styling.
Ändere die Farben, Schriftgrößen, Schriftart etc., speichere die Änderungen und lade deinen geöffneten Chat neu, um die Änderungen zu sehen.
Wenn du spezifische Änderungen wie Positionierung hinzufügen möchtest, prüfe die mit den Zeichen /* */ umschlossenen Kommentare unten und entferne bei Bedarf die umliegenden Zeichen /* */.
💡 Beachte: Eigene Schriftarten musst du in einem Font-Dateiformat (beispielsweise .ttf, .otf, aber NICHT .css) mit einer öffentlich erreichbaren URL in den General Settings unter Fonts eintragen, um sie im CSS mit dem vergebenen Namen als font-family eintragen zu können.
Tipp: Auch wenn du kein CSS-Profi bist, kannst du mit einer von dir bevorzugten AI versuchen, mit deinen Ideen, der unten hinterlegten Anleitung und der HTML Struktur deiner AI einen eigenen CSS Code erstellen zu lassen.
/* Instructions:
1. Add your font in the font settings above
2. Change colors, font, sizes etc. whereever needed (currently everthing in this code is set to the default values)
3. When prepared changes are needed like specific positioning, remove the "/ * * /" around it
*/
/* -------- General settings -------- */
/* Change overall chat font (excluding text input field - see below),
change it to e.g. Arial, Helvetica, sans-serif */
.ai-chat-wrapper .ai-chat {
font-family: Times New Roman;
}
/* Change background color of chat window */
.ai-chat-wrapper .ai-chat {
background-color: #fff;
}
/* Change chat window size */
.ai-chat-wrapper .ai-chat {
width: 100%;
}
/* Change border radius of chat window e.g. to 10px instead of 16px for sharper edges */
/*.ai-chat-wrapper .ai-chat {
border-radius: 10px;
}
.ai-chat-wrapper .ai-chat .chat-header {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}*/
/* Remove border around chat window */
/*.ai-chat-wrapper .ai-chat {
border: none;
}*/
/* Add margin outside the chat window */
/*.ai-chat-wrapper .ai-chat {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
}*/
/* -------- Chat header settings -------- */
/* Change chat header */
.ai-chat-wrapper .ai-chat .chat-header {
background-color: #e6e9ed;
color: #00204a;
font-size: 14px;
font-weight: bold;
}
/* Change icon color of closing icon in header */
.ai-chat-wrapper .ai-chat .chat-header .header-close-icon svg>path {
fill: #00204a;
}
/* Change icon color of resize icon in header */
.ai-chat-wrapper .ai-chat .chat-header .header-fullscreen-icon svg>path {
fill: #00204a;
}
/* Change icon colour of dots in header */
.ai-chat-wrapper .ai-chat .chat-header .header-actions svg>g>path:first-child {
fill: #00204a;
}
/* Change font and colour of clear chat action */
.ai-chat-wrapper .ai-chat .chat-header .header-actions .actions .action {
color: #00204a;
background-color: #fff;
}
/* -------- Chat messages settings -------- */
/* Change font and color of all messages, if not divided into user and assistant below */
.ai-chat-wrapper .ai-chat .chat-message {
font-size: 14px;
color: #00204a;
}
/* Change font and color of user messages */
.ai-chat-wrapper .ai-chat .chat-message[data-role=user] {
font-size: 14px;
color: #00204a;
background-color: #f6f6f6;
}
/* Change font and color of assistant messages */
.ai-chat-wrapper .ai-chat .chat-message[data-role=assistant] {
font-size: 14px;
color: #00204a;
background-color: #f6f6f6;
}
/* -------- Text input settings -------- */
/* Change font and color of text input placeholder */
.ai-chat-wrapper .ai-chat .chat-input .input-sizer .input-field::placeholder {
font-family: monospace;
font-size: 14px;
color: #8a98ac;
}
/* Change font family, font size and color of text input text */
.ai-chat-wrapper .ai-chat .chat-input .input-sizer .input-field {
font-family: monospace;
font-size: 12px;
color: #00204a;
}
/* Add margin below the text input field, e.g. 10px */
.ai-chat-wrapper .ai-chat .chat-input {
margin-bottom: 10px;
}
/* -------- Send button settings -------- */
/* Change background colour of send button */
.ai-chat-wrapper .ai-chat .chat-input .send-button svg>g>rect:first-child {
fill: #00204a;
}
/* Change icon color of send button */
.ai-chat-wrapper .ai-chat .chat-input .send-button svg>g>g>path:first-child {
fill: #fff;
}
/* Center the send button vertically within the chat input if font size was changed: select the corresponding size (e.g. bottom 3px for font size 16px) */
.ai-chat-wrapper .ai-chat .chat-input .send-button {
bottom: 0px;
}
/* Change send icon: Icon is an inline svg and not an image url. Changin it requires hiding the current icon and adding a new one as an after-element with an icon from a library like Material Design. */
/*.send-button {
position: relative;
}
.send-button svg g g path {
display: none;
}
.send-button::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
transform: translate(-50%, -50%);
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M16.01 11H4v2h12.01v3L20 12l-3.99-4z'/></svg>");
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
}*/
/* -------- Chat bubble settings -------- */
/* Adjust the size of the chat bubble and its image */
.ai-chat-wrapper .ai-chat .chat-bubble,
.ai-chat-wrapper .ai-chat .chat-bubble img {
width: 60px;
height: 60px;
}
/* Position of chat bubble on mobile e.g. to the right edge */
/*@media (max-width: 480px) {
.ai-chat-wrapper .ai-chat .chat-bubble {
right: 0px;
}
}*/
/* On larger screens e.g. center the chat bubble vertically */
/*@media (min-width: 481px) {
.ai-chat-wrapper .ai-chat .chat-bubble {
top: 50%;
}
}*/
/* Hide chat bubble for closing */
/*.ai-chat-wrapper .ai-chat .chat-bubble.open {
display: none;
}*/
/* -------- Chat popup settings -------- */
/* Change background color of the small chat popup */
/*.ai-chat-wrapper .chat-popup.open .ai-chat .chat-body {
background-color: #158555;
}*/
/* Change background color of the fullscreen chat popup */
/*.ai-chat-wrapper .chat-popup.fullscreen .ai-chat .chat-body {
background-color: #991155;
}*/
/* Chat Full Sceen Overlay - makes sure chat is on top of everything, is set to 100 by default */
/*.ai-chat-wrapper .ai-chat .chat-popup {
z-index: 9999;
}*/
/* Center the chat popup vertically on the screen */
/*.ai-chat-wrapper .ai-chat .chat-popup {
top: 50%;
transform: translateY(-50%);
bottom: auto;
right: 5px;
}
@media (min-width: 481px) {
.ai-chat-wrapper .ai-chat .chat-popup {
right: 112px;
}
}*/
/* Move the attribution to the bottom of the chat popup */
/*.ai-chat-wrapper .ai-chat .chat-popup .attribution {
position: absolute;
bottom: 55px;
left: 0;
right: 0;
box-shadow: none;
}
.ai-chat-wrapper .ai-chat .chat-popup.fullscreen .attribution {
bottom: 5px;
}
@media (max-width: 480px) {
.ai-chat-wrapper .ai-chat .chat-popup .attribution,
.ai-chat-wrapper .ai-chat .chat-popup.fullscreen .attribution {
bottom: -12px;
}
}*/
/* Disable color changes on link to Powered by FoxBase */
/*.ai-chat-wrapper .ai-chat .chat-popup .attribution {
pointer-events: none;
}*/