›

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Register

Categories

Proper syntax to change background color and font defaults per passage? (Harlowe)

robosnacksrobosnacks
edited October 2015 in Help! with 2.0
Is there a proper way to change formatting of text, links, bgColor, bgImage, font, etc per passage? Or to apply styles to a passage created in the stylesheet?

I've managed to create styles that apply to a block of text, but not to the passage background color.

I tried these two examples in a passage at the top to no avail: 
tw-passage
{
	background-color:#144082,color:#B8C6DA,text-align:left
}

This one's based on a style I created in the stylesheet. 
tw-passage
{
	div class="title"
}

Comments

  • greyelfgreyelf
    You can look at the HTML generated for the currently displayed passage using a web-browser built in Inspect Element feature. (Chrome and Firefox)

    The basic structure of a Harlowe story is as follows: 
    <tw-story>
	<tw-passage>
		<tw-sidebar>...</tw-sidebar>
		The contents of the passage being shown.
	</tw-passage>
<tw-story>
    The basic structure of a markup link is: 
    <tw-expression>
	<tw-link>The Link Text</tw-link>
</tw-expression>

    So based on the above structures to change the background colour of the passage area to green you would do the following: 
    tw-passage {
	background-color: green;
}
  • robosnacksrobosnacks
    Ah ok. So I do this once the story is done, and edit the source code, not in the twine editor itself?
  • greyelfgreyelf
    edited October 2015
    No, you place the CSS into your story's Story Stylesheet area.

    To access the Story Stylesheet area you first click on the blue upwards pointing triangle in the lower left corner of the Story Passage Map (blue screen with grid) and then select the Edit Story Stylesheet option.

    You may want to read the Twine 2 Guide, in particular the section on Change the Font, Colors, or Appearance
Sign In or Register to comment.