Changing colour of links to visited passages?

fractoluminous

Is there a relatively straightforward way to change the colour of links to passages the player has already visited? I've tried using a:visited { color:#00FF00; } in the stylesheet passage but that doesn't seem to work? (I'm using twee & Sugarcane)

L

Are you using version 1.4.1 ? It should work there. Also, consider moving the code further down the stylesheet passage, or making the selector more precise (i.e. ".passage a:visited" instead of "a:visited").

fractoluminous

Thanks for your suggestions... Still can't get it to work though

I tried moving it down within the stylesheet passage and adding .passage.
Something like .passage .a:hover {color:red !important;} works fine, but .passage .a:visited {color:red !important;} doesn't...

greyelf

fractoluminous wrote:

Thanks for your suggestions... Still can't get it to work though

I tried moving it down within the stylesheet passage and adding .passage.
Something like .passage .a:hover {color:red !important;} works fine, but .passage .a:visited {color:red !important;} doesn't...

You only need to prefix a '.' (full stop) to classes and not tags, so in your css rule passage is a class name, and a is name of a tag/element.

So your .passage .a:hover {color:red !important;} with a full stop before the a:hover should be: .passage a:hover {color:red !important;} with no full stop.

peterorme

The reason a:visited is not enough by itself is that CSS logic says .passage a is more specific than a:visited.

So you need to use either something more specific: .passage a:visited, or you need the !important modifier to boost the importance of your a:visited.

So these should both work:
<br />a:visited {<br />&nbsp; &nbsp; color: red !important;<br />}<br />
or
<br />.passage a:visited {<br />&nbsp; &nbsp; color: red;<br />}<br />

Of course an extra !important does not break things, but adding !important all over the place is rarely a good practice. There are also additional classes like .internalLink you can use.

You know that (in Chrome) you just right-click any element on a page and select "inspect element", and at the bottom of the page you see the path to the element.