> For the complete documentation index, see [llms.txt](https://phivk.gitbook.io/trialogue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://phivk.gitbook.io/trialogue/customising-styling.md).

# Customising styling

For a general introduction to customising styling in Twine, see:

* [Twine 2.2: Learning Twine: Story Stylesheet](https://www.youtube.com/watch?v=GE_06UFb-O0) by [Dan Cox](https://github.com/videlais)
* [CSS is Your Friend: The Basics of Changing Twine's Default Appearance For Newbs](https://twinery.org/forum/discussion/1528/css-is-your-friend-the-basics-of-changing-twines-default-appearance-for-newbs) by Sharpe

To edit styling in Twine, choose 'Edit Story Stylesheet' in the bottom left menu:

![Edit the Story Stylesheet via the bottom left menu](/files/6WuE3H7F5oLIJiybMTFD)

## Changing UI colours

Trialogue uses [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) to set the main colours of the app. You can add the following to your Story Stylesheet and tweak the colour values to fit your needs:

```
:root {
    --bg-color: #C7BDB5;
    --user-color: purple;
    --speaker-color: #A00;
    --sidebar-bg-color: #FFF;
    --navbar-bg-color: #FFF;
    --passage-bg-color: #FFF;
    --passage-text-color: #000;
}
```

## Setting speaker avatars and colours

Setting **avatar image** and **text color** of a bot speaker with the name `bot` (passages tagged `speaker-bot`):

```
.chat-passage-wrapper[data-speaker='bot']:before {
  background-image: url('https://placekitten.com/100/100');
}
.chat-passage-wrapper[data-speaker='bot'] .chat-passage::before {
  color: green;
}
```

Setting the **avatar image** and **text color** of user passages:

```
.chat-passage-wrapper[data-speaker='you']:after {
  background-image: url('https://placekitten.com/100/100');
}
.chat-passage-wrapper[data-speaker='you'] .chat-passage::before {
  color: red;
}
```

Use any [valid CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color) for the `color` property and any public image URL for the `background-image` property.