Twine 2 Harlowe CSS Link Colors

I’ve been playing around with Twine 2 lately, and ran into a wall trying to set all of my Twine 2 Harlowe CSS Link Colors in the main Story Stylesheet.

After searching a lot of different pages, I’m finding some of the documentation to be… not as robust as I’d like. The Twine Forum is great for answers to single questions, but the Twine 2 Wiki isn’t very comprehensive. There are a few great resources like Furkle’s Twine 2 Harlowe CSS Tutorial and the Harlowe 1.2.2 Documentation, but I had to piece together something that worked for me by using all of these sources.

I thought I’d share what I learned, in case anyone else is having the same issues.

To set all link types to the same colors:

tw-link, enchantment-link /* sets both base link colors */
{ color: #c50000; }
tw-link:hover, enchantment-link:hover /* sets both hover link colors */
{ color: #ff7400; }
.visited /* all visited links */
{ color: #009e00; }
.visited:hover /* all visited hover links */
{ color: #007676; }


If you want to style the different types of links separately, split out tw-link and enchantment-link from each other, like this:

tw-link /* sets only tw-link base link color */
{ color: #c50000; }
tw-link:hover /* sets only tw-link hover link color */
{ color: #ff7400; }
tw-link.visited /* only tw-link visited links */
{ color: #009e00; }
tw-link.visited:hover /* only tw-link hover links */
{ color: #007676; }

enchantment-link /* sets only enchantment-link base link color */
{ color: #c50000; }
enchantment-link:hover /* sets only enchantment-link hover link color */
{ color: #ff7400; }
enchantment-link.visited /* only enchantment-link visited links */
{ color: #009e00; }
enchantment-link.visited:hover /* only enchantment-link visited hover links */
{ color: #007676; }


I hope this helps you with styling your own Twine projects!