"CSS Selectors": Harlowe (v2.0)

Note: The following example is designed for use in Harlowe 2.x and later

Summary

This example shows how to use CSS selectors to style different areas of the page. In Harlowe, custom HTML elements are used for layout: the <tw-story> element contains the page as well as a an element containing the currently shown passage, <tw-passage>, and an element containing the sidebar, <tw-sidebar>.

<tw-story>
    <tw-passage>
        <tw-sidebar>...</tw-sidebar>
        ...
    </tw-passage>
</tw-story>

Live Example

Download: Live Example

Twee Code

:: StoryTitle
CSS Selectors in Harlowe

:: UserStylesheet [stylesheet]
tw-story {
    border: 5px solid lightgreen;
}

tw-sidebar {
    border: 2px solid blue;
}

tw-passage {
    border: 1px solid red;
}

:: Start
The page has a green border; it contains this passage (red border) and the sidebar (blue border).
[[Second]]

:: Second
This passage also has a red border.

Download: Twee Code

See Also

See the left sidebar recipe for another example of stylying custom elements like <tw-sidebar>. Harlowe also supports styling passages by tag using its custom 'tags' attribute.

results matching ""

    No results matching ""