How to change the look of a specific link using the (click:) macro

Authoring Twine
,
1

So, I want to create a sentence with one word that is clickable, but that it does NOT look any different from the other words in the sentence (i.e. it is not apparent that it is a link).

Example:

Here is a sentence with one [word]<-linkword| that is a link.

(click:?linkword)[(set: $num to $num +1)

When implemented in the way above, the word is highlighted as a link - I want to have this look just like the other words in the sentence… Any ideas?

Thanks! :slight_smile:

Twine Version:2.3.14
Story Format: Harlow 3.2.2

2

note: The Hook associated with your (click:) macro call is missing its closing Square Bracket. I assume your example is meant to look something like…

Here is a sentence with one [word]<-linkword| that is a link.

(click: ?linkword)[(set: $num to $num + 1)]

If you use your web-browser’s Web Developer Tools to Inspect (1) the HTML elements generated for that Named Hook plus (click:) macro combination you would see something like the following…

"Here is a sentence with one "
<tw-enchantment tabindex="0" class="link enchantment-link">
	<tw-hook name="linkword">word</tw-hook>
</tw-enchantment>

And if you selected the <tw-enchantment> and viewed the CSS being directly applied to that element you would see something like…

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

You can use the above knowledge of the HTML structure and the default CSS rule, along with the fact that the identifier of the Named Hook has been assigned to name attribute of the <tw-hook> element, and a little research about the syntax of CSS Selectors, to craft your own custom CSS rule to alter the link text’s styling.

Based on the above default CSS you will need to change that specific link’s color and font-weight properties. Placing CSS like the following within your project’s Story Stylesheet area will do that…

.enchantment-link tw-hook[name="linkword"] {
	color: #fff;
	font-weight: normal;
}

warning: because the end-user wont be able to tell the textual content contains they won’t know the link exists unless to tell them in some way, or unless they use the Web Developer Tools of their web-browser to inspect the page.

(1) each Brand of web-browser on each Operating System it runs on has its own way of accessing its variation of Web Developer Tool. Many use the F12 function key as a means to gain access to them, but you will possible need to search the web for instructions.

1 Like
3

Thanks for this detailed (and fast!) response.

Will check it out soon.