How to make types of hooks appear with different colors

Authoring Twine
1

I’m trying to draft a story where there are particular types of choices players can choose, and that each option has a distinct color.

For example, let’s say I have a Good option, a Neutral option, and a Bad option.

[[Stab him with your sword.|Bad]]
[[Walk away.|Neutral]]
[[Offer your hand.|Good]]

In this example, let’s assume I’d like to set the Bad option to Red, the Neutral option to Gray, and the Good option to Blue.

There will be recurring instances of Bad, Neutral, and Good options throughout the story.

How might I change the text colors for these specific types of choices? Is there a way I could create a class or variable to make this easier to manage? Could I change the hover colors instead of the text colors?

1 Like
2

There are a number of ways you can apply styling to the contents of a Passage. The following describes one method that uses Name Hooks combined with CSS in your project’s Story Stylesheet area to apply styling to specific sections of the HTML page.

If you use the Inspect feature of your web-browser’s Web Developer Tools to look at the HTML elements generated for the following Named Hook and Mark-up based Link combination…

|bad>[ [[Stab him with your sword.|Bad]]]

…you will see that the structure looks something like…

<tw-hook name="bad">
	<tw-expression type="macro" name="link-goto" return="command">
		<tw-link tabindex="0" data-raw="">Stab him with your sword.</tw-link>
	</tw-expression>
</tw-hook>

Based on the information in the above the CSS selector required to style the Textual content of the <tw-link> element would look like…

tw-hook[name="bad"] tw-link {
	/* CSS styling properties */
}

So if you used specific Named Hooks to define each of the ‘good’, ‘neutral’ and ‘bad’ option…

|bad>[ [[Stab him with your sword.|Bad]]]
|neutral>[ [[Walk away.|Neutral]]]
|good>[ [[Offer your hand.|Good]]]

…then you could use CSS like the following in your Story Stylesheet to set the colour of the link text for each link type…

tw-hook[name="bad"] tw-link {
	color: red;
}
tw-hook[name="neutral"] tw-link {
	color: orange;
}
tw-hook[name="good"] tw-link {
	color: green;
}
1 Like
3

Thank you for the quick response! This is exactly the type of thing I’ve been looking for.

I quickly learned that the named hooks are case-sensitive; I tried capitalizing Good/Bad/Neutral and nothing happened to change the styling. Once I figured that out, lowercase naming conventions work perfectly. I can even apply this styling to edit the link hover color instead of the text itself!

I changed the default link color to gray and the link hover to white to make the color changes more obvious, and kept the Neutral option in line with the default to avoid unnecessary work. Here’s the CSS styling for that:

tw-link {
  color:gray;
}

tw-link:hover {
  color:white;
}

tw-hook[name="bad"] tw-link:hover {
	color:red;
}

tw-hook[name="good"] tw-link:hover {
	color:blue;
}

Thanks so much! :smile:

4

Well done.

If you Inspected the name property of the generated custom <tw-hook> element to would of noticed that Harlowe automatically lower-cases the name you gave the Named Hook when it generates the HTML.
eg. A |Bad>[...] Named Hook generates <tw-hook name="bad">

And if the name you gave the Named Hook included a dash then you would of seen that it would of been automatically remove.
eg. A |Bad-Boy>[...] Named Hook generates <tw-hook name="badboy">