[ Tutorial ] Cool passage link with css

Betkowski

NOTE: if this is something that nobody is interested in,
please remove the discussion,
I don't want to spam the forum.

So I thought about writing about this here,
as I myself have been looking for it, and unfortunately, could not find it.

I wanted a nice little passage link that would not look like an old, classic html link.
And since Twine does not support:

<a href="PassageName">Your title</a>

which'd give you the ability to edit <a> in stylesheet to give it a good look.
So I came up with this:

[[<p class="Box">Tytul</p>|Passage Name]]

Here we create a paragraph with html and give it a desired class name, such as "Box" (remember, CSS is case sensitive) in
a regular link between the passages.

The next thing we do, we go to "Edit Stylesheet"
and we paste this

.Box {
	text-decoration: none;  /* removing the classic look of a link */
	color: #ffffff;  /* chaing font color to white */
	background-color: #000000; /* background color to black */
	padding: 10px;  /* giving us some space around the link so I doesn't look bad */
	text-align: center; /* we align the text of our link to the center of the screen */
}

And this is the result:

greyelf

Well done.

Betkowski wrote: »

And since Twine does not support:

<a href="PassageName">Your title</a>

Each of the different Twine 2 story formats (Harlowe, Snowman 2, SugarCube) have different features, so sometimes something that is hard or not directly supported in one story format can be done in another.

SugarCube does support creating passage links using an a element, you use a data-passage attribute to indicate which passage the link will send the Reader to. Try something like the following:

<a class="Box" data-passage="Passage Name">Tytul</a>

Betkowski

Oh, that's pretty cool, thanks for pointing that out!
And sorry for my lack of knowledge.