Can't seem to edit the visual of tw-link.visited and tw-link.hover [2.0] [Harlowe]

SeanBarron · August 2016

Hi everyone

Making my first ever little Twine as a prototype for a potential point-n-click game and am struggling with changing the tw-link.hover and tw-link.visited visuals in the CSS Stylesheet.

As it's a detective-style game there's a lot of going back-and-forth so having the default purpleish visited links is ugly and misleading.

tw-link.hover
{
border-bottom: solid #ffffff 2px;
color: #ffffff;
}
tw-link.visited
{
color: #666666
border-bottom: solid #666666 1px;
}

In-game though the links always appear cyan when hovered over and purple when visited. Looked at a number of forum answers and Harlow tutorials already but I can't spot where I'm going wrong.

Help would be appreciated!

greyelf · August 2016

The first issue is that hover is a pseudo-class (not a class), which means it has a colon and not a period at the start of it's pseudo-class name.

The second issue is that your .visited class's color property is missing a semi-colon at the end of it. You also don't need the tw-link part in the selector because it is defined as global class.

The third issue is that there are two different types of links in Harlowe, the tw-link element based ones and the enchantment-link class based ones.

This comment in the Harlowe -Changing color of text.... thread describes the four standard states of Harlowe links which are: normal, hover, visited, and visited:hover

Your CSS example should look something like:

tw-link:hover, .enchantment-link:hover {
	border-bottom: solid #ffffff 2px;
	color: #ffffff;
}
.visited {
	color: #666666;
	border-bottom: solid #666666 1px;
}

SeanBarron · August 2016

Ah! Fantastic thank you. Some of that is my lack of understanding and the rest is stupid mistakes. Cheers!

Howdy, Stranger!

Categories

Can't seem to edit the visual of tw-link.visited and tw-link.hover [2.0] [Harlowe]

Comments