# 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](https://4085427665-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmNZnjWXxJyOlZsAFjscN%2Fuploads%2Fu3nara2AHQ4IQ1Yn77zM%2F152247576-b9073293-3a8d-42e6-b6fc-89be9c9b54b5.png?alt=media\&token=0d2646d6-c6f4-4761-aea7-8f2bebe56431)

## 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.