Twine harlowe 3.0 creating visited link color

Authoring Twine
1

I’d like to write css for changing my visited link colors for all passages in Twine. I’ve tried adding the following to my stylesheet - the hover link color will change, but not the visited link color (got the following sets of code from forums and copied into my stylesheet):
THIS DOESN’T WORK:
enchantment-link /* sets only enchantment-link base link color /
{ color: #c50000; }
enchantment-link:hover / sets only enchantment-link hover link color /
{ color: #00ccff; }
enchantment-link.visited / only enchantment-link visited links /
{ color: #cc00ff; }
enchantment-link.visited:hover / only enchantment-link visited hover links */
{ color: #007676; }

THIS DOESN’T WORK, EITHER:
tw-link:hover, enchantment-link:hover /* sets only enchantment-link hover link color /
{ color: #00ccff; }
enchantment-link.visited / only enchantment-link visited links */
{ color: #cc00ff; }

AND THIS DOESN’T WORK:
tw-link:hover, enchantment-link:hover /* sets only enchantment-link hover link color /
{ color: #00ccff; }
tw-link:visited, enchantment-link.visited / only enchantment-link visited links */
{ color: #cc00ff; }

The hover colors css works on all of these examples, but the visited link color css doesn’t work on any of them.
Any advice?

2

Putting the following in my stylesheet worked for me:

}
tw-link {
  color:#087EFB;
}
.visited {
  color:#087EFB;
}
3

The base CSS selectors used to style the HTML generated by the different link types used within Harlowe’s are

tw-link, .enchantment-link {

}

tw-link:hover, .enchantment-link:hover {

}

.visited {

}

.visited:hover {

}

Note the full-stop at the start of the above .enchantment-link CSS class name.

1 Like
4

Thanks, PeeweeKiwi, this looks correct but it didn’t work for me.

5

Thanks, Greyelf. This will change my hover color but it doesn’t affect my visited color. I cannot figure out what’s going on. I used your code exactly but no luck:

tw-link, .enchantment-link {
color: #4169E1;
}

.visited {
color: #551A8B;
}

6

Please use the “Preformatted Text” option in the comment field’s tool-bar when adding code examples.

Your CSS example uses colour values that are either the same or very similar to Harlowe’s defaults, which make it hard to see if your overrides are having an effect. If you change the colour values in your example to something with a greater contrast to the defaults…

tw-link, .enchantment-link {
	color: green;
}

.visited {
	color: orange;
}

… and then look at both a new link and a previously visited one, like those in the following TWEE Notation based example…

:: Start
[[Other Passage]]

:: Other Passage
[[Return to start->Start]]

…then you will see that the CSS selectors in your example do work.

7

Greyelf - your code worked. Thank you so much.
cd