This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
frequently_asked_questions [2014/09/25 05:30] ateyourlembas Fixed link syntax |
frequently_asked_questions [2017/10/10 00:39] (current) |
||
---|---|---|---|
Line 11: | Line 11: | ||
* [[#How do I install some new CSS code / a new stylesheet?]] | * [[#How do I install some new CSS code / a new stylesheet?]] | ||
- | * [[#In CSS, what do the dots and hashtags mean?]] | + | * [[#In CSS, what do the dots and number signs mean?]] |
* [[#How do I install some new JavaScript code?]] | * [[#How do I install some new JavaScript code?]] | ||
* [[#How can I make my Twine playable offline? / How do I import jQuery?]] | * [[#How can I make my Twine playable offline? / How do I import jQuery?]] | ||
Line 50: | Line 50: | ||
* [[#How do I change the page title?]] | * [[#How do I change the page title?]] | ||
* [[#How do I change the mouse cursor into an image?]] | * [[#How do I change the mouse cursor into an image?]] | ||
+ | |||
+ | |||
+ | **[[#SCRIPTING]]** | ||
+ | |||
+ | * [[#How do I get things in and out of a list variable?]] | ||
Line 58: | Line 63: | ||
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]]. | 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===== | =====GENERAL QUESTIONS===== | ||
Line 75: | Line 81: | ||
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. | 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 hashtags mean?=== | + | ===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: | 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: | ||
Line 86: | Line 92: | ||
<div class="smurf">Brainy</div> | <div class="smurf">Brainy</div> | ||
- | A hashtag (#) 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: | + | 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; } | #highlander { color: red; } | ||
Line 202: | Line 208: | ||
Restart Twine, and under the menu **Story > Story Format** you'll now see the option "Sugarcube." | Restart Twine, and under the menu **Story > Story Format** you'll now see the option "Sugarcube." | ||
+ | |||
Line 221: | Line 228: | ||
.passage { max-width:50%; } | .passage { max-width:50%; } | ||
- | You can also use whole numbers (e.g. 300 will make the text container 300 pixels wide.) | + | You can also use whole numbers (e.g. 300px will make the text container 300 pixels wide.) |
Line 282: | Line 289: | ||
This CSS sample makes the passage titles invisible: | This CSS sample makes the passage titles invisible: | ||
- | .passage .title { display: none } | + | .passage .title { display: none; } |
| | ||
====How do I remove all Jonah passage titles but the current one?==== | ====How do I remove all Jonah passage titles but the current one?==== | ||
Line 288: | Line 295: | ||
This CSS sample makes all passage titles invisible except for the current one: | This CSS sample makes all passage titles invisible except for the current one: | ||
- | .passage:not(:last-child) .title { display: none } | + | .passage:not(:last-child) .title { display: none; } |
| | ||
Line 318: | Line 325: | ||
You can have any number of comma-separated strings in the parentheses. | You can have any number of comma-separated strings in the parentheses. | ||
- | =====How do I change the page title?===== | + | ====How do I change the page title?==== |
Twine code: | Twine code: | ||
Line 335: | Line 342: | ||
- | =====How do I change the mouse cursor into an image?===== | + | ====How do I change the mouse cursor into an image?==== |
This CSS sample will use an imported image "happyLittleTree" and give it a hot spot 20 pixels wide and 10 pixels tall, measured from the image's top left corner: | This CSS sample will use an imported image "happyLittleTree" and give it a hot spot 20 pixels wide and 10 pixels tall, measured from the image's top left corner: | ||
Line 346: | Line 353: | ||
//Note:// The maximum permitted image size for a cursor is 128x128 pixels. Animated GIFs are not permitted, as IE doesn't support this. | //Note:// The maximum permitted image size for a cursor is 128x128 pixels. Animated GIFs are not permitted, as IE doesn't support this. | ||
+ | |||
+ | |||
+ | |||
+ | =====SCRIPTING===== | ||
+ | |||
+ | ====How do I get things in and out of a list variable?==== | ||
+ | |||
+ | Twine arrays are handled like standard Javascript arrays--which themselves a little strange IMO. Here's how to add something to a list (within a Twine passage): | ||
+ | |||
+ | <<set $currentLoops = [] >> | ||
+ | <<set $march = "march.mp3">> | ||
+ | |||
+ | Add a parade... | ||
+ | |||
+ | <<set $currentLoops.push($march)>> | ||
+ | |||
+ | Now remove it... | ||
+ | |||
+ | <<set $currentLoops.splice($currentLoops.indexOf($march),1)>> | ||
Hope this helps, and happy Twining! | Hope this helps, and happy Twining! |