Add Styling and Multimedia to Twine Stories

Spice up your storytelling with these multimedia elements!

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

https://twinery.org/

Harlowe Online Guide

https://twine2.neocities.org/

Pixabay

https://pixabay.com/

SoundBible

https://soundbible.com/

Wix Web Hosting

https://www.wix.com/free/web-hosting

embed.tube Code Generator

https://embed.tube/embed-code-generator/youtube/

 

 

Also In The December 2022 Issue

The electronic toys your parents may have grown up with!

Meet the point where your love of hiking and technology meet.

Learn how kids are falling in love with computer science in Africa

Move over Krabby Paddy, algae burger is coming through!

Show off your Minecraft fighting skills with these RAD mods

Take a bite out of this story on how technology is being used to help communities come together!

A collection of the Learn more links from the December 2022 issue, all in one place, just for you.

A collection of interesting stories about technology and STEM for December 2022