Interactive Stories

More Twine

Styles in Harlowe

Edit a story's stylesheet (Story > Stylesheet in Twinery) to change colors and fonts. Inspecting the HTML can help you see what classes to style. However, I'd recommend using this great resource to get you started with Harlowe.

CSS Example

@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap');
body, tw-story {  
  background-color: #002b36; 
  color: #839496;
font-family: 'Amatic SC', sans-serif;
  font-size: 1.6em;
}
.enchantment-link, tw-link, a {
  color: #cb4b16; 
  font-weight: bold;
}

Hide Sidebar

tw-sidebar { 
  display: none;
}

Using HTML

You can use HTML within passages in Harlowe. Note that all media must be loaded via a URL. I'd recommend uploading to mywebspace and using that URL (e.g., https://mywebspace.quinnipiac.edu/jbwarren/assets/twine/house.png). Let me know if you need help with mywebspace.

HTML Example

Here's an image:

<img src="https://live.staticflickr.com/3770/33104459050_a07488f95d_b.jpg" width="640">
You are in a field. You see a house in front of you.

Here's a video:

<iframe width="560" height="315" src="https://www.youtube.com/embed/AkomTWSql5A" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
You are in a field. You see a house in front of you.

Hooks and Labels

You can use labels and hooks to replace and add text.

Label Example

Hooks are denoted by []. Name them with labels [red]<color|. Here is an example:

You are [standing]<pose| in a [field]<loc|. You see a [house]<thing| in front of you. [Wait?]<wait|(click: ?wait)[(replace:?wait)[Clouds are gathering.]]

(click: ?pose)[You’re legs are tired. You must have been walking a while.]
(click: ?loc)[You can feel a gentle breeze.]
(click: ?thing)[A rest would be nice. Maybe you should go in.]

Timing (and Conditionals)

You can use the (live:) command to execute stuff in a hook over and over. The example below shows implementing randomized (via the either: macro) quick-time-like event in a battle sequence.

Battle Example

Battle
(if: $hit > 2)[You killed the beast.](else:)[You must attack the beast when vulnerable. Beware counterattacks.
(live:0.5s)[(either:"[[Vulnerable|Hit the beast]]", "Ready", "[[Counterattack|Beast hits you]]")]]

Hit the beast
(set: $hit to $hit+1)You've hit the beast ((print:$hit)).
(live:1s)[(go-to:"Battle")]

Beast hits you
The beast counterattacked. You're dead.(set:$hit to 0)
(live:1s)[(go-to:"Battle")]

Sound

Sound is a little tricker. You can try this with Harlowe: Harlowe Audio Library. Or use SugarCube, where it's baked in.