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

0 votes
asked 3 days ago 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

0 votes
answered 3 days ago by Chapel (30,050 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; }

 

+1 vote
answered 3 days ago by greyelf (36,930 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 3 days ago by Chapel (30,050 points)
This is a really good point. I forgot about (click:). Thanks.
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...