Make (dialog:) options stack vertically instead of horizontally

Authoring Twine
1

Twine Version: 2.5.1
Story Format: Harlowe 3.3.3

Hello! I was wondering if there was anything I could do (presumably in the stylesheet) to have the option bubbles in a dialog macro stack on top of each other instead of side by side.

I’m using the dialog macro to bind a variable to one of the options, hence making a separate little pop up for decision making that I think looks really nice. I want to be able to have 2-6 options, but once you get past 2 or 3 the stacking becomes almost unreadable. Any help with this would be much appreciated!

1 Like
2

In your story’s Stylesheet, put the following…

tw-dialog-links {
	flex-direction: column;
	gap: 0.5rem;
}

tw-dialog-links > tw-link {
	margin: 0 !important;
}

This will make all (dialog:) macros show their options vertically.

image

If you want to make it just for the dialogs in a specific passage, put the CSS code wrapped around opening and closing <style> </style> tags in the passage you want to affect. Also, there are ways to target specific dialogs within the same passage, but I won’t go there unless you need to. One thing at a time. :wink:

1 Like
3

Or just assigned those specific Passages a known Passage Tag (like vertical-options ) and then add a filter for that tag to the CSS Selectors being used to style the dialog’s links…

tw-story[tags~="vertical-options"] tw-dialog-links {
	flex-direction: column;
	gap: 0.5rem;
}

tw-story[tags~="vertical-options"] tw-dialog-links > tw-link {
	margin: 0 !important;
}

…that way only a single copy of the related CSS Rules is needed if there are multiple such Passages.

note: you can rename the Passage Tag to whatever makes sense to you, as long as you also change the reference to it in the above CSS Selectors.

2 Likes
4

:0 You are amazing thank you so much! This is perfect!

1 Like