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/11/18 04:45]
l Removed Jonah-only 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 with a technology called Cascading Style Sheets (CSS).+#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 will produce unpredictable results. 
  
-Here are some useful CSS selectors. There are DOM inspectors for most major browsers that can also help you develop rules that produce the results you're looking for. 
- 
-^ Selector ​                   ^ Description ^ 
-| ''​body'' ​                   | Affects everything displayed -- a great place to change the typeface for the entire page. | 
-| ''#​sidebar'' ​                     | The Sugarcane sidebar | 
-| ''#​passages'' ​              | A container for all passages displayed on the page. | 
-| ''​.passage'' ​               | A single passage on the page. | 
-| ''​a.internalLink''​ | A link to another passage in the story. | 
-| ''​a.externalLink''​ | A link that points to another Web page. | 
-| ''​a.choice'' ​ | A link created through the ''<<​choice>>''​ macro. | 
-| ''​a.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 passage hides all passage titles from view in the Jonah story format: 
- 
-<​code>​ 
-.passage .title { display: none } 
-</​code>​ 
changing_your_story_s_appearance.1384767958.txt.gz ยท Last modified: 2017/10/09 20:37 (external edit)