User Tools

Site Tools



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

Link to this comparison view

sugarcane_html [2014/03/19 07:38]
sugarcane_html [2017/10/09 20:39]
Line 1: Line 1:
-======Sugarcane HTML structure====== 
-As a reference for those writing [[stylesheet]]s,​ the HTML structure of the **Sugarcane** [[Story format]] looks like this: 
-    <body data-tags="">​ 
-      <ul id="​sidebar">​ 
-        <li id="​title"​ class="​storyElement">​ 
-          <span id="​storyTitle"​ class="​storyElement">​Untitled Story</​span>​ 
-          <span id="​storySubtitle"​ class="​storyElement"></​span>​ 
-          <span id="​titleSeparator">​ 
-            <br> 
-          </​span>​ 
-          <span id="​storyAuthor"​ class="​storyElement">​Anonymous</​span>​ 
-        </li> 
-        <li id="​storyMenu"​ class="​storyElement"​ style="​display:​none"></​li>​ 
-        <li id="​snapback">​Rewind</​li>​ 
-        <li id="​restart">​Restart</​li>​ 
-        <li> 
-          <a id="​bookmark"​ title="​Permanent link to this passage"​ href="#​.0">​Bookmark</​a>​ 
-        </li> 
-        <li id="​credits">​This story was created with  
-          <a href="​http://​">​Twine</​a>​ 
-           and is powered by  
-          <a href="​http://​">​TiddlyWiki</​a>​ 
-        </li> 
-      </ul> 
-      <div id="​snapbackMenu"​ class="​menu"></​div>​ 
-      <div id="​passages">​ 
-        <div id="​passageStart"​ class="​passage"​ style="​visibility:​ visible;">​ 
-          <div class="​header"></​div>​ 
-          <div class="​body content">​ 
-          Your story will display this passage first. Edit it by double clicking it.</​div>​ 
-          <div class="​footer"></​div>​ 
-        </​div>​ 
-      </​div>​ 
-      <div id="​storeArea"​ hidden="">​ 
-      ...passage data is stored here... 
-      </​div>​ 
-    </​body>​ 
-    ​ 
-Some notes: 
-  * Both the body element and the .passage element'​s data-tags attribute reflects the tags of the current passage. This was originally used just as a CSS hook, before the advent of tagged stylesheets in version 1.4.0. 
-  * The .header and .footer divs are unused by Twine'​s normal operations, but can be styled in any manner you like. .body.content contains all the rendered HTML of the passage. 
-  * #snapback is not present when no passage in the story is [[tag|tagged]] "​bookmark"​. 
-  * #​snapbackMenu is the floating menu that appears when you use the Rewind button. 
-  * When a different passage is displayed, a .passage div and its contents (.header, .footer and .content) are recreated anew and inserted into the #passages div. 
-  * During transitions,​ the #passages div contains the old passage (which transitions toward the styles assigned to .transition-out) and the new passage (which transitions from the styles assigned to .transition-in) 
sugarcane_html.txt ยท Last modified: 2017/10/09 20:39 (external edit)