Other Formatting Options in Twine

You can use my enchant macros as a starting point for your own visual design in Twine scenarios. Copy and paste the entire code below, then edit and experiment with your own variations. Check out the Harlowe manual for additional information.

(enchant:?page,
	(text-color:black)+
	(background:(gradient: 157, 0,#EAF0F7,0.7102,#C1D2E7,1,#F8F7FF))+
	(font:"Open Sans")
)(enchant:?passage,
	(background:(white)) +
	(corner-radius:20) +
	(border:"none", "none", "none", "solid")+
	(border-size:120) +
	(border-color:#6F95C8)
)(enchant:?link,
	(background:#052650) +
	(border:'solid') +
	(color:white) +
	(corner-radius: 12) +
	(border-color:#F8F7FF) +
	(border-size:1) +
	(hover-style: (bg:#3168b0) + (border-color:white))
)

Hide the sidebar

One variation is to hide the sidebar. That will remove the undo and redo buttons. In this case, you need a solid border all around the passage, but it should be narrower. Use the hide macro to hide the sidebar.

(enchant:?passage,
	(background:(white)) +
	(corner-radius:20) +
	(border:"solid")+
	(border-size:3) +
	(border-color:#6F95C8)
)
(hide:?sidebar)

Buttons instead of rounded rectangles

Instead of manually setting rounded rectangles for the buttons, you can use a shortcut with the button macro. This makes links take up the full width of the page and look like a button without having to manually tweak all of the settings. The big advantage here is that it’s quick and easy, especially for a text-based scenario.

(enchant:?link,
    (button:)
)

However, with the default button settings, the floating image appears behind the buttons.

Therefore, if you plan to use the button macro, make sure your images don’t have the float style. In this case, just removed the float so the images are at the top of each passage.

<img src="nia_thinking.png" alt="Jeanne with 1 finger pointing up" width=40%>

The button macro also centers the text, and there doesn’t seem to be a way to override that option without using CSS. The choice text is often long enough that left aligning the text might be easier to read.

More ideas

Check out the Styling with Enchantments example story for additional ideas and code samples for changing the look of your stories.