Navigation
User login
Upcoming events
Recent Events
- 17 weeks 4 days ago
- 20 weeks 2 days ago
- 29 weeks 5 days ago
- 31 weeks 6 days ago
- 32 weeks 1 day ago
Newest Games
Search
Who's online
Revision of Twine FAQ/How-to, first draft from Mon, 07/29/2013 - 21:26
How to install CSS code / stylesheets
Paste the code into a passage with "stylesheet" in the tags box.
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.
Such passages must only contain Javascript code.
How to horizontally center the text of all passages in Sugarcane
CSS:
.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 remove the entire Sugarcane sidebar
CSS:
#sidebar { display: none; }
If you're also centering the text, be sure to include this:
#passages ( margin-left: 0; }
How to 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; }
How to remove the vertical line to the left of Sugarcane passages
CSS:
#passages { border-left: 0; padding-left: 0; }
How to use custom fonts
CSS:
@font-face {
font-family: 'font name here';
src: url('fontfile.ttf');
font-weight: normal;
font-style: normal;
}Then, in other CSS declarations, you can do this:font-family: "font name here", sans-serif;Most every browser supports .ttf and .woff font files
How to attach "alt text" (title text) to a span of passage text
HTML:
<abbr title="Alt text">Passage text.</abbr>
How to link to a passage whose name is in a variable
Twine code:
<<print "[[Link text|" + $variable + "]]">>
How to link to a passage inside a HTML block
HTML:
<a href='javascript:void(0)' class='internalLink' onclick='state.display("PassageName")'>Link text</a>
Or, install this script to obviate the need for HTML blocks.
How to <<display>> a passage whose name is in a variable
Twine code:
<<print tale.get($variable).text>>
Or, install this script.
How to change the page title
Twine code:
<<set document.title = "Page title">>
In Sugarcane, this will only remain until you change passages.
How to disable the browser's 'back' button in Sugarcane
Install this script.
How to change the stylesheet for just one passage in Sugarcane.
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.
Install this script and follow its instructions.
This is easier than copy-pasting the same <style> content into each passage, and allows the CSS to be edited easily.
How to change the mouse cursor into an image
CSS:
* { cursor: url( imageurl.gif ) 8 8; }
And if you want a different image when it's over a hyperlink:
a.internalLink, a.externalLink { cursor: url( imageurl.gif ) 8 8; }
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.
The maximum image size is 128x128 pixels.
Animated GIFs are not permitted.
IE, Opera, and certain Mac versions of browsers, don't support this.