"Left Sidebar": Harlowe (only v2.1.0 or later)


Harlowe v2.1.0 or later includes a built-in named hook named ?Sidebar. When combined with the (append:) macro, dynamic content can be added to the left, blank area containing the default Undo and Redo links. A "footer" tagged passage is used to update the dynamic content after each passage transition, and CSS is used to resize and position the existing tw-sidebar element.

Live Example

Download: Live Example

Twee Code

:: StoryTitle
Left Sidebar in Harlowe (v2.1.0 or later)

:: UserStylesheet [stylesheet]
    Reposition the Sidebar 'footer' tagged passage.
tw-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 20%;                        /* padding-right of the tw-story element. */
    max-height: 100%;
    margin-top: 5%;                    /* padding-top of the tw-story element. */
    padding: 0 0.5em 0.5em 0.5em;
    text-align: right;
    background-color: transparent;
tw-icon {
    text-align: right;
    padding-right: 0.75em;

:: Start
(set: $name to "Jane Doe", $location to "Work")\
[[Another passage]]

:: Sidebar [footer]
(append: ?SideBar)[\
Name: $name
Location: $location

:: Another passage
(set: $name to "John Smith", $location to "Shop")\

Download: Twee Code

See Also

CSS and Passage Tags

results matching ""

    No results matching ""