Stylesheets don't work

Question

Hi there,

I'm new to Twine and have a problem to get stylesheets to work. Probably I'm doing a very basic mistake, so any help appreciated!

I'm using offline version 2.2.1 with Harlowe. I created a new passage to use for stylesheets and tagged it with "stylesheet". Then I copied this text in:

body {
background-color: blue;
}

But apparently it has no effect on the background color of any passage. I tried different simple commands but it seems like the stylsheet is not recognized at all.

Thanks in advance!

Answer 1

Hi, 

if you are you using Harlowe 2, to change the background and text color there is no css needed:

Simply create a header tagged passage (a passage with the tag 'header'), and include this in it:

(enchant: ?page, (text-colour: black) + (background: white))

 

For changing appearance of the whole story in general, I only found the hint to 'edit the stories stylesheet', which is reachable from the story menu of Twine2.

I changed 'body' to 'tw-story' of your css snippet, then background-color changed.

 

By the way, where did you get the info  'stylesheet tagged passages' from, I could not find this. Might be interesting, I only found the (css:) macro, which only changes the attached hook.

 

 

Comments

Thanks for your Infos! I think I found the "stylesheet" tagged passages in some guide I read to get into Twine. I can't find it again, right now. Maybe I misunderstood it.

I also found out about and use the "header"-based passage. This works. But as far as I can see, the otions are more limited than with cs. What I'm trying to do is customize the space between text passages marked as paragraphs. I found solutions to do this with CS, but not with Harlowe directly.

Answer 2

@Habegast
As explained by Jherek, you have two main methods you can use to effect the overall styling of the current page.

1. The built-in ?Page named hook which can be used to target the generated page's tw-story element.

2. CSS placed within your project's Story Stylesheet area which is accessed via the relevant Passage Map menu option, this is explained in the Change the Font, Colors, or Appearance page of the Twine 2 wiki.

note: Harlowe uses it's custom tw-story element (instead of the standard body element) as parent of all the HTML elements generated from the contents of the current Passage being shown, which is a different behaviour to a standard HTML document and why most CSS that targets the body element will not effect a Harlowe based project.

@Habegast and @Jherek
The ability to use a stylesheet passage tag to automatically add additional CSS to your project is not supported by the Twine 2.x applicaiton, it is however supported by both the Twine 1.x application and the TweeGo command line compiler.

Comments

@greyelf

Thank you for adding the stylesheet passage info and especially mentioning the TweeGo command line compiler - I only knew (and use) twee2 up to now.

---

Thanks, man. The "Story Stylesheet" was exactly what I was looking for.

And thanks for clearing up that I got outdated info about the stylesheet tagged passage.

One think you might be able to clear up as well: what if edit the header-taged passage and the story stylesheet with conflicting commands. Which one will override the other?