🎨
Customising styling
How to make the look and feel of Trialogue your own
For a general introduction to customising styling in Twine, see:
To edit styling in Twine, choose 'Edit Story Stylesheet' in the bottom left menu:
Edit the Story Stylesheet via the bottom left menu
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 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.Last modified 1yr ago