Using current Twine version. I’d like different links (including passage links) to look different. The standard [[ ]] code doesn’t allow that. Can I attach a class selector, such as something like <<link class=”small” … >><</link>> to create a link with the .small definition in the stylesheet? If not, how would I achieve this effect?
I’d probably use the Custom Style markup: @@.myClass;[[Toast]]@@ to wrap the link in a <span class="myClass"> and then you can style with .myClass a as the selector. You can also wrap <<link>> macros in that and style them the same way.
You could also use the Special Attribute data-passage and an HTML A tag: <a class="myClass" data-passage="Toast">Bread</a>, and style with a.myClass (no space), but that’s more typing.
Thanks. The second method seems to work better. The first method ignores my attempt to use the color attribute to do something with the text, though it pays attention to the font-size attribute.
If I want to use this for displaying an image or for adding a new paragraph of text between two existing paragraphs rather than as a link to a passage, what would I replace “data-passage” with?
Huh, color was what I tested with. Does this work for you? (HTML file, and twee file, either of which should be able to be imported into Twine).
colored-link-test.zip (154.2 KB)
Another option is to use the <<class>> macro to apply a class to a link (https://github.com/hituro/hituro-makes-macros/tree/main/attr-macro) though I would say that might be overkill.
@Jim_Aikin the fact that the style applied to the span isn’t changing your link colour is probably just a CSS specificity error (i.e. a class applied to the link by the game, is overriding the class you’ve applied to the span).
i.e., instead of writing this:
.myClass { color: red; }
Do this:
.myClass a.link-internal { color: red; }
If you want to post the CSS you tried, I can give more specific feedback.
1 Like