Visual Design in Twine

If you selected another tool for development, you can skip this information on formatting in Twine and jump right to the assignment now.

You previously learned some basic formatting in Harlowe. Now, we’re going to build on that foundation. This requires changing the formatting with “enchant” macros on three separate elements: the page, passage, and links.

Default style

This is the starting point; just basic text and links. The default style is a black background with white text, but you probably changed this to a lighter white or gray background and black text previously.

Page settings: Gradient background and text

As in the basics, use the passage titled Style with the tag “header.” The page settings affect the entire background and story. You may need to delete your existing enchant macro to avoid duplicate or conflicting settings.

1. Select the colors button.
2. Change the text color to the flat color black.
3. Change the background to a gradient. I used some light blues for a subtle gradient. You may need to play around with the gradient options until you get exactly what you want.
4. Set it to affect the entire page.

That generates the following code:

(enchant:?page,
     (text-color:black)+
     (background:(gradient: 157,0,#EAF0F7,0.7102,#C1D2E7,1,#F8F7FF))
)

I also changed the font to Open Sans by adding +(font:”Open Sans”). This command works with any font available to the browser, so any standard online fonts should work.

This is the final code for the page:

(enchant:?page,
     (text-color:black)+
     (background:(gradient: 157, 0,#EAF0F7,0.7102,#C1D2E7,1,#F8F7FF))+
     (font:"Open Sans")
)

Passage settings: Background, rounded corners, sidebar

Next is the passage settings. The passage settings control the container for the story text itself. You can copy and paste the settings below into the Style passage.

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

• background = the background of the passage
• corner-radius = the setting for how rounded the corners are
• border = the border around the passage. The only border shown is on the left side, and it’s a solid color. That’s the background for the sidebar with the previous button.
• border-size = the width of the sidebar
• border-color = the color of the sidebar

Link settings: Background color, rounded corners, hover

To make the links look more like buttons, I changed the background and text colors. I also added rounded corners and a hover style with a different color. These enchant settings should be attached to the link.

(enchant:?link,
     (background:#052650) +
     (border:'solid') +
     (color:white) +
     (corner-radius: 12) +
     (border-color:#F8F7FF) +
     (border-size:1) +
     (hover-style: (bg:#3168b0) + (border-color:white))
 )