Coloring just one link and all the backgrounds a story

Story Format: Harlowe 3.2.3

Hello,

I want to color just one link. This link will be present in all the pages of the story, i know how to color links but not a specific one, with a different color of the others. Don’t care if the code is general or if i’ll have to put it in each page, in the sheetstyle will be better but anyway. I also would like to color my pages but i can’t figure out how to make that in the sheetstyle. So, if someone has answers to my questions, i thank him in advance.

Good day !

1 Like

Generally when you want to apply styling to something you would:

  1. apply some sort of “identifier” to that thing.
  2. use a CSS selector that targets that “identifier” to style the thing.

Harlowe allows you to use a Named Hook to “identify” content, like a link…

|thelink>[ [[Link Text->Target Passage Name]]]
or
|thelink>[(link-goto: "Link Text", "Target Passage Name")]

note: ideally the name of the Name Hook should be more meaningful than what I used, and relate to the purpose of the thing it is “identifying”.

To determine how to craft the related CSS selector you would use your web-browser’s Web Developer Tools to inspect the HTML elements that were generated for the Passage content you want to target.
Both of the above Named Hooked Links generated the same HTML structure…

<tw-hook name="thelink">
	<tw-expression type="macro" name="link-goto" return="command">
		<tw-link tabindex="0" data-raw="">Link Text</tw-link>
	</tw-expression>
</tw-hook>

As you can see the Name Hook became <tw-hook name="thelink"> and the main part of the “link” is represented by a <tw-link> element. Combining those facts with a little knowledge of the CSS Selector syntax rules results in a CSS rule like the following…

tw-hook[name="thelink"] tw-link {
	color: orange;
}

Thank you for you answer, i’ll try it tomorrow.