TWINE 102

Basic CSS & some tips learned along the way

Adding backgrounds to your story.

DON'T: Add backgrounds to each slide individually. This gets messy if you want to have both a background and an image on the slide.

DO: Use Twine' style sheet and tag feature. You can code your background into the style sheet, and assign that specific background a tag. Then just label the slide with the tag and you are good to go! The Tarzan tutorial uses three backgrounds: one for the book path, one for the film path, and one general.

How to Add Backgrounds:

Create (or acquire) your background image. The tutorial backgrounds were made in Canva (free account; I used the template for making computer wallpaper). The backgrounds were saved in a folder dedicated to images for this tutorial named them in a way that I would (hopefully!) remember: tarzan-tutorial-background, book-background, and movie-background. My images were in .png format, but any format should work.
Set up tags in Twine. You can set up tags in the Stylesheet. In Twine, at the bottom of the screen next to the title of your story, there is a triangle. Clicking on the triangle will open a menu, from there you select "Edit Story Stylesheet." This is where you can set the font, borders, or any rule that you want to apply to the entire story. Here is what my code looked like for one of the background images:

tw-story[tags~="leaves"] {
background-image: url("images/tarzan-tutorial-background.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}

Decode this: the tag is named "leaves," the saved image is in a folder named "images" and is called "tarzan-tutorial-background" and is in .png format. The background is not repeated (only appears once), is stretched to cover the entire screen, and is centered on the screen.
Assign a tag to your slide. After you've created a tag (step 2, above), you can add them to your Twine slides. When you open a new slide in Twine, there will be a button that says +tag. After clicking on this, I would choose the tag leaves, assigning this background to your slide.

Please note: You will not be able to see if the background works, until you test the game on your server.

Add a solid color background to your text.

DON'T: Choose a background that is too busy - this is both inaccessible and distracting.

DO: If you chose a background that interferes with your text (like I did...oops!), you can add a solid color to back your text on Twine so it is readable.

How to Add a Background to Your Text:

Add this code to the top of your Twine slide and use the hex code for the background color that you want. I used the same "base color" as my background images. Don't forget to close your bracket at the very bottom of your Twine slide. You can see this in context on the Twine 101 page of this website.

(background:#f8f7ed)[

Decode this: I'm adding an image to a slide of the movie poster for Tarzan. The .png file for this poster is located in a folder named "images" and the file is named "tarzan-poster." I had to resize this image to be 233x334 pixels (if you don't need to resize your image, you can leave this part of the code out), and I added alt text for screen readers.

Embedding images.

DON'T: Over-complicate it. There are a few different ways that you can embed images into the slides (and probably some more elegant than what I did), stick with what works for you.

DO: Save your Twine images in one location, with a logical image name--this makes typing the file path (or changing the images later) much easier.

How to Add an Image to a Slide:

Decode this: I'm adding an image to a slide of the movie poster for Tarzan. The .png file for this poster is located in a folder named "images" and the file is named "tarzan-poster." I had to resize this image to be 233x334 pixels (if you don't need to resize your image, you can leave this part of the code out), and I added alt text for screen readers.

Need more help?

DON'T: stress! There is a lot of support online for Twine.

DO: Read the Twine Cookbook - I kept my tab to this resource open in Chrome for the entire months-long process of building this tutorial.

How to Add an Image to a Slide:

Decode this: I'm adding an image to a slide of the movie poster for Tarzan. The .png file for this poster is located in a folder named "images" and the file is named "tarzan-poster." I had to resize this image to be 233x334 pixels (if you don't need to resize your image, you can leave this part of the code out), and I added alt text for screen readers.