Style links based on tags

Hi there,

I’m looking for a way to style the link colours based on a passage tag, with the Harlowe format (3.2.2) Something like this recipe in the Twine cookbook to change the background color or the text color.

I’ve tried to add the following code to the story stylesheet:

tw-link[tags~="3_ato"] {
  color: white;
} 

But it doesn’t work. Any ideas?

Thanks,

José

Unfortunately one thing that isn’t explained in the Twine Cookbook recipe you linked to is which of the web-page’s custom HTML elements the Passage Tag is assigned to…

eg. If you assign a forest Passage Tag to the Passage that contains a Link…

This passage has has been assigned a forest Passage Tag
[[Next Passage]]

…then use your web-browser’s Web Developer Tools to Inspect the HTML elements that make up the current web-page (you used the Play option to view) you will see a structure something like the following…

<tw-story tags="forest">
	<tw-passage tags="forest">
		<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>
		This passage has a grey background and (default) white text.
		<br>
		<tw-expression type="macro" name="link-goto" return="command">
			<tw-link tabindex="0" data-raw="">Second</tw-link>
		</tw-expression>
	</tw-passage>
</tw-story>

…and you will notice that only the <tw-story> and <tw-passage> elements have a tags attribute that has been assigned a value of “forest”.

So ideally the CSS selectors in the recipe’s example should also include the type of element the tags attribute has been assigned to… and as a Passage can be assigned more than a single Tag those selectors should also be using the ~= comparison operator instead of just an = operator.
eg. A better variation of those examples would look like…

tw-story[tags~="grey"] {
	background: grey;
}
tw-story[tags~="yellow"] {
	background: yellow;
	color: black;
}

Now to your specific use case…

You want to change the color property of all the <tw-link> elements that are descendances of a <passage> element that has a tags attribute that contains the value 3_ato
And the CSS selector for that would look something like…

tw-passage[tags~="3_ato"] tw-link {
	color: white;
}
2 Likes

You are amazing, Greyelf. Not only did you solve it elegantly, but I also got a nice lesson in HTML. Thank you so much!!!