======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