+1 vote
by (160 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

+2 votes
by (63.1k 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; }

 

by (6.2k points)
I agree with everything he is saying!
+2 votes
by (157k 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.

by (63.1k points)
This is a really good point. I forgot about (click:). Thanks.
by (6.2k points)
I also agree with greyelf. He's awesome.
by (120 points)
edited by

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!

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.
...