web
analytics
Skip to main content
It looks like you're using Internet Explorer 11 or older. This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge. If you continue with this browser, you may see unexpected results.

Hyperlinked Stories with Twine

This guide introduces Twine as a lightweight and open-source tool to craft your own hyperlinked stories and games.

Changing the Styling

Twine's default styling uses the Harlowe 3.1.0 Style Format (a set of styling rules and options), with a black background and white text. You can customize how your story looks if you know a little CSS (cascading style sheets). While Style Formats are beyond the scope of this tutorial, you can access the style sheet for your story in the Passages View title menu. Select "Edit Story Stylesheet" and enter the changes you would like in CSS. Note that that the formatting used below is for the default Harlowe 3.1.0 Story Format (see Overview). If you change your Story Format, the markup and HTML might be different.

The image above shows the default styling for your story: black background and white text.


Any easy change is background color. For example, if you'd like your story passage background to be blue and your text to be black, you can specify through CSS both light blue or black options. In the style sheet you specify that you'd like these changes to affect your whole story by calling "tw-story" and using curly brackets to specify those changes.

In the style sheet above, we are saying that the whole story (tw-story) should have a background of light blue and a text color of black.

When you select Play, you'll see the style changes appear immediately.

 

Not sure how to use CSS? Don't spin your wheels! There are multiple tutorials on the internet and librarians happy to help you. Contact Jennifer Grayburn at grayburj@union.edu if you have a style idea and you're not sure how to code it.