Newbie Stylesheet Issues

Authoring Twine
1

Twine 2.6.2, Harlowe version : 3.3.5

First up - is there a really good overall resource for modifying the stylesheet? I’m just trying to get my head around the basics, and I seem to be bouncing all over the internet to get a mental image together. Am I missing something obvious, resource wise?

Anyway - I’m trying to make a custom default font from a Google Font, and to hide the Sidebar. I think I’ve managed both those things BUT I noticed this weird thing. I’ve got tw-passage, tw-story and tw-sidebar in my stylesheet, but whichever one I list first seems to be ignored!?

If I put tw-story first, the font reverts to default, if I put tw-sidebar first, the ‘back’ buttons return. If I put tw-passage first as a sacrificial entry, then the other two are fine. If I duplicate the first entry, it is also fine.

It’s still highly likely that I just don’t know what I’m doing here. But it’s also beginning to feel more like a bug??

I’ll include my Stylesheet code below. Many thanks!!!

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cousine&display=swap" rel="stylesheet">

tw-passage {
}

tw-story {
font-family: 'Cousine', monospace;
}

tw-sidebar {
  display: none;
}
2

Those <link> bits are HTML, you can’t put them in a stylesheet. You need the “import” format from Google fonts (without the <style> and </style> tags around it, because when you put it in Twine’s stylesheet, it’s already in a style element). So probably that code is messing up whatever comes right after it.

You might also check out the two volumes of Grim Baccaris’s Twine Grimoire: I think they do a pretty good job of walking you through some basic style customization?

3 Likes
3

Thanks Josh, I’ll go get my hands on the Twine Grimoires now!

4

Also - I can confirm that if I switch to the @import rather than the Link approach, this issue does go away! :laughing: