Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Harlowe 2.1 Header Width Problem

So I made a header and a footer in my twine game using Harlowe 2.1. Everything seemed fine except the header was significantly narrower than the footer or the tw-passage. Is there anyway to control the header width?


  • By default the HTML generated from contents of header and footer tagged passages are appended to the generated HTML of the current passage like so.
    (note: I have deliberately removed the side-bar related HTML from the following)
    <tw-passage tags="">
    <tw-include type="header" title="PassageHeader" data-raw="">The header passage.</tw-include>
    The current passage.
    <tw-include type="footer" title="PassageFooter" data-raw="">The footer passage.</tw-include>

    By default the above tw-include elements are displayed inline, which is why they only take up the minimum horizontal width needed to display their contents. If that content needs to cover multiple lines then the tw-include element's width may appear to be the same as that of the current passage's but that is only by chance.

    You can use CSS in your story's Story Stylesheet area to change the two tw-include elements to be displayed as blocks, which would result in them being the same width as the current passage.
    tw-include[type="header"], tw-include[type="footer"] {
    	display: block;
    ... but unfortunately due to the method used by Harlowe to transition (fade-in) from one passage to another the header and footer content will now appear instantly where as the content of the current passage will transition in as normal.

    You will need the skills of a more experienced CSS coder to (possible) over come the above visual effect.
  • Thanks. Is there a listing of what commands can go into the tw-include element?
  • I'm going to review furkle's css page.
  • Well, I actually solved my problem by playing around with the margin property in tw-passage element.
  • edited July 2017
    echolm wrote: »
    I'm going to review furkle's css page.

    That appears to be for harlowe 1, so YMMV; harlowe 2 uses a different structure for its styles, particularly in regards to html and tw-story.
    echolm wrote: »
    Well, I actually solved my problem by playing around with the margin property in tw-passage element.

    If that's working for you, then great, but I'm pretty sure you could wind up overtaking the side bar if you aren't careful, though, so look out for that.
Sign In or Register to comment.