Howdy, Stranger!

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

Harlowe stylesheets not working

I can't get stylesheets to work in Harlowe 1.0.1 in Twine 2.0.2. I input the following into the stylesheet:

body {
background-color: "black";
color: "white";
font-family: "courier"

but nothing changes in my story. Am I using incorrect syntax? Does Harlowe support stylesheets?


  • There are a couple of issues with your CSS:

    1. You don't wrap CSS color keywords like black and white in double quotes.

    2. The foreground color and font family should be on the tw-story element.

    Try the following:

    body {
    background-color: black;
    tw-story {
    color: white;
    font-family: "courier";
    (note: I assumed you wanted the background colour to cover the whole page and not just the area where the passage text is displayed. If you only want the area where the passage text is to be black then move the background-color: black; from the body to the tw-story selector.)
  • That worked perfectly! Thanks so much :)
  • greyelf wrote:

    2. The foreground color and font family should be on the tw-story element.

    What witchcraft is this?! Everything is supposed to inherit from <body>.
  • If you use the browser's Inspect Element feature to look at the HTML structure of the the story built using Harlowe you will see it is as follows:
    (I tested using Firefox and Chrome)

    The tw-story and tw-passage elements are not children of the body tag, which is one reason why CSS associated with the body does not always flow down to the tw-story and tw-passage elements.
  • I'd consider that a bug.  Both the story display (&lt;tw-story&gt;) and story stylesheet (&lt;style data-title=&quot;Story stylesheet &quot;&gt;) elements are being created outside of what should be their respective parents (&lt;body&gt; and &lt;head&gt;). 

    The latter seems like it's a simple error, using $(document.head).<u>after</u>() instead of $(document.head).<u>append</u>().

    The former seems to be appending &lt;tw-story&gt; to &lt;html&gt; intentionally, depending on the browser to attach it to &lt;body&gt; instead, which isn't defined behavior at all.  No modern browser that I know of will do that.
    [quote]Although the <tw-story> is being reattached to <html>, the browser will transport it to the <body> anyway.
  • My apologies; I'd gotten confused with the fact that the following HTML source will cause the <div> to be transplanted to <body>:
    <!doctype html>
    ...but permuting the DOM after the fact will not.
Sign In or Register to comment.