User Tools

Site Tools


frequently_asked_questions

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

frequently_asked_questions [2014/03/23 01:19]
l [How to change the stylesheet for multiple, specific passages in Sugarcane.]
frequently_asked_questions [2017/10/09 20:39]
Line 1: Line 1:
-======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"​ [[special passages|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 E////OT 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 [[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]]) 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===== 
-CSS: 
-  .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===== 
-CSS: 
-  .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===== 
-CSS: 
-  #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===== 
- 
-CSS: 
-  .passage .title { display: none } 
-  ​ 
-=====How to remove the Jonah passage titles, except for the current passage ===== 
- 
-CSS: 
-  .passage:​not(:​last-child) .title { display: none } 
-=====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;​ } 
- 
-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===== 
-CSS: 
-  #passages { border-left:​ 0px; padding-left:​ 0; } 
- 
-=====How to attach "alt text" (title text) to a span of passage text===== 
-HTML: 
-  <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: 
-  {{{ <<​(@__@)>>​ }}} 
- 
-=====How to link to a passage whose name is in a variable===== 
-In Twine 1.4, you can simply write 
-  [[Link text|$variable]] 
-=====How to link to a passage inside a HTML block===== 
-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 [[function|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 styles 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]]): 
-<​code>​* { cursor: [img[some image]] 8 8, auto; }</​code> ​ 
-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 128x128 pixels. 
-Animated GIFs are not permitted. 
-IE doesn'​t support this.// 
frequently_asked_questions.txt · Last modified: 2017/10/09 20:39 (external edit)