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==== |