How to assign ID/class to Link macro?

Authoring Twine
1

Hello,

I’ve found a code snipped from TheMadExile to replicate the history controls on my passages.

I’ve been trying several times to apply some sort of ID or class to it so that I can then use CSS to make them look different than the other links without success.

Does anyone know how to do that? Or how to make the script work on a button with onclick action?

<<link "Backward">><<script>>Engine.backward()<</script>><</link>>

<<link "Forward">><<script>>Engine.forward()<</script>><</link>>

<<if Story.lookup('tags', 'bookmark').length gt 0>>
\<<link "Jumpto">><<script>>UI.jumpto()<</script>><</link>>
\<</if>>

Appreciate any help

Thanks!

EDIT:

Using Twinery 2 and Sugarcube 2.30.0

2

The simplest method is to wrap the ‘link’ within a IDed element, which can be done either directly or via Custom Style markup.

@@#back1;<<link "Backward">><<script>>Engine.backward()<</script>><</link>>@@

<span id="back2"><<link "Backward">><<script>>Engine.backward()<</script>><</link>></span>

note: both of the above example product the same HTML outcomes, excepting the assigned ID.

3

You simply need to wrap the links in a <span> that has a class which will modify the styling of any links within that <span>. You can see some examples of how to do that in this “Multicolor Links” sample code. (Click “Jump to Start” in the UI bar to see other sample code there.)

There’s no need to use an onclick event, just use a <<button>> macro, like this:

<<button "Backward">><<run Engine.backward()>><</button>>

<<button "Forward">><<run Engine.forward()>><</button>>

You can use the <<set>> or <<run>> macros like that, rather than having to wrap your JavaScript within <<script>> macros.

Enjoy! :slight_smile: