+1 vote
by (130 points)
Have successfully changed tw-link:hover using my own css but tw-link:visited not changing.

Is tw-link specified within inbuilt stylesheet in different way - possibly a class?

Just need the name of the element that I need to target - I'm ok with sorting the CSS.

2 Answers

0 votes
by (63.1k points)

It's best to always include the version number of the Story Format you're using.  In this case, it doesn't matter much, but it usually makes a pretty big difference.

Try '.visited', as in:

.visited { color: orange; }
.visited:hover { color: orange; }

 

+1 vote
by (159k points)

You can use your web-browser's built-in Developer Tools to determine what HTML and CSS is being used to represent and style a specific element or section of a displayed Passage when running a story HTML file.

How you access a the Developer Tools can depend on your operating system and brand of web-browser, but on Windows you can generally either: A. use the F12 key to open it; or B. move your mouse cursor over the element/section your interested in then used the right-mouse button to open the context menu and select the Inspect (or similar worded) menu option.
eg. Try doing that on a visited link and it should result in the relevant tw-link element being highlighted in the Elements panel that appears.

General the Development Tools window will initially appear with an Elements (or similar worded) panel open on the left hand side of the window, and a Styles (or similar worded) panel open on the right hand side of window.
You can control what style information is shown by using the mouse to select elements in the Elements panel.

So if you inspect the relevant visited tw-link, which should look something like the following:

<tw-link tabindex="0" class="visited" passage-name="Second" data-raw="">Second</tw-link>

And while that element is highlighted you should see this as the first style rule in the Styles panel:

.visited {
    color: #6941e1;
}

To see the CSS related to an elements :hover state you need to activate that state and how you do that can depend on the same criteria as opening the Developer Tools, in Chrome on Windows it is as simple as placing the mouse cursor over the relevant element in the Elements panel then using the right-mouse button to open the context menu and selecting the :hover menu item. This should result in the Styles panel showing something like the following as the first rule:

.visited:hover {
    color: #E3E;
}

Using the above techniques can make styling your story a much easier process.

...