Twine: changing style and variables

For an overview of variable and conditionals download the variables in twine example


Copy paste this example in the story > edit story stylesheet page


@import url(;
/* this is a font import see below what it means */

/* Everything between these symbols is a comment and it won't affect the appearance */

Cascading Style Sheets (CSS) is a language for specifying how documents (usually web pages) are presented to users. CSS code doesn't include content, only how parts of a document will appear in the browser.

To set the appearance of certain elements you need to know the names of the HTML elements. In case of twine2 there are only a few of them so it will be easy.
--- This tutorial refers to the Harlowe format ---

In the example below body is the selector, background-color is the property, #0f0f0f; is the value of the property.
The property:value; syntax is mandatory, including the semicolon. 

body is the container for everything else in the page.

body {
background-color: #E2FFED;

Multiple properties can defined for each element. Try to copy and paste these lines:

background-image: url("");


Color values in CSS can take five different forms: two hexadecimal, and two decimal, and plain-text color names like "black," "red," "pink," etc.

Hexadecimal goes from 0 to F, where A is 10, B is 11, etc. and F is 15. The max value for any color is FF, or 255 in decimal. When used to represent color, each third of the string represents a different color - red, green, and blue, in that order. So the components of a six-length hex string are like so: #ffffff

Here's red in 6-length hex: #ff0000

And here's the same color in 3-length hex, in which each value is effectively doubled (f -> ff, 0->00, etc.), resulting in an identical color value of the above 6-length hex: #f00

The max value for decimal notation is 255. So if we wanted to represent red with decimal notation, it'd look like this:

Here's red in decimal notation: rgb(255, 0, 0) 

You can have a 4th channel too, which is the alpha, i.e. opacity

rgba(255, 0, 0, 0.5)

/* tw-passage is the style of each passage. Here are some common properties */

tw-passage {
background-color: #4FFFB8;
width: 400px;
border: 5px solid #3CE8B7;
border-radius: 10px;

You can use custom fonts from google fonts
Here's how:
1. pick a font you like
2. click "quick use"
3. copy and paste the @import code at the very top of this page
4. copy and paste the font-family code inside the element you want to change (see below)

tw-passage {
font-family: 'Poiret One', cursive;
font-size: 30px;

/* Note how you can have multiple selectors pointing at the same element the properties below will override the properties above 

/* offset-x | offset-y | blur-radius | color */
tw-passage {
text-shadow: 1px 1px 2px rgba(0,0,0,0.5); 

/* tw-link will change the links' appearance */
tw-link {
color: rgb(255, 0, 215); 

/* uncomment this if you want the "undo" arrow to disappear */

tw-icon.undo {

tw-icon.redo {


You can find a more extensive tutorial about CSS here:


If you want to add an image to a passage you can use the html tag img specifying the full URL of the image on the internet.

This displays an image I found on the internet:
<img src=”” alt=”” />

This displays an image I uploaded on my personal space
<img src=”” alt=”” />


Scripting in twine beyond variables and “if” is kind of complicated but here’s a complete tutorial that works only with the Harlowe style

Advanced twine example with macros

Made by Katie Rose Pipkin. It includes:

-Custom CSS for individual passages


-Audio playback across the whole story

-Additional scripts like timed passages


To use all of these features (except for custom CSS for tagged passages), you will need to use a story format that does not come installed with Twine 2. It is included in the ZIP file I’ve attached below- the file is called ‘format.js’. Installing it is pretty easy! On the home page of twine, you’ll click the menu item called ‘formats’ in the right-hand sidebar.

Screen Shot 2015-09-12 at 12.06.05 AM

Open it, and click ‘Add new format’

Screen Shot 2015-09-12 at 12.07.00 AM

Now, you’ll need to paste where the file is on your computer. If you are on a Mac (or Linux), the path will look something like this-

file:///Users/you/desktop/twine example/format.js

If you are on windows, it will look more like this-

file:///C:/Users/you/documents/twine example/format.js

But remember each path is specific to where it is on your machine! You can usually look at a file’s info to get its path. (If you have trouble with this, feel free to get in touch with me via email).

On Mac you can see the path of your file by right clicking and selecting get info (don't forget to add file:// at the beginning and format.js ad the end) On Mac you can see the path of your file by right clicking and selecting get info (don’t forget to add file:// at the beginning and format.js ad the end). Twine may get stuck in loading state forever, but it should install the format correctly

That’s it! Now that your new story format is installed, it is available in a list of options when you change your story format. You’ll want to pick Sugarcube 2.

Screen Shot 2015-09-12 at 12.15.40 AM

You can now use advanced macros, music, and other neat things built into this story format. Full documentation is available here – or you can just download my example and play around with some options.

Download a zip file containing a twine example using sugarcube and additional macros

Posted in