Is There a Way to Change the Color of Individual Links?

Authoring Twine
1

Alright, so, I’m using Harlowe 3.1.0 on Twine 2.
Is there a way to change just one link on one passage? Say there are multiple links, i.e.,
[[Option 1]]
[[Option 2]],
and I just want to change the color of the link for option two. Is there a way to do that?

2

note: The following explanation includes feature names used by the Chrome web-browser, the same features exist in the other modern web-browser but possible have a slightly different name.

background: If you use your web-browser’s Web Developer Tools to Inspect the HTML generated for the following passage content…

[[Option 1]]
[[Option 2]]

…you will see it looks something like…

<tw-expression type="macro" name="link-goto">
	<tw-link tabindex="0" data-raw="">Option 1</tw-link>
</tw-expression>
<br>
<tw-expression type="macro" name="link-goto">
	<tw-link tabindex="0" data-raw="">Option 2</tw-link>
</tw-expression>

And if you select one of the <tw-link> elements then look at the associated CSS within the Styles panel you will see the following styling…

tw-link, .enchantment-link {
    color: #4169E1;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

Normally you could use the (css:) macro to change the styling of passage content…

(css: "color: green")[This text will be green]
(css: "color: green")[ [[This link text will not]]]

…however due to the fact the above tw-link, .enchantment-link style rule hard-wires certain properties (like colour & bolding) you can’t use these macros to alter those properties of link text. You can however use a named hook and associated CSS to override these hard-wired properties.

eg. Assuming you have a named hook named “warning”…

[[Option 1]]
|warning>[ [[Option 2]]]

…then you can use CSS like the following within your project’s Story Stylesheet area to apply styling directly to that link…

tw-hook[name="warning"] tw-link, tw-hook[name="warning"] .enchantment-link {
    color: green;
}

note: you can name your named hooks anything you like (within reason) as long as you alter the name="warning" part of the above CSS selector. Generally it is better to use names that represent the “purpose” of the styling rather that the “effect” that styling produces, because you may alter that “effect” at a later time.
eg. Using a name like “warning” (purpose) is better than using a name like “greenitalic” (effect).

2 Likes
3

Thank you! This worked well.