I use Twine to plan, write, and prototype branching scenarios (and sometimes for the final product). Twine is my favorite tool for this purpose because it’s designed to work with interactive stories and nonlinear content. However, the default style in Harlowe (the starting story format) is boring and makes the links hard to read. Even for prototypes, I always tweak the colors and style a little bit. One easy way to improve the look and feel of a branching scenario in Twine is by adding a single image as the background. Background images in Twine provide the context and setting for the scenario without requiring you to add images with different expressions or variations for every single passage.
In Harlowe, there are two ways to add background images: through enchant macros and CSS. In this post, I share the code for both methods. Even if you don’t understand code, you can copy and paste to use it in your scenarios.
Example background images in Twine
For my branching scenario, “The New Hire with Attitude,” I used a single image of an office conference room as the background. The text is shown in a white box that overlays the background image.
Background images in Twine are responsive. However, you may not see much of the image on a phone, as seen in this screenshot.
Personally, I think it’s fine that the background image mostly disappears on a phone screen. It’s more important that the text is readable and the links are large enough to easily click with your finger.
This style is based on an example by Cathy Moore. She has written about the value of a simple visual design like this that lets you focus on your time and effort on the decisions and branching rather than on complex visuals. (Cathy is who introduced me to Twine many years ago, for which I’m exceedingly grateful.)
Background images with enchant macros
If you’re new to working with Twine, you may find it helpful to review some basics first.
In Twine, a macro is basically a little code snippet. The “enchant” macro can be used to change how elements look. We need at least two enchant macros here: one to set the background (the page) and one to style the passage with the text.
This is the code for the background image in the New Hire with Attitude example (both as a screenshot of the Style passage so you can see the color coding and as a code block for copying.
{(enchant:?page,
(bg:”[image.png]”)
)(enchant:?passage,
(text-colour:black)+
(bg:#fdfdfd)+
(css:”padding:1.2em”)
)(enchant:?link,
(color:navy)
)(hide:?sidebar)
}
Let’s break down each part of the macros.
(enchant:?page) is the macro affecting the page, or the entire background.(bg:) refers to the background. This is where you put either an absolute or relative link to your image.(enchant:?passage) is the macro to style the text passage. The passage is the container for the text: the white box and everything inside it. This sets the text color to black, the background to white, and adds a little padding or space around the edge of the box.(enchant:?link) changes the color of the links. You could skip this macro if you don’t need to change the color.(hide:?sidebar) removes the sidebar. By default, the sidebar includes undo and redo buttons. Again, this is optional; you can use the sidebar if you want.The entire thing is enclosed in curly braces { } to collapse the whitespace.
The Harlowe manual explains more about the (enchant:) macro (and every other macro).
Background images with CSS
For one of my recent client projects, I used a different approach for styling. My client wanted something that matched their brand colors. Instead of a photo background for the entire page, I used a seamless pattern. This gives it a subtle effect that’s more interesting than just a solid color but not as distracting as a photographic background image. (Since this is an actual client project, I replaced all of the content with placeholder text.)
I started with the Twine CSS Template by Daniel Talsky. If you’re at least a little familiar with CSS (or can look up what you need), this is a great starting point. The CSS is heavily commented, which makes it easy to figure out which parts to change. It still took some testing and revision to get everything working the way I wanted, but the process was much faster than if I’d started from scratch.
Here’s the relevant portion of the CSS for the background image and passage (including the comments from the CSS template). Place this code in the CSS stylesheet for the story.
/* These are the default options for the entire browser window */
tw-story {
background-image: url(“images/background_pattern.png”);
background-color: #AE654A;
/* Color is the foreground / font color */
color: #282828;
}
/* These are the default options for the each passage area */
tw-passage {
/* This lets the story take up most of its width up to a maximum readable width
an `em` is about the width of one of your letters. max-width lets the size
get wider and wider with the size of the window but only to a sane point
It’s ok to experiment with making this smaller or larger */
max-width: 55em;
/* This centers the main story column in the window */
margin: 0 auto 0 auto;
/* This gives the passage a bit of padding on all sides */
padding: 1em;
background-color: #F4F4EE;
}
More on Twine
Whether you use enchant macros or CSS, adding background images is an easy way to add visual interest to your branching scenarios in Twine.
Looking for more on Twine? I have written a number of posts about how I use Twine and shared examples of scenarios built in Twine.
