HELP!

I opened my project and it was empty! How do I get it back?

Don't panic. This behavior has been observed in OSX Lion and may be due to Finder issues. Instead of double-clicking your Twine project in Finder to open it, open the Twine application, go to the menu File > Open Story… and open your file from there. If problems persist, please go to the Twinery Help forum.

GENERAL QUESTIONS

How do I install some new CSS code / a new stylesheet?

All CSS used in a Twine project must live in a passage with the tag stylesheet. Passages that have the right stylesheet tag have a purple frame.

1. Create a new stylesheet passage by right-clicking in your Twine workspace and choosing “New Passage Here” from the context menu. (You can also make an ordinary passage and manually enter stylesheet in the “tags” input.)

2. Copy the CSS code you want to add, and paste it into the stylesheet passage you just created.

That's it! This CSS will now be available to your entire Twine project.

Note that stylesheet passages must contain onlyCSS code. Putting HTML or JavaScript in a stylesheet passage may cause unexpected results.

You can add as many stylesheet passages as you like, or you can keep all your CSS in one stylesheet passage–whichever is more convenient for you to use.

In CSS, what do the dots and number signs mean?

A dot (.) indicates a class name. There can be many elements of the same class within an HTML page. For example, a class named “smurf” would look like this in the CSS:

.smurf { color: blue; }

And like this in the HTML:

<div class="smurf">Clumsy</div>
<div class="smurf">Brainy</div>

A number sign (#) indicates an id. This means it's a unique name. There can be only one element with the given id in an HTML page. For example, an id named “highlander” would look like this in the CSS:

#highlander { color: red; }

And like this in the HTML:

<div id="highlander">Connor</div>

If the HTML also contained

<div id="highlander">The Kurgan</div>

you would have a problem!

(A “div” is just a general division in HTML. A nice thing about a div is that it doesn't have any effect on the contents of the tag except what's defined by the specified CSS class.)

How do I install some new JavaScript code?

All JavaScript used in a Twine project must live in a passage with the tag script. Passages that have the right script tag have a brown frame.

1. Create a new script passage by right-clicking in your Twine workspace and choosing “New Script Here” from the context menu. (You can also make an ordinary passage and manually enter script in the “tags” input.)

2. Copy the JavaScript code you want to add, and paste it into the script passage you just created.

That's it! This JavaScript will now be available to your entire Twine project.

Note that script passages must contain only JavaScript code. Putting HTML or CSS in a script passage may cause unexpected results.

You can add as many script passages as you like, or you can keep all your JavaScript in one script passage–whichever is more convenient for you to use.

How can I make my Twine playable offline? / How do I import jQuery?

In Twine, go to the menu Story > Special Passages > StorySettings, scroll down to “Include the jQuery script library?” and check the box beside it.

OR

Add the text “requires jQuery” to any script passage.

Doing this will install a copy of jQuery 1.11 into the built HTML file, rather than using a Google CDN reference. This means the game will be playable even without an internet connection.

How do I import a new font from my local computer?

In Twine, go to the menu Story > Import Font. This will open a file browser window for you to choose the file of the font you'd like to add (for example, myFunFont.ttf). Select the desired font file and click “Open.”

Now you can use the font family in the CSS of a stylesheet passage, like this:

.passage {
font-family: "myFunFont", sans-serif;
}

You can also use it in HTML in a passage, like this:

<font face="myFunFont">Some text</font>

You can do one or the other, but you don't have to do both!

Note: No matter what the name of your passage is, you must refer to the imported font by the name it was imported as.

Note: While all modern browsers support the font file formats TTF, OTF and WOFF, the font file format SVG is not supported by IE or Firefox, and the font file format EOT is supported only by IE.

Once you've chosen your Google font, choose the @import tab to view the CSS code for the font. Copy this CSS code and paste it into a stylesheet passage. (See the top of this FAQ for how to make a stylesheet passage.)

Also, if you wish to use multiple fonts, you should, for convenience, add them all to a 'collection' while browing GFonts, and obtain the code specific to that collection.

Once the @import code is added to a stylesheet passage in your project, you may use it in CSS or HTML anywhere in the project.

Note: In 1.4.1 or earlier, the @import code had to appear at the very start of the stylesheet passage that came first alphabetically. In 1.4.2 the @import code can appear anywhere (Twine manually hoists it where it needs to be.)

How do I install SugarCube?

Unzip the download. It should unzip into a directory named “sugarcube.”

Copy the whole “sugarcube” directory into your Twine application into the “targets” folder. On OSX, this is usually under /Applications/Twine/Contents/Resources. (To browse to the contents of the Twine application in Finder, right-click on the Twine application icon and choose “Show Contents.”)

Restart Twine, and under the menu Story > Story Format you'll now see the option “Sugarcube.”

SUGARCANE STORY FORMAT QUESTIONS

How do I change the horizontal alignment of the text in all my passages in Sugarcane?

This CSS example will change the text's horizontal alignment to the center:

How do I <<display>> a passage whose name is in a variable?

How do I print one random text string from a set?

You can have any number of comma-separated strings in the parentheses.

How do I change the page title?

Twine code:

<<set document.title = "Page title">>

In Sugarcane, this will only remain until you change passages. But as of Twine 1.4.1, if you put this code inside the StoryMenu passage (or StorySubtitle or StoryAuthor), then it will run every time a passage is visited.

Also, as of Twine 1.4.1, this line:

<<set document.title = passage()>>

will set the page title to the name of the current passage (as it was in Twine 1.3.5).

Note: The page title is set to automatically match the contents of the StoryTitle passage. If you have some macros in that passage that change its contents, then the page title will also be updated.

How do I change the mouse cursor into an image?

This CSS sample will use an imported image “happyLittleTree” and give it a hot spot 20 pixels wide and 10 pixels tall, measured from the image's top left corner:

{ cursor: [img[happyLittleTree]] 20 10, auto; }

This is how to use this technique to display a different cursor image when hovering over a hyperlink:

.passage a { cursor: [img[happyLittleTree]] 20 10, auto; }

Note: The maximum permitted image size for a cursor is 128×128 pixels. Animated GIFs are not permitted, as IE doesn't support this.

SCRIPTING

How do I get things in and out of a list variable?

Twine arrays are handled like standard Javascript arrays–which themselves a little strange IMO. Here's how to add something to a list (within a Twine passage):