+1 vote
by (6.2k points)

Here is the CSS in my stylesheet:

tw-link[tags="title"] {
  color: #17174F;
}

tw-link:hover, .enchantment-link:hover[tags="title"] {
    color: navy;
}

However, the link is staying as the default blue. I have tagged my passage 'title', but am I doing something else wrong?

1 Answer

+2 votes
by (144k points)
selected by
 
Best answer

If you use your web-browser's built-in Developer Tools to Inspect the HTML generated for your title tagged passage you will notice that Harlowe 2.x adds passage tags to both the tw-story and tw-passage elements, and not to each individual markup/macro based link.

You need to change your CSS selectors to take the above fact into considerations.

tw-story[tags~="title"] tw-link, tw-story[tags~="title"] .enchantment-link {
	color: #17174F;
}
tw-story[tags~="title"] tw-link:hover, tw-story[tags~="title"] .enchantment-link:hover {
	color: navy;
}

note: I used the ~= (contains) operator instead of the = (equals) operator because a passage may have more than a single tag assigned to it.

by (6.2k points)
Thanks so much! Also for the ~= I didn't know about that.
by (6.2k points)
A bit unrelated, but I was wondering if you know of a way to put comments into the stylesheet without them altering the CSS. In Python you use the hashtag, but I don't think that worked for me.
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...