Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Making hooks a different color in Harlowe

I have a hook-heavy passage, where each hook can be clicked but instead of taking the player to another passage, it just reveals or changes text elsewhere in the current one. I'd like a way to differentiate between same-passage links and different-passage links, so the player doesn't accidentally click away from the passage before exploring all the hooks. I saw another Twine story that did this (can't for the life of me remember which one), but I can't seem to emulate it.

The CSS code I have is pretty basic:
tw-hook {
	color: green;
}

The only problem is, this makes all hooks green. I only want ones that are currently able to be clicked green. The way I have it now makes it so random text throughout the passage is a different color, and needless to say it looks sloppy. Is there a CSS tag that only applies to hooks that can be currently clicked?

Comments

  • In Firefox and Chrome you can use their Inspect Element feature you view the HTML generated by each of the different Harlowe features.
    note: To do this in Windows you first move your mouse cursor over what you want to inspect, then use the right mouse button to make the context menu appear and select the Inspect Element option.

    If your passage contained the following:
    [This is just a hook]<hook1|
    [This is a clickable hook]<hook2|
    
    (click: ?hook2)[Clicked]
    
    ... then the related generated HTML would look as follows:
    <tw-hook name="hook1" title="Hook: ?hook1">This is just a hook</tw-hook>
    
    <tw-enchantment class="link enchantment-link"><tw-hook name="hook2" title="Hook: ?hook2">This is a clickable hook</tw-hook></tw-enchantment>
    

    If you look at the click-able hook (the one with an associated (click:)) you will notice that it's tw-hook element is contained within a tw-enchantment element and this element has two classes (link and enchantment-link), this is what makes the hook click-able.

    So one way to make only click-able hooks green would be as follows:
    tw-enchantment.link {
    	color: green;
    }
    
  • Ah, I knew about the html selector (that's how I found tw-hook) but didn't realize tw-enchantment was what I was looking for. Thanks, that worked!
Sign In or Register to comment.