Custom Border

Authoring Twine
1

Twine Version: 2.5.1.

Howdy ho, I begin my twine shenanigans, and I need some help! I want to give a custom border for my game about 3 passages into it, the custom border would sort of be an image? A pixelated one once I draw it, any macros I don’t know about or ways I can do this?

1 Like
2

You can do something like this in your stylesheet:

tw-story[tags~="border"] {
  border-image-source: url(border-image.png);
  border-image-slice: 30;  /* border width, basically. */
  border-image-width: 30px;  /* same again, but with "px" */
  /* round to an even number of repeats along the edges. */
  border-image-repeat: round;
  /* some browsers won't render image borders without a fallback style? */
  border-style: dotted;
}
1 Like
3

Will this border be the default for the rest of the game, or will you be only applying the border to a limited set of Passages?

If the border is only being applied to a limited set of Passages then the Passage Tag based solution suggested by @JoshGrams will achieve that outcome. After you add the supplied CSS to your project’s Story Stylesheet area you only need to assigned a border tag to each of the Passages you want to have that border.

On the other hand if you want that border to be the default for all Passages except those first 3 then you need a Passage Tag based solution that is basically the reverse of the one already suggested.

Replace the CSS supplied by Josh Grams with the following…

tw-story {
	border-image-source: url('border-image.png');
	border-image-slice: 30;  /* border width, basically. */
	border-image-width: 30px;  /* same again, but with "px" */
	/* round to an even number of repeats along the edges. */
	border-image-repeat: round;
	/* some browsers won't render image borders without a fallback style? */
	border-style: dotted;
}

tw-story[tags~="noborder"] {
	border-image-source: none;
	border-image-slice: 100%;
	border-image-width: 1;
	border-image-repeat: stretch;
	border-style: none;
}

…which sets border as the default for all Passages, and defines a Passage Tag based CSS rule that removes that border from any Passage you assign a noborder tag to.
eg. like those first 3 Passages of your project.

3 Likes