🎨Customising styling

How to make the look and feel of Trialogue your own

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

• Twine 2.2: Learning Twine: Story Stylesheet by Dan Cox

• CSS is Your Friend: The Basics of Changing Twine's 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

Changing UI colours

Trialogue uses CSS variables 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 for the color property and any public image URL for the background-image property.