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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://phivk.gitbook.io/trialogue/customising-styling.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.