In our first article on Twine in the beanz August 2022 issue, we discussed how to create Interactive Fiction stories using just text and links. Now, with a little coding, let’s add styling and multimedia to our interactive stories. To start, access our story project, The Library Book, which you can find at https://binkybearbytes.itch.io/
Using CSS, we can control the look and feel of the majority of our projects. Click on Story and # Stylesheet to add some CSS. You can add styling to the project, passages, links, and even the sidebar using standard code you can find online. For example, background images from the web can give your project a different look. Pixabay is a great source for royalty-free stock images. Just use the following code:
tw-story {
image:url("https://cdn.pixabay.com/photo/2021/10/04/04/28/books-6679452_1280.jpg");
background-size:cover;
}
Give text passages and sidebars background colors to help with readability:
tw-passage {
background-color: white;
}
tw-sidebar {
background-color: white;
}
Twine separates parts of stories into individual passages. We can add internal styling and multimedia to these as well.
Since we don’t want the sidebar with the arrows to show up on the main page and we want the text centered and the passage a little narrower, we can use style tags to do that.
Adding sound effects makes stories come to life. Pixabay and SoundBible are great places to get royalty-free audio files. To auto-play these files in your story, you will need to be able to share them as links from a host site. Although there isn’t a simple way to do this (for now), there is a workaround. The website Wix hosts multimedia files for free (you don’t even have to create a website, just a free account). Once you upload your sound-effect files, you will have a link that can be shared. Go to your passage and type the following:
When in doubt, visit Twine’s official Harlowe online guide. Don’t forget to visit W3C’s pages on CSS to look up styling code.
Learn More
Versions 1 and 2 of The Library Book
https://binkybearbytes.itch.io/
Twine
Harlowe Online Guide
Pixabay
SoundBible
Wix Web Hosting
https://www.wix.com/free/web-hosting
embed.tube Code Generator
https://embed.tube/embed-code-generator/youtube/
