[Harlowe 2.2.1] How to change the text color of choices

Question

Hi,

I'm new to Twine and I'm putting my head around the various macros.

So, I linked a passage to another passage by using the macro [[passage 1 -> passage 2]], but how can I change the color of that link?

I tried to use this:

(set: $blur to (text-style: "shudder")+(transition-time: 50s)+(text-colour: red))

$blur[Talk to the presence]
$blur[Unleash your hands, quietly]

and it works if it's not a passage link, but how can I change color to a passage link?

Thanks.

Answer 1

WARNING: Do not add white-space to the start or end of the Target Passage Name reference of your Markup based Links, doing this will result in the Automatically Create Missing Passages feature of the Twine 2.x application creating you a new Passage with invalid white-space characters in it's Name.

eg. your  [[passage 1 -> passage 2]] markup link examplewill result in a new Passage named " passage 2".
(note the invalid space character at the start of the passage name.)

Your markup based link should look like the following.

[[passage 1->passage 2]]

As you have noted passage content like the following will result in link text that Shudders but that text will not be Red.

(set: _blur to (text-style: "shudder") + (transition-time: 50s) + (text-colour: red))

_blur[ [[Link Text 1->Target Passage Name]] ]
_blur[ [[Link Text 2->Target Passage Name]] ]

If you use your web-browser's built in Web Developer Tools to Inspect the HTML struture generated for each of the links in the above passage content you will see that it looks something like the following.

<tw-hook style="animation: shudder 0.1s linear 0s infinite normal none running; display: inline-block; color: rgb(230, 25, 25);">

  <tw-expression type="macro" name="link-goto">
    <tw-link tabindex="0" passage-name="Target Passage Name" data-raw="">Link Text 1</tw-link>
  </tw-expression>
</tw-hook>

And if you view the CSS being applied to the tw-link element in the above, by selecting it within the Elements tab, you will learn that Harlowe assigns it's default link colour directly to that element.

This is the reason why your overridding link text colour is not being applied to the link (the tw-link element)

To overcome Halowe's behaviour you will need to place CSS like the following within your project's Story Stylesheet area.

tw-hook[style^="color"] tw-link:not(:hover),
		tw-hook[style*=" color"] tw-link:not(:hover),
		tw-hook[style^="color"] .enchantment-link:not(:hover),
		tw-hook[style*=" color"] .enchantment-link:not(:hover) {

	color: inherit;
}

 

Comments

Thanks, Greyelf!

I didn't know about the white space before the passage link, but really good to know!

I'll try your suggestions later tonight and I'll let you know how it goes.

---

Thank you! I've been having problems with the link colors myself, but the last time I tried to get the color thing to work with the stylesheet, it didn't. This time it did.