Styling Tagged Passages in Harlowe

Authoring Twine
1

Twine Version: 2.6.0.0

Hey all, I’m a bit stumped on this! I’m working with students using Harlowe this week and one of them asked about styling individual passages - I used passage tags and the following CSS, as I’d usually do in Sugarcube…

body[data-tags~="winter"] {
	background-color: blue;
	color: white;
}

…but it just doesn’t seem to be working in Harlowe? I feel like I’m missing something REALLY obvious here (currently trying to support a room full of teenagers on not much sleep) so help very much appreciated!

2

Well I am far from a CSS expert but I did use tags for CSS in Harlowe for Radiance Inviolate. Here’s an example of what that formatting looked like:

tw-story[tags~="moonrise"] {
  background-image: linear-gradient(#0c0c0e, #15151b);
  color: #909aaf;
}

So I think the issue might be using the word “body” instead of “tw-story”?

3

Yeah I tried changing it and I’m still having the same issue, really baffled by this one

4

Okay I changed ‘data-tags’ to ‘tags’ and that fixed it! The real solution here is not to drink wine on a schoolnight

2 Likes
5

@laurenodonoghue
When trying to work out what CSS Selector to use when crafting a CSS Rule, I find the best thing to do is to use your web-browser’s Web Developer Tools to inspect what HTML is being generated when the (tagged) Passage is visited.

eg. if that Passage was tagged moonrise, and the project had a startup tagged Passage, then the generated HTML would look something like…

<tw-story tags="moonrise">
	<tw-passage tags="moonrise">
		<tw-sidebar>
			<tw-icon tabindex="0" alt="Undo" title="Undo" style="visibility: hidden;">↶</tw-icon>
			<tw-icon tabindex="0" alt="Redo" title="Redo" style="visibility: hidden;">↷</tw-icon>
		</tw-sidebar>
		<tw-include type="startup" name="Variable Initialisation">
			The contents of the project's startup tagged Passage.
		</tw-include>
		The contents of the Passage being visited.
	</tw-passage>
</tw-story>
1 Like