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

0 votes
asked Nov 14, 2017 by smileysodium (150 points)
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?

2 Answers

+1 vote
answered Nov 14, 2017 by Chapel (49,430 points)

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; }

 

commented Nov 19, 2017 by Deadshot (3,300 points)
I agree with everything he is saying!
+2 votes
answered Nov 15, 2017 by greyelf (92,210 points)

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.

commented Nov 15, 2017 by Chapel (49,430 points)
This is a really good point. I forgot about (click:). Thanks.
commented Nov 19, 2017 by Deadshot (3,300 points)
I also agree with greyelf. He's awesome.
...