User Tools

Site Tools


changing_your_story_s_appearance

Differences

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]
l
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: 
- 
-<​code>​ 
-.passage .title { display: none } 
-</​code>​ 
- 
-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://​developer.mozilla.org/​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; 
-}</​code>​ 
  
changing_your_story_s_appearance.1387003378.txt.gz ยท Last modified: 2017/10/09 20:37 (external edit)