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 by writing CSS code.

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:

.passage .title { display: none }

For more example, see the frequently asked questions page.

changing_your_story_s_appearance.1386997193.txt.gz · Last modified: 2017/10/09 20:37 (external edit)