======Frequently asked questions======
Here are some answers to commonly asked Twine questions. Thank you for checking to see if your question has already been answered. If it hasn't, please visit the [[http://twinery.org/forum/index.php/board,2.0.html|Twinery Help forum]].
**[[#HELP!]]**
* [[#I opened my project and it was empty! How do I get it back?]]
**[[#GENERAL QUESTIONS]]**
* [[#How do I install some new CSS code / a new stylesheet?]]
* [[#In CSS, what do the dots and number signs mean?]]
* [[#How do I install some new JavaScript code?]]
* [[#How can I make my Twine playable offline? / How do I import jQuery?]]
* [[#How do I import a new font from my local computer?]]
* [[#How do I import a Google web font?]]
* [[#How do I use an image as the story page's background?]]
* [[#How do I add hover text to some text in my passage?]]
* [[#How do I disable the standard syntax so I can show ASCII art?]]
* [[#How can the reader change a variable without navigating away from a passage?]]
* [[#How do I install SugarCube?]]
**[[#SUGARCANE STORY FORMAT QUESTIONS]]**
* [[#How do I change the horizontal alignment of the text in all my passages in Sugarcane?]]
* [[#How do I change the maximum width of passage text in Sugarcane?]]
* [[#How do I change the width of just the text that's centered (placed in
elements) in Sugarcane?]]
* [[#How do I remove the Sugarcane sidebar?]]
* [[#How do I vertically center the text of all passages in Sugarcane?]]
* [[#How do I remove the vertical line to the left of Sugarcane passages (between the passages and the sidebar)?]]
* [[#How do I disable the browser's 'back' button in Sugarcane?]]
* [[#How can I change the style of just one passage in Sugarcane?]]
* [[#How do I change the styles for multiple, specific passages in Sugarcane?]]
**[[#JONAH STORY FORMAT QUESTIONS]]**
* [[#How do I remove all Jonah passage titles?]]
* [[#How do I remove all Jonah passage titles but the current one?]]
**[[#NAVIGATION AND EXPRESSIONS]]**
* [[#How do I use a variable as the passage name in a link?]]
* [[#How do I link to a passage inside a HTML block?]]
* [[#How do I <> a passage whose name is in a variable?]]
* [[#How do I print one random text string from a set?]]
* [[#How do I change the page title?]]
* [[#How do I change the mouse cursor into an image?]]
**[[#SCRIPTING]]**
* [[#How do I get things in and out of a list variable?]]
=====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 [[http://twinery.org/forum/index.php/board,2.0.html|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 //only// CSS 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:
Clumsy
Brainy
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:
Connor
If the HTML also contained
The Kurgan
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 > [[special_passages|StorySetting]]s**, 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:
Some text
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 E////OT is supported //only// by IE.
====How do I import a Google web font?====
Browse the [[https://www.google.com/fonts][Google web font]] page for the font you want. For a single font, you can click the little middle "Quick Use" button (a right arrow in a box). If you want multiple fonts, it's handy to add them to a collection and work with the CSS of that collection. (Details about this are available on the [[https://www.google.com/fonts][Google web font page]].)
{{:g-fonts-import.png?nolink|}}
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 use an image as the story page's background?====
This CSS example sets the background image to be **http://www.funimages.com/images/happyLittleTree.png**
body { background-image: url("http://www.funimages.com/images/happyLittleTree.png"); }
If you've imported the image into your project, you can use the imported [[image]] syntax in your CSS:
body { background-image: [img[happyLittleTree]]; }
CSS provides a lot of other background properties (such as [[https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment|background-attachment]], [[https://developer.mozilla.org/en-US/docs/Web/CSS/background-position|background-position]], [[https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat|background-repeat]] and [[https://developer.mozilla.org/en-US/docs/Web/CSS/background-size|background-size]]) that can be used as well.
====How do I add hover text to some text in my passage?====
Here's sample HTML for your passage:
This text is shown as usual.
====How do I disable the standard syntax so I can show ASCII art?====
You can use the monospace [[syntax]] like so:
{{{ <<(@__@)>> }}}
====How can the reader change a variable without navigating away from a passage?====
You may want to look into the [[http://www.motoslave.net/sugarcube/docs/#macros-button|SugarCube story format]] extension. It provides **[[http://www.motoslave.net/sugarcube/docs/#macros-click|click]]** and **[[http://www.motoslave.net/sugarcube/docs/#macros-button|button]]** macros that can be used like so:
<><><>
<>
====How do I install SugarCube?====
Download the [[http://www.motoslave.net/sugarcube/|latest SugarCube zip]].
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:
#passages { box-sizing:border-box; padding: 0 25% } .passage { text-align:center; }
Other options instead of "center" are "right" and "left."
====How do I change the maximum width of passage text in Sugarcane?====
This CSS example sets the maximum width of passage text to 50%.
.passage { max-width:50%; }
You can also use whole numbers (e.g. 300px will make the text container 300 pixels wide.)
====How do I change the width of just the text that's centered (placed in
elements) in Sugarcane?====
This example sets the maximum width of passage text in
elements to 50%.
.passage center { max-width:50%; }
You can also use whole numbers (e.g. 300 will make the text container 300 pixels wide.)
====How do I remove the Sugarcane sidebar?====
This CSS example makes the sidebar invisible and moves the main text container to the center:
#sidebar { display: none; }
#passages { margin-left: 0; }
====How do I vertically center the text of all passages in Sugarcane?====
CSS:
html, body { height:100%; margin-top: 0 !important; }
#passages { display:table; height:100%; }
.passage { display: table-cell; vertical-align:middle; }
Be advised this is a bit of a hack, and it may have unexpected behavior in some custom stylesheets.
====How do I remove the vertical line to the left of Sugarcane passages (between the passages and the sidebar)?====
#passages { border-left: 0px; padding-left: 0; }
====How do I disable the browser's 'back' button in Sugarcane?====
In Twine 1.4: Under the menu **Story > Special Passages > [[special_passages|StorySetting]]s**, uncheck the box next to "Let the player undo moves."
====How can I change the style of just one passage in Sugarcane?====
The simplest way may be to inject your CSS directly in the passage to have the special style:
HTML (inside the passage):
Be advised using