Changing the look

Many of the ways you can change the appearance of your Twine IF can now be found right in the upper menu when editing a passage. Just below you'll find an image that will show you the buttons to click and below that image you'll also find the codes to do much of the same. Once you get the hang of it, you may find that tossing in some code and copying and pasting chunks of it will be faster than clicking the buttons. Either way works just fine!

Changing the look of your IF via the menu.

Changing the look of your IF with coding.

You will find that there are some things you might want to do with the appearance of you IF that is not easy to do with the menu system. That's where coding can also come into play. For example, via coding you can use the CSS style sheets to change all the default fonts in your story, use images for the background of a page, and much more!

Fonts

Changing Fonts and backgrounds for the entire story

This involves changing the CSS for the story, which is doable, and not that difficult. Just log into your main story screen, and then click on the ‘up’ arrow at the bottom-left of the screen (should be next to your story name) and choose “edit Story Stylesheet.” Great information on this here: https://twinery.org/wiki/twine2:change_the_font_colors_or_appearance

[editorial comment: the wiki is now forwarding to the cookbook, but not necessarily to a relevant page; do we want to link to https://twinery.org/cookbook/css/storyformats/harlowe.html (or https://twinery.org/cookbook/css/storyformats/) here? --djs]

• Change your font with CSS. Go to the CSS Stylesheet, and make in insertion like this:

body, tw-story

{

font-family: Palatino;

font-size: 18px;

}

This would change both your standard font and the standard size of text for the entire story

• IF you want to change the font for just an individual word or words within a passage (this certainly makes sense for some stories), simply add this directly into the passage for the word(s) you want to change:

(font: "Courier New") [The text that you want to change is within these brackets.]

Backgrounds

• Change the background color for the entire story. Again to your CSS Stylesheet and insert something like this (just use any hexadecimal color codes right after that #):

tw-story { background-color: #A9F5F2;}

You can also use a background image for your entire story. Again, go to your Stylesheet

tw-story {

background-image:url("https://image.freepik.com/free-photo/close-up-black-marble-textured-background_53876-63511.jpg");

background-size: cover;

}

Or use a background image for an individual page. Again, go to your Stylesheet.

tw-story[tags~="castle"] {

background-image:url("http://ohiofi.com/img/The%20Castle%202.png");

background-size:cover;

• Change the background color for individual pages. Sometimes you might want different colors on different pages. Maybe scary colors have a black background. Passages set in a forest have a green background, etc. This is an easy two-step process. First, add this information into your stylesheet:

tw-story[tags~="insertTAGhere"] {

background-color: insertCOLORhere;

}

So, if I wanted to have a page with a Green background this might look like this:

tw-story[tags~="Green"] {

background-color: Green;

}

The second part is to add the tag, in this case I just called it ‘Green’. You go to the passage where you want to change the background and edit it. Now at the top of the screen click on the ‘Tag’ button and type in ‘Green’. This will cause that passage to go check the CSS for one that has ‘Green’ as its Tag and change the color accordingly. Note that you could put 1, 2, or 10 of these snippets into your CSS to have lots of different background colors. You can even have Gradient backgrounds. For example, this one will give you a background that shifts from Black to Purple. Cool!

tw-story[tags~="Purple"] {

background-image: linear-gradient(to bottom right, black, purple);

}

On the other hand, you can make a WIDE variety of changes to individual text by just adding some simple codes into your passages.

• Bold: **Words** or ''Words''

• Italics: *Italics* or //Italics//

• Verbatim Text: Verbatim

• Colored Text: (text-colour: “red”)[Some text you want to appear red.] You can choose from any standard html color name, even including transparent: https://www.w3schools.com/colors/colors_names.asp

Embossed Text: (text-style: “emboss”)[Some text you want to appear embossed.] There are lots more!!!