User Tools

Site Tools



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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
changing_your_story_s_appearance [2013/12/14 01:42]
changing_your_story_s_appearance [2017/10/09 20:39] (current)
Line 1: Line 1:
-If you'd like to change the colors, typeface, or other parts of your story'​s visual appearance, you may do so by creating a stylesheet ​passage and writing CSS code.+#redirect [[stylesheet]]
-When a story is first loaded, all passages tagged ''​stylesheet''​ are added to the page's CSS. Tags are case-sensitive,​ so tagging a passage ''​Stylesheet''​ or ''​STYLESHEET''​ will have no effect. Also, there is no guaranteed order in which rules are added, so conflicting rules may produce unpredictable results. 
-=====Example selectors===== 
-^ Selector ​                   ^ Description ^ 
-| ''​body'' ​                   | Affects everything displayed -- a great place to change the typeface for the entire page. | 
-| ''#​sidebar'' ​                     | The Sugarcane sidebar, containing the StoryMenu. | 
-| ''#​floater''​ | The Jonah StoryMenu (which usually only contains '​Restart Story'​) | 
-| ''#​passages'' ​              | A container for all passages displayed on the page. | 
-| ''​.passage'' ​               | A single passage on the page. In Sugarcane, this element fades in whenever you change passages, whereas ''#​passages''​ remains constant. | 
-| ''​.passage .title''​ | The passage title in Jonah. | 
-| ''​.passage .toolbar''​ | The passage toolbar in Jonah. | 
-| ''​.passage a''​ | A link. | 
-| ''​.passage a:​hover''​ | A link that the cursor is hovering over. | 
-| ''​.passage a:​active''​ | A link that is in the midst of being clicked. (You can use this to make a link "light up" when clicked.) | 
-| ''​.disabled''​ | A link created through the ''<<​choice>>''​ macro that is not longer available to the reader. | 
-| ''#​footer'' ​                | The footer at the bottom of Jonah (e.g. "This story was built with Twine and is powered by TiddlyWiki"​). | 
-As an example, this hides all passage titles from view in the Jonah story format: 
-.passage .title { display: none } 
-For more examples, see the [[frequently asked questions]] page. 
-=====Tagged stylesheets===== 
-Normally, every stylesheet applies to all of the passages. If a passage has additional tags apart from '​stylesheet'​ (for instance, '​stylesheet forest'​),​ then it will only apply to passages which themselves have that tag. This allows you to easily make different sections of a story have different styles to distinguish them. 
-=====Transition stylesheets===== 
-A special tag exists: ''​transition''​. If a stylesheet has this tag, then its styling will replace the default passage transition animation. 
-When writing a transition animation in CSS, you will make use of the following selectors: 
-^ Selector ​                   ^ Description ^ 
-| ''​.transition-out'' ​       | A passage that is disappearing. This is only used in Sugarcane and similar formats. The styles in this CSS block define the //final// state of the passage'​s appearance - for instance, if this passage is fading out, its ''​.transition-out''​ style could have ''​opacity:​ 0;''​. | 
-| ''​.transition-in'' ​       | A passage that is appearing. The styles in this CSS block define the //initial// state of the passage'​s appearance - for instance, if this passage is fading in, its ''​.transition-in''​ style could have ''​opacity:​ 0;''​. | 
-| ''​.passage'' ​       | Passages should have additional CSS attributes: ''​transition''​ (used by most browsers) and ''​-webkit-transition''​ (used by certain older mobile browsers). This defines how long and in what manner the ''​.transition-in''​ styles are removed when passages appear, and how the ''​.transition-out''​ styles are added when passages disappear. See [[https://​​en-US/​docs/​Web/​CSS/​transition|this documentation]]. | 
-As an example, the following CSS defines a smooth "​dissolve"​ transition: 
-<​code>​.transition-in { 
- opacity: 0; 
- position: absolute; 
-.passage { 
- transition:​ 1s; 
- -webkit-transition:​ 1s; 
-.transition-out { 
- opacity: 0 !important; 
- position: absolute; 
changing_your_story_s_appearance.1387003378.txt.gz ยท Last modified: 2017/10/09 20:37 (external edit)