Message Styling

In the character editor there's an input for "message style" which is the default "styling" applied to each message. The 'syntax' you should use is CSS, but since most people don't know the CSS language, I'll make it easy by documenting some common stylizations that people might want to make below. If something is missing, submit a request for it using the feedback button and I'll add a section for it here.

Important: Note that the AI Character Chat interface has a dark mode and a light mode that is set automatically based on the user's current device/OS settings. If you make a character with the intent to share it with others, it's worth testing on dark and light mode to ensure that it's not to 'hard on the eyes' in either case. You can use light-dark(a, b) in place of any CSS color/value to specify a separate light and dark color/value. For example: color:blue will make the text blue, and color:light-dark(blur, red) will make the text blue in light mode, and red in dark mode.

Some examples:

Here are some examples that you can copy and paste just to get the hang of things. Notice that you must add ; at the end of each stylization rule:

• color:blue; font-size:90%; - make the text color blue, and the size 90% of the default size (i.e. a bit smaller)
• font-weight:bold; color:green; - make the text bold and green
• color:#4287f5; - make the text a specific shade of blue - use a hex color picker to get specific colors
• text-shadow: 0 0 2px #ff8400; - add an orange glow to the text
• background-color:white; border-radius:10px; - add a white background to each message and 'curve' the corners a bit
• background-image:url(https://example.com/image.jpeg); - add a background image to each message bubble
• backdrop-filter:blur(10px); - add a 'frosted glass' effect to the background of each message
• backdrop-filter:blur(10px); border-radius:3px; - add a 'frosted glass' effect and curve the corners of the message bubble a bit
• text-shadow: 1px 1px #FF0000; - add a red "drop shadow" behind the text. if you google "css text shadow maker" then there are tools to help you visually design the exact type of shadow that you want with e.g. the right blur, offset, color, etc.
• font-size:120%; margin-top:50px; - the text a bit bigger, and increase the gap size between messages
• background:white; color:black; border-radius:50px; overflow:hidden; - set the background color to white, the text color to black, and curve the corners of the messages a lot, and also ensure that any content which is "outside" of the curve is hidden - e.g. this makes it so the avatar pic is "cut off" by the curve
• background-color:#003c9c; color:white; font-style:italic; - make the background color a specific shade of blue (again, use a hex color picker to get specific colors), and the text white, and italic

Fonts

If you want to change the font, just go to fonts.google.com and find a font you like. Then add a style rule using the font's name as the font-family. Make sure you put single quote characters around its name like in these examples:

• font-family:'Nova Square'; - a sci-fi type font - fonts.google.com/specimen/Nova+Square
• font-family:'Libre Baskerville'; color:white; - a 'literary' type serif font - fonts.google.com/specimen/Libre+Baskerville and I've also set the text color to white
• font-family:'Ephesis'; backdrop-filter:blur(10px); font-size:120%; - a very curly/cursive font - fonts.google.com/specimen/Ephesis, and I've also added a frosted glass background and made the text a bit bigger

Want to customize something else?

Ask using the feedback button and I'll add a new section here for you. You can also try asking ChatGPT/Claude/etc. for CSS style rules that you can use. Note that it'll probably give you a bunch of code "around" the actual style rules, since it'll assume you're coding full HTML+CSS pages, but you can just extract out the individual style rules from what it gives you. It'd probably help to copy and paste the above list of example styles and ask for what you want and tell it to output some possibilities in the same format as the given example list.

Developers

If you're a programmer, or willing to learn a little, you can override the messable bubble styling on a per-message basis (or per-thread basis) using custom code. For example, here's some code that randomizes the color of the text for each message:

1
2
3
4
5
6

oc.thread.on("MessageAdded", function({message}) {
  let red = Math.round(Math.random()*255);
  let green = Math.round(Math.random()*255);
  let blue = Math.round(Math.random()*255);
  message.wrapperStyle = `color:rgb(${red}, ${green}, ${blue});`;
});