How do I adjust the header height in harlowe2.?

0 votes
asked Nov 24, 2017 by Van (120 points)
1)how to adjust height of header?

2)how to adjust width of body to full window size?

1 Answer

0 votes
answered Nov 24, 2017 by greyelf (97,410 points)

how to adjust height of header?

I am going to assume you mean a header tagged special Passage, when converted to HTML by the story format looks something like the following.

<tw-include type="header" title="The Name you gave the Passage" data-raw="">
	The contents of the Passage.

You can only assign heights to block based elements, so you need to first change the tw-include element to display as a block before you can assign the element a height. You can do this by placing CSS like the following within your story's Story Stylesheet area, it will effects all header tagged special Passages.

tw-include[type="header"] {
	display: block;
	height: 4em;

WARNING: The downside to changing the element to a block is that it effects the method the story format uses to transition to a new passage, which results in a delay between the showing of the header section and the showing of the content of the current passage. I personally don't know a way around this delay or if it's even possible to stop it from happening.

how to adjust width of body to full window size?

The default width of the main Passage area is controlled by the width of the tw-story element, which is set to 60% (of the web-browser's view-port width) by default. The tw-story element's width combined with the element's automatically calculated left & right margin is what centres the main Passage area as well as creates the left clear area where the left 'side-bar' appears. The tw-story element's width can be increased using CSS like the following.

tw-story {
	width: 70%;

WARNING: If you increase the width to far then there won't be a clear space for the story format to position it's left 'side-bar' in, which in turn will eventually cause the 'side-bar' to appear off-screen if that element's attributes are not adjusted. So if you want to make the width 100% then you will need to determine what you want to do with the 'side-bar'

Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.