›

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

ItsOnlyAGameShowItsOnlyAGameShow
edited November 2015 in Help! with 2.0
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

  • brunhildrbrunhildr
    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;
}
  • greyelfgreyelf
    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>
  • TheMadExileTheMadExile
    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.
  • LL
    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.
  • ItsOnlyAGameShowItsOnlyAGameShow
    Thanks everyone that's sorted it right out.