The Header and Footer

Content

Normally, Chapbook displays your story's title and a link to restart it at the bottom of the page. This area, called the footer, can be changed to include additional information and links. You can also add information at the top of the page, in its header, in a similar manner. The Cloak of Darkness example, for instance, displays the current location in the header.

The header and footer are further divided into three areas: left, center, and right. You do not need to place content into each area--Chapbook does its best to evenly space your content regardless of which areas you use.

To change a header or footer area, set the corresponding variable in the config object.

Remember that you must set the object property to a string for it to function correctly--meaning, you must put single or double quotes around the value. For example:

config.header.center: "Midday"

The contents of the variable are interpreted the same way that passage text is, so you can use links, inserts, and, technically, modifiers in the variables:

config.header.right: "Money left: {money}"
config.footer.center: "[[Other stories in this anthology]]"

The header and footer are designed to display a single line of text, though, so modifiers are probably of limited use. The header and footer are updated every time a new passage is shown in the body of the page, so variable inserts like the one shown above will automatically update during play.

Borders

In addition to setting the font and color of the header and footer, you may also change the appearance of the borders that appear between them and the main passage text. These borders normally are visible only when there is content displayed in the header or footer.

There are two variables that control the appearance of the border itself:

• config.style.dark.page.footer.border
• config.style.dark.page.header.border

Similar to config.style.page.style.border, they take three possible values.

• 'none' causes no border to be shown, even if there is content in the header or footer.
• 'thin-line' causes a thin line to be used as a border.
• 'thick-line' uses a thick line instead.

To set the color used by the border, set either:

• config.style.dark.page.footer.borderColor or
• config.style.dark.page.header.borderColor.

This should be a single color, like 'orange-2'.