How do I Format Links?

Neoroman

When setting up a link, I'd like to know how to format each section of it. What I mean by this is how would I set up a custom font and color for the link itself and have the displayed text remain the default white?

(link: "Link Bla Bla")[Displayed Bla Bla]

The link itself should be formatted.

greyelf

There are at least three different types of links in Harlowe, the following shows the TwineScript used to produce the links, the basic HTML generated, and the basic CSS selector used to style each.

1. Link Macro based link:

a. TwineScript:
(link: "Link Macro based link")[Contents]

b. Basic HTML structure:
<tw-hook class="">
	<tw-link class="">Link Macro based link</tw-link>
</tw-hook>

c. CSS selector:
tw-hook tw-link {
	background-color: lightblue;
	font-size: 80%;
	font-weight: bold;
}

2. Hook with Click Macro based link:

a. TwineScript:
|thehook>[Hook with Click Macro based link]
(click: ?thehook)[(replace: ?thehook)[Contents]]

b. Basic HTML structure:
<tw-enchantment class="link">
	<tw-hook>Hook with Click Macro based link</tw-hook>
</tw-enchantment>

c. CSS selector:
tw-enchantment.link tw-hook {
	background-color: lightgreen;
	font-size: 80%;
	font-weight: bold;
}

3. Markup based link:

a. TwineScript:
[[Markup based link]]

b. Basic HTML structure:
<tw-expression>
	<tw-link>Markup based link</tw-link>
</tw-expression>

c. CSS selector:
tw-expression tw-link {
	background-color: pink;
	font-size: 80%;
	font-weight: bold;
}

note: There are many other CSS properties you can set within the CSS selectors, I have only included three.

Neoroman

I don't think that answered my question in particular, but the more knowledge the better; thanks for that tip!

Example: I want to click on a link that is displayed in purple and Arial font, but I want the output text to be the default white and whatever font Harlowe uses for regular text.

Does that give a better sense of what I'm looking for?

Claretta

Doesn't Greyelf's code do exactly that?

What you're looking to do is apply a css-defined style to a link, so you set the purple color and font in css under a selector, then apply the selector to the link.

greyelf

Did you actually try my above code examples, if you did you would of seen that the link appears one way and the text that replaces the link appears different.

Example: I want to click on a link that is displayed in purple and Arial font, but I want the output text to be the default white and whatever font Harlowe uses for regular text.

Try this CSS for types 1 & 2 links, it goes in your Story Stylesheet:

/* Link Macro */
tw-hook tw-link {
	color: purple;
	font-family: Arial;
}

/* Hook with Click Macro */
tw-enchantment.link tw-hook {
	color: purple;
	font-family: Arial;
}

To test the CSS place the following within a passage:

(link: "Link Macro based link")[This text in not purple nor Arial]

|thehook>[Hook with Click Macro based link]
(click: ?thehook)[(replace: ?thehook)[This text in not purple nor Arial]]

Neoroman

I have very little experience with CSS and it's relation with Harlowe, so most of this CSS talk isn't coming through. Is there some article somewhere that explains it all?

Claretta

Twine stories are websites, so CSS defines how it looks like all websites. Everything you see on a Twine page is produced by CSS, so changing the CSS is the main way to change visuals.

Hence to change the colour of a link or whatever, you need to first define the new colour in CSS, then tell the link to reference that CSS instead of the default.

dacharya64

The step by step:

1. Open your story and click the menu at the bottom left (it has the story's title and gives you the option to publish to file, etc.)

2. Click "Edit Story Stylesheet"

3. Copy-paste the CSS in the stylesheet.

greyelf wrote: »

/* Link Macro */
tw-hook tw-link {
	color: purple;
	font-family: Arial;
}

/* Hook with Click Macro */
tw-enchantment.link tw-hook {
	color: purple;
	font-family: Arial;
}

4. Test it out!

Neoroman

(link: "Link Macro based link")[This text in not purple nor Arial]

|thehook>[Hook with Click Macro based link]
(click: ?thehook)[(replace: ?thehook)[This text in not purple nor Arial]]

It does indeed work, but it's still pretty confusing. It's simply magic to me at this point :P