How to stylize the header/footer with a background

Authoring Twine
1

Hi!

So, I want to have a header/footer with a background which extends to the entire width of the screen (regardless of how much text is present in the header/footer). I also want the header background to have a bigger height than that of the text presented within it - See pic below for an example of what I wish to achieve.
For simplicity sake, say I just want the header/footer background to be black (like in the pic below).

header

Thanks! :slight_smile:

Twine Version:2.3.14
Story Format: Harlow 3.2.2

2

If you created a very basic Harlowe project like the following TWEE Notation based example. That only include a Start passage, a header tagged passage, and a setup tagged passage.

:: Startup [startup]
(set: $variable to "value")

:: Story Header [header]
This is the header

:: Start
This is the rest of the page

And then used your web-browser’s Web Developer Tools to Inspect the HTML structure that is generated when you view the Start passage, you will see it looks something like…

<tw-story tags="">
	<tw-passage tags="">
		<tw-sidebar>
			<tw-icon tabindex="0" alt="Undo" title="Undo" style="visibility: hidden;">↶</tw-icon>
			<tw-icon tabindex="0" alt="Redo" title="Redo" style="visibility: hidden;">↷</tw-icon>
		</tw-sidebar>
		<tw-include type="startup" title="Startup" data-raw="">...</tw-include>
		<tw-include type="header" title="Story Header" data-raw="">This is the header</tw-include>
		This is the rest of the page
	</tw-passage>
</tw-story>

And you will discover that the “header” is actually a child element of the passage. And if you look at the CSS associated with the <tw-include> element you will learn that it is displayed inline, which is why the header text and the passage text appears as one continuous block of text.

You can change that behaviour and apply the header styling you want by adding CSS like the following to your project’s Story Stylesheet area…

tw-include[type="header"] {
	display: inline-block;
	width: 100%;
	background-color: black;
	color: peachpuff;
}

And to alter the styling of the passage content it self you could also add the following to the same area…

tw-passage {
	background-color: peachpuff;
	color: black;
}

…however after you do that you will see that the header area brief displays using the passage’s colours before changing to its own. So you would try applying the passage styling to the whole story instead, by changing the tw-passage element reference in the above CSS selector be tw-story instead…

tw-story {
	background-color: peachpuff;
	color: black;
}

After you’ve done that and viewed the result you will discover that the story layout includes a left & right blank area, the left blank area is where the contents of the <tw-sidebar> element (and its child Undo/Redo links) are shown.

So now you need to decide what to do next… do you get rid of the left sidebar and reclaim that left & right blank areas so that the header styling explains horizontally… or do you change the tw-story reference back to tw-passage in the previous CSS rule… or something else…