CSS styling for click-append in Harlowe Twine 2

hkfto · February 2016

With CSS I've changed the style of my links, but when I use click-append (and link, and other macros along these lines), the links look like they used to with the default formatting.

What selector can I use that will target these macros?

These are selectors I've tried in the stylesheet:
1.

tw-link.click-append

2.

tw-link.click:append

3.

.click-append

I am probably missing something really simple! Thanks for suggestions/solutions.

greyelf · February 2016

If you inspect the generated HTML using your web-browser's Development Tools you will see that click-able text looks something like the following:

<tw-enchantment class="link enchantment-link" tabindex="0">the click-able text is here</tw-enchantment>

... and that the related CSS selectors for normal, :hover and :active are:

tw-link, .enchantment-link {
    color: #4169E1;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

tw-link:hover, .enchantment-link:hover {
    color: DeepSkyBlue;
}

tw-link:active, .enchantment-link:active {
    color: #DD4B39;
}

... which is used to style all the different markup-based and macro-based link types.

If you are trying to style some link types differently to others then the CSS selectors you need to use may depend greatly on the exact HTML structure generated by your code.

hkfto · March 2016

Thanks--next time I have a similar problem, that's where I'll look.

Howdy, Stranger!

Categories

CSS styling for click-append in Harlowe Twine 2

Comments