User Tools

Site Tools


This is an old revision of the document!

Frequently asked questions

Here are some answers to commonly asked Twine questions. (Forgive the fact that the headings are phrased in the form of answers and not the questions themselves.)

How to install CSS code / stylesheets

Paste the code into a passage with “stylesheet” in the tags box (or one created by selecting New Stylesheet from the Passage menu). Such passages must only contain CSS code.

How to install script code / Javascript code

Paste the code into a passage with “script” in the tags box (or one created from selecting New Script from the Passage menu). Such passages must only contain Javascript code.

How to import jQuery

Turn the “jQuery” StorySetting to “on”. OR, include the text “requires jQuery” in the code of at least one script passage.

Note: this installs a copy of jQuery 1.11, inserting the code directly into the built HTML file, rather than using a Google CDN reference. This allows the game to be playable without an internet connection.

How to import local font files

Use “Import Font” in the Passage menu. Then, you can use the font family in your CSS. For instance:

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

Or, if you'd rather use HTML:

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

Note: changing the name of the imported font's passage will not change the name of the font-family you must refer to in the CSS or the HTML.

Note 2: All modern browsers support TTF, OTF and WOFF. SVG are not supported by IE or Firefox, and EOT are only supported by IE.

How to import Google web fonts

You should insert the @‌import CSS code that it provides (in a stylesheet passage, as described above), instead of the Javascript or HTML code. 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 installed, you may use it in CSS or HTML as in the above.

Note: in 1.4.1 or earlier, the @import code must appear at the very start of the first stylesheet passage (i.e. the one whose title is first alphabetically). In 1.4.2 the code is manually hoisted and you don't need to worry.

How to use an image as the page background

In a stylesheet:

body { background-image: url("image URL here"); }

If you're using an imported image:

body { background-image: [img[image name here]]; }

Don't forget that the other CSS background properties (such as background-attachment, background-position, background-repeat and background-size) can be used in tandem with this.

How to horizontally center the text of all passages in Sugarcane

In a stylesheet:

.passage { text-align:center; max-width:50%; margin:auto; } body { margin: 4em; }

Note: 50% can be changed to a different value if you want the text to be wider or narrower.

How to reduce the maximum width of passage text in Sugarcane


.passage { max-width:50%; }

Change 50% to a different value if you want the text to be wider or narrower.

How to change the width of text in <center> elements in Sugarcane


.passage center { max-width:50%; }

Change 50% to a different value if you want the text to be wider or narrower.

How to remove the entire Sugarcane sidebar


#sidebar { display: none; }

If you're also centering the text, be sure to include this:

#passages ( margin-left: 0; }

How to remove the Jonah passage titles


.passage .title { display: none }

How to remove the Jonah passage titles, except for the current passage


.passage:not(:last-child) .title { display: none }

How to vertically center the text of all passages in Sugarcane


html, body { height:100%; margin-top: 0 !important; }
#passages { display:table; height:100%; }
.passage { display: table-cell; vertical-align:middle; }

As this is a fairly obtuse CSS hack, it may affect certain custom stylesheets adversely.

How to remove the vertical line to the left of Sugarcane passages


#passages { border-left: 0px; padding-left: 0; }

How to attach "alt text" (title text) to a span of passage text


<abbr title="Alt text">Passage text.</abbr>

How to disable the standard syntax for a span of text, for ASCII art, etc.

The monospace syntax can be used to do this:

{{{ <<(@__@)>> }}}

In Twine 1.4, you can simply write

[[Link text|$variable]]

In Twine 1.4, you can use HTML tags freely, and don't need <html> blocks.

How to <<display>> a passage whose name is in a variable

In Twine 1.4, you can just write:

<<display $variable>>

How to randomly print one of a set of text strings

Use the either() function:

<<print either("string 1", "string 2", "string 3")>>

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

How to change the page title

Twine code:

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

In Sugarcane, this will only remain until you change passages. But (in 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. If (in Twine 1.4.1) you write:

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

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

A 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 to disable the browser's 'back' button in Sugarcane

In Twine 1.4: set “Undo” in StorySettings to “off”.

How to change the styles for just one passage in Sugarcane.

You can do this without needing to create a separate stylesheet passage. HTML:

<style> Put your CSS here </style>

Using <style> tags outside of the page's <head> is technically invalid but is supported by all browsers.

How to change the stylesheet for multiple, specific passages in Sugarcane.

In Twine 1.4, give the 'stylesheet' passage an additional tag of your choosing, then tag other story passages with that tag. Only the passages with that tag will be affected by the stylesheet.

How to change the mouse cursor into an image

CSS (using an imported image):

* { cursor: [img[some image]] 8 8, auto; }

Alter the '8's to be the X and Y pixel coordinates of the cursor's hotspot, measured from the image's top-left corner. And if you want a different image when it's over a hyperlink:

.passage a { cursor: [img[some image]] 8 8, auto; } 

The maximum permitted image size is 128×128 pixels. Animated GIFs are not permitted. IE doesn't support this.

frequently_asked_questions.1391172173.txt.gz · Last modified: 2017/10/09 20:37 (external edit)