Changing the look & feel of your Twine scenario

Edit the stylesheet

All of the following tips apply to the Harlowe format, which is the default for version 2 of Twine.

For the changes on this page, you’ll edit the CSS stylesheet for your story. Open the stylesheet by clicking the triangle next to the name of your story.

Screenshot showing how to edit the Twine stylesheet

Change the default font

Twine’s default font is Georgia. To change this, edit the stylesheet to change the font used by tw-passage. It might look like this:

tw-passage {
font-family: arial;
}

Learn more at the w3schools CSS font tutorial.

Add a background image

1. Create and upload the image
Create a biggish image (maybe 1900 pixels wide). You might make it blurred or lighten it so it doesn’t dominate the story.

Upload it as a JPG to a web server that everyone who uses your scenario will be able to see. Amazon S3 is an economical option if your organization doesn’t have its own server.

2. Tell Twine to use the image as the background for all passages
You’ll add some CSS code to the stylesheet. If you don’t know CSS, try copying and pasting the following.

body {
background-image:
url(“http://your-image-url.jpg”);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

3. Test it
Close the stylesheet window and click “Play” to see your story. You should see the background image behind the text of your story, and nothing weird should happen when you resize the scenario window.

Put the passage text on a white background

Now that you have a background image, it might be hard to read your text. To have the text display on a white box, add something like the following code:

tw-passage {
background-color: white;
padding: 2em;
}

Make the “back” arrow easier to see

By default, the “back” arrow that appears on the left isn’t very opaque, so it can be hard to see against a background image. The arrow is called “tw-icon,” and you can change its opacity with something like this:

tw-icon {
opacity: 1.0;
}

Opacity can range from 0 (completely transparent) through 0.5 (50% transparent) to 1.0 (solid).

Change the link colors and weight

If you’re familiar with CSS, you’ll expect the color of linked text to be associated with a. However, in the Harlowe format that we’re using here, links are tw-link. Here’s some code you can play with.

tw-link {
color: black;
}

tw-link:hover {
color: green;
}

tw-link.visited {
color: grey;
}

tw-link.visited:hover {
color: green;
}

Don’t like how the links are boldface? Add font-weight: normal; to your code. Example:

tw-link {
color: brown;
font-weight: normal;
}

 

More in this series

What is Twine?
Getting started with Twine
Links for more Twine tips

Share
Tweet about this on TwitterShare on LinkedInEmail this to someone