User Tools

Site Tools


changing_your_story_s_appearance

This is an old revision of the document!


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.1384320810.txt.gz · Last modified: 2017/10/09 20:37 (external edit)