Harlow StyleSheet

thilliard · February 2016

Am I able to change the stylesheet in Harlow? I checked the Harlow guidebook and I saw the that there are codes available to align text, change backgrounds, etc. which is perfect. Although I'm not sure how I'm supposed to enter the code into the stylesheet. I can use

<==>

to justify text per passage, but I want to create a style sheet that includes the code. How do I do this? Regular CSS coding suggests I should use

div {
    text-align: justify;
}

but that hasn't really been working.

greyelf · February 2016

If you haven't already done so I suggest you read the Twine 2 Guide, especially the
Adding Custom CSS and Change the Font, Colors, or Appearance sections which will give you a basic understanding on how to use CSS to style your story.

The Harlowe manual does not contain much information about the structure of the HTML it generates but if you use the Development Tools of your web-browser of choice to view the HTML elements they will look something like the following:

<html>
	<head>...</head>
	<body>...</body>
	<tw-story>
		<tw-passage>
			<tw-sidebar>
				<tw-icon class="undo" title="Undo">↶</tw-icon>
				<tw-icon class="redo" title="Redo">↷</tw-icon>
			</tw-sidebar>

			... The contents of the current Passage being shown ...

		</tw-passage>
	</tw-story>
</html>

note: The above example only contains the bare minimum HTML elements needed to show the Harlowe story layout.

So if you wanted to justify all the text contained within the Passage then you could add something like the following to your Story Stylesheet area:

tw-passage {
	text-align: justify;
}

thilliard · February 2016

thank you, I had heard that Harlowe is more limited in CSS but I was having trouble figuring out how to edit anything. Got nervous that I wouldn't be able to edit it at all. Thank you for your patience with my newbie inquiries.

Howdy, Stranger!

Categories

Harlow StyleSheet

Comments