"Hidden" Links? (Getting rid of the blue text, Help!)

Authoring Twine
,
1

Twine Version: Harlowe 3.3.8

Hi! I’m working on a twine game where I want there to be like “hidden options” for a player to discover - essentially linked text that doesn’t appear linked when looking at the screen, something you’d have to mouse over to see that it can be interacted with. Is there a way to turn off the blue text that comes with a link, or should I reconsider my idea?

Thanks a bunch!!

1 Like
2

You can turn off the blue text by changing the CSS styling for the story.

In the Twine menu go to STORY and then # STYLESHEET and put the following code in:

tw-link,
tw-link:hover,
tw-link:active,
tw-link.visited,
tw-link.visited:hover,
tw-link.visited:active {
  color: white;
}

That causes all links (visited or not) to appear white. You’ll have to familiarize yourself with the basics of CSS, but you can change things quite easily. For example, if you want the links to be white except when you click on them or hover over them, try:

tw-link,
tw-link.visited {
  color: white;
}

tw-link:hover,
tw-link:active,
tw-link.visited:hover,
tw-link.visited:active {
  color: yellow;
}

Active is for when it’s clicked. Hover is when the cursor is over the link.

Let us know if that helped.

Update: Sorry, I’ll show you how to target specific links. You probably don’t want all links to be hidden.

3

Second time is a charm.

So you’ll want to identify the hidden links in your passage code with a hook:

|hiddenlink>[[[Chapter 1]]]

Then in your CSS code:

tw-hook[name~="hiddenlink"] tw-link,
tw-hook[name~="hiddenlink"] tw-link:hover,
tw-hook[name~="hiddenlink"] tw-link:active,
tw-hook[name~="hiddenlink"] tw-link.visited,
tw-hook[name~="hiddenlink"] tw-link.visited:hover,
tw-hook[name~="hiddenlink"] tw-link.visited:active {
  color: white;
}

It’s best to just name your styled hooks with all lowercase due to how Harlowe creates the HTML.

And that should work for you.