Howdy, Stranger!

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

Can't get the CSS to apply to my story in Harlowe

Hey, I'm using Harlowe on the Twine 2 Mac app, and none of the styles I've put in the stylesheet seem to be applying to the actual story. I ended up moving over to Snowman, where it worked fine, but I don't really have time right now to get to grips with all of the script I'd need on there. So I want to use the macros on Harlowe, but it won't let me change any of the defaults.

Is this a known issue? I've tried looking for information about whether I'm meant to use different syntax for Harlowe in CSS but I couldn't find anything.

So none of this (or any of the rest of the CSS) is applying:

body {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
margin-top: 100px;
background-color: grey;
font-weight: 550;
}

Edit: Just imported it into the web editor and I have the same problem. So confused! Tried putting this styling into passage {} as well with no luck.

Comments

  • I'm not an specialist, but I think it might be the tags you are using. Harlowe doesn't use the tag ~body~ as default text. Instead, try using tw-story {} as in:
    tw-story {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    margin-top: 100px;
    background-color: grey;
    font-weight: 550;
    }
    
  • As explained by brunhildr, Harlow is not like a standard HTML document that places all the content within the body element and because of this not all CSS attributes assigned to a body selector will be inherited by the tw-story element.

    A relevant part of a default HTML document looks something like this:
    <body>
    	The document's content....
    </body>
    
    ... where as a story generated using Harlowe looks something like this:
    <body>...</body>
    <tw-story>
    	<tw-passage>
    		<tw-sidebar>...</tw-sidebar>
    		The current Passage's content...
    	</tw-passage>
    </tw-story>
    
  • As an aside. The <tw-story> element should be inside the <body> element. That it is not is a bug which was supposed to have been fixed some time ago. I know I brought it to Leon's attention quite a while ago and he acknowledged it as being something to fix.

    Yet another reason Harlowe should have its issue tracker enabled.
  • The reason I can't fix the placement of <tw-story> in the HL 1.x.x line is because a few peoples stories applied CSS to <tw-story> that breaks if <body> is wrapped around it, due to margins, etc. I of course fully intend to propagate this fix to the 2.x.x releases.
  • Thanks everyone that's sorted it right out.
Sign In or Register to comment.