User Tools

Site Tools



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

Link to this comparison view

changing_your_story_s_appearance [2013/11/13 00:33]
klembot created
changing_your_story_s_appearance [2017/10/09 20:39]
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). 
-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. | 
-| ''#​floater'' ​               | The story menu in the upper-right corner of the page. | 
-| ''​h1'' ​                     | The story'​s title. | 
-| ''​h2'' ​                     | The story'​s subtitle. | 
-| ''​h3'' ​                     | The story'​s author. | 
-| ''#​passages'' ​              | A container for all passages displayed on the page. | 
-| ''​.passage'' ​               | A single passage on the page. | 
-| ''​.passage .title'' ​        | A passage'​s title. |  
-| ''​.passage .toolbar'' ​      | A container for the Bookmark and Rewind to Here links for each passage. | 
-| ''​.passage .body'' ​         | A passage'​s body text. | 
-| ''​.passage .body .internalLink''​ | A link to another passage in the story. | 
-| ''​.passage .body .brokenLink''​ | A link that points to a nonexistent passage in the story. | 
-| ''​.passage .body .externalLink''​ | A link that points to another Web page. | 
-| ''​.passage .body .choice'' ​ | A link created through the ''<<​choice>>''​ macro. | 
-| ''​.passage .body .disabled''​ | A link created through the ''<<​choice>>''​ macro that is not longer available to the reader. | 
-| ''#​footer'' ​                | The footer at the bottom of the page (e.g. "This story was built with Twee and is powered by TiddlyWiki"​). | 
-As an example, this passage hides all passage titles from view in the Jonah story format: 
-.passage .title { display: none } 
changing_your_story_s_appearance.txt ยท Last modified: 2017/10/09 20:39 (external edit)