Global CSS overrides

You can customize nearly every aspect of the TalkJS UI. Not all parts of the TalkJS UI are currently exposed as components. If you need to change the styles of those internal parts of the UI, you can use the Global CSS overrides section of the theme editor.

Any CSS styles added to this section of the theme editor will get applied globally, to all parts of the TalkJS UI. By contrast, any styles you add to a component will only be applied to that one component.

Warning: Use global CSS overrides with caution, and only for styling non-editable built-in components. When TalkJS updates, internal CSS class names and DOM structure may change without warning. Such changes can cause your styles to stop working, or to behave unexpectedly.

Examples

You can change the style of anything in TalkJS by adding a global CSS override. Start by using your browser's developer tools to find the element you want to edit, and make a note of its CSS class. Then, add that class to your global CSS overrides and specify the new style.

Here are just a few examples of how you could use global overrides:

Hide the "day marker"

The day marker appears whenever two messages occur on different days. You can hide the marker by setting its style to display: none:


1.DayMarker {
2  display: none;
3}

Customize the chat panel background

You can already set a custom background colour for the chat panel, but with a global override you can customize it much more.

For example, making the background semi-transparent:


1.Panel {
2  background-color: rgba(255, 255, 255, 0.6);
3}

Or to really show that anything is possible, you can even use a 1990s-style tiled image as the background, covering your chat UI in cats.


1.Panel {
2  background-image: url('https://placekitten.com/100/100');
3}

Customize the "read marker"

By default, when your message has been sent to the server, a single checkmark appears. When everyone in the chat has read your message, it becomes a double checkmark.

You could customize the read marker by hiding the original text, and adding the new text with ::after:


1.MessageTicks--unread {
2  font-size: 0;
3}
4
5.MessageTicks--unread::after {
6  content: '😢';
7  font-size: 8pt;
8}
9
10.MessageTicks--read {
11  font-size: 0;
12  letter-spacing: initial;
13}
14
15.MessageTicks--read::after {
16  content: '☺️';
17  font-size: 8pt;
18}