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 00:00]
l [Example selectors]
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 writing CSS code.+#redirect [[stylesheet]]
  
-You can add style rules to your story by adding passages with the stylesheet tag. When a story is first loaded, all passages tagged ''​stylesheet''​ are added as CSS rules. 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. 
changing_your_story_s_appearance.1386997239.txt.gz ยท Last modified: 2017/10/09 20:37 (external edit)