Howdy, Stranger!

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

CSS not working in most basic of scripts, even when copy-pasted from tutorials

<n00b question warning>

This is my first day using Twine, so I copy-pasted some CSS from tutorials just to see how it works on a sample script I drummed up. Screenshots of the CSS and the final product are attached. When I hit "Play" or save off an HTML file and open it, the CSS doesn't seem to have worked.

I've tried variations of the CSS (used hex codes instead of color names, taken out everything except a text color change, added link-specific color changes) and I can't seem to get any styling to change. What am I missing?

I'm using the web version of Twine, on a Mac (OSX Sierra), and testing in Chrome, Firefox and Safari.

Comments

  • edited March 2017
    When asking a question you need to state which Story Format (name and version) you are using, as answers can be different for each one. Because you are new to Twine 2 I am going to assume you are using Harlowe v1.2.3, which is the default story format for Twine 2.1.0

    Tutorials and examples for Twine (both 1.x and 2.x) are are generally very specific to which story format is being used, they can even be specific to particular versions of a story format. This is especially the case when it comes to styling because the page's HTML structure and the default CSS used to style it is generally different for each story format (and major version).

    Harlowe 1.2.3 assigns its default colours and font information to the html element and the custom element that Harlowe uses to contain the output for the current page (tw-story) is not a child of the body element, which is why your CSS is not effecting the page.

    Try the following:
    html {
    background-color: white;
    color: darkgrey;
    font-family: Futura, Impact, Helvetica, sans-serif;
    font-size: 125%;
    }
    

    note: Instead of using images to show examples of your code I suggest cut-n-pasting the code into your posts but please use the code tag when doing so - it's the C on the editor bar.
Sign In or Register to comment.