Styling

Everything you need to make Chatty beautiful

Setting Chat Icons

The icons are set in the :after pseudo-elements of each .chat-response, like so:

.chat-response.robot:after {
    background: url('resources/robot.png') no-repeat center center;
    background-size: cover;
}

To set the user icon, use the .chat-response.user:after selector. Note that you are not limited to images, you could also use CSS shapes, or icons.

Changing colors

Colors are defined in the ':root' of chat-style.css. To change them, override the variable in your stylesheet and include it after Chatty's stylesheet.

:root {
   --color-green: #0000FF; /* Now green is blue! */
}

I plan on renaming the list of colors to make them more informative in the near future.

The background color of the chat-context element is not set by Chatty, you have absolute control.

Note that it is possible to control the colors in a more granular way by using more specific css selectors. Changing the value of --color-green will change it everywhere green is used. If you only want to change the outline color on the options elements, you could do something like

.ui-option {
   border: 1px solid #00F;
}

Further customization

That's all the built in customization, but with a little CSS an/or JS, you can do whatever you want. If you come up with a great idea, feel free to submit a pull request or open an issue!