twine1:stylesheet
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
twine1:stylesheet [2017/08/19 20:17] videlais |
twine1:stylesheet [2017/10/09 20:39] (current) |
||
|---|---|---|---|
| Line 28: | Line 28: | ||
| All of these are just standard ways to select HTML elements in CSS, but specifically targeting elements in the Twine [[story format]]s. | All of these are just standard ways to select HTML elements in CSS, but specifically targeting elements in the Twine [[story format]]s. | ||
| - | |||
| - | If you understand HTML and want a better sense of what elements these selectors are targeting, see the following reference pages: | ||
| - | * [[Sugarcane HTML]] | ||
| - | * [[Jonah HTML]] | ||
| ^ Selector ^ Description ^ | ^ Selector ^ Description ^ | ||
| - | | ''.passage'' | All the [[passage]]s on the page. In [[Sugarcane]], unlike [[Jonah]], there's only ever one such passage. Note that this element fades in whenever you change passages, whereas ''#passages'' remains constant. | | + | | ''.passage'' | All the [[passage]]s on the page. In [[twine1:Sugarcane]], unlike [[twine1:Jonah]], there's only ever one such passage. Note that this element fades in whenever you change passages, whereas ''#passages'' remains constant. | |
| - | | ''.passage:last-child'' | In [[Jonah]], this solely targets the "current" passage - the one at the bottom of the page. | | + | | ''.passage:last-child'' | In [[twine1:Jonah]], this solely targets the "current" passage - the one at the bottom of the page. | |
| | ''.passage:not(:last-child)'' | In Jonah, this solely targets the past passages. | | | ''.passage:not(:last-child)'' | In Jonah, this solely targets the past passages. | | ||
| | ''.passage .title'' | The passage title in Jonah. | | | ''.passage .title'' | The passage title in Jonah. | | ||
| Line 49: | Line 45: | ||
| | ''.passage img'' | [[Image]]s in a passage. | | | ''.passage img'' | [[Image]]s in a passage. | | ||
| | ''.passage hr'' | Horizontal lines in a passage. | | | ''.passage hr'' | Horizontal lines in a passage. | | ||
| - | | ''.disabled'' | Links that are not longer available to the reader, created through the ''<<choice>>'' macro, or by turning the Undo [[special passages|StorySetting]] to off. | | + | | ''.disabled'' | Links that are not longer available to the reader, created through the ''<<choice>>'' macro, or by turning the Undo [[twine1:special_passages|StorySetting]] to off. | |
| | ''#passages'' | A container for all passages displayed on the page. | | | ''#passages'' | A container for all passages displayed on the page. | | ||
| | ''body'' | The body of the HTML page -- a great place to change the typeface for the entire page. But, individual elements' styles will usually override this. | | | ''body'' | The body of the HTML page -- a great place to change the typeface for the entire page. But, individual elements' styles will usually override this. | | ||
| Line 69: | Line 65: | ||
| ====Default CSS==== | ====Default CSS==== | ||
| - | In addition to your own CSS code, the story formats' HTML templates come with their own CSS code which provides their default look-and-feel. The code used in version 1.4.2 is listed here: | + | In addition to your own CSS code, the story formats' HTML templates come with their own CSS code which provides their default look-and-feel. |
| - | + | ||
| - | * [[Sugarcane CSS]] | + | |
| - | * [[Jonah CSS]] | + | |
| - | You can eliminate some of this CSS by selecting "Don't use the Story Format's default CSS" in [[StorySettings]], or by including the words "blank stylesheet" in a CSS comment inside your own stylesheets. (This allows other people to create portable stylesheet code that doesn't require the story author to change their StorySettings manually.) | + | You can eliminate some of this CSS by selecting "Don't use the Story Format's default CSS" in [[twine1:special_passages|StorySettings]], or by including the words "blank stylesheet" in a CSS comment inside your own stylesheets. (This allows other people to create portable stylesheet code that doesn't require the story author to change their StorySettings manually.) |
| ====Tagged stylesheets==== | ====Tagged stylesheets==== | ||
twine1/stylesheet.1503188229.txt.gz · Last modified: 2017/10/09 20:38 (external edit)
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
