How do I change one specific link to a different color?

Question

I am trying to change the color of one specific link. All the code that I have found on similar questions will change the color of every link in the story, is there a way to change the color of just one?

Answer 1

Links use the custom <tw-link> element in Harlowe. To easily change its styling, I recommend placing the link element inside a standard html <span> element with a class or id based on your needs. Then, using that class or id in conjunction with the <tw-link> element, you can apply specific style rules directly to the link from your stylesheet. 

Example. 

In passage: 

<span class='red'>[[link]]</span>

In css: 

.red tw-link { color : red; }

 

Comments

I agree with everything he is saying!

Answer 2

Amendment to @Chapel's answer.

Harlowe 2.x (and 1.x) includes a number of different techniques you can use to create a link and each technique creates slightly different HTML. Three of the techniques are:

[[Markup Based Link]]

(link: "Link Macro Based Link")[]

[Click Macro Based Link]<link|
(click: ?link)[]

... and the HTML created for each of the above techniques looks something like the following:

<tw-expression type="macro" name="link-goto">
	<tw-link tabindex="0" passage-name="Markup Based Link" data-raw="">Markup Based Link</tw-link>
</tw-expression>

<tw-hook>
	<tw-link tabindex="0" data-raw="">Link Macro Based Link</tw-link>
</tw-hook>

<tw-enchantment class="link enchantment-link" tabindex="0">
	<tw-hook name="link">Click Macro Based Link</tw-hook>
</tw-enchantment>
<tw-expression type="macro" name="click" class="false"></tw-expression>

... you may notice that only the first two of the above techniques actually create a tw-link element which means that the solution supplied by Chapel wont work (as is) for all types of links.

A more correct version of the CSS supplied in Chapel's solution would be:

.red tw-link, .red .enchantment-link {
	color: red;
}

... which would now support enchantment based links like the ones the (click:) macro creates.

Comments

This is a really good point. I forgot about (click:). Thanks.

---

I also agree with greyelf. He's awesome.

---

Coloring the links worked for me so far, but I don't understand what greyelf did there.

It's my first time using Twine and I have no coding knowledge what so ever.
Could somebody please tell me what exactly to write in the passage and what in the stylesheet?

Thank you!