Twine CSS

October 28, 2015

CASCADING STYLE SHEETS

ezgif.com-crop

To customize the way your game looks, click the menu in the bottom-left, then Edit Story Stylesheet. In the stylesheet, you can write CSS code that will allow you to change the background color, the text color, the maximum size for pictures, and much more.

If you put the code background:lightblue; in the section after body { , it changes the background to light blue. Putting the code color:darkgreen; in the section after tw-story { changes the text color to darkgreen. The code img { max-width:600px; } says to the computer, "All images (pictures, animated gifs, etc.) should be 600 pixels wide or less."

Screenshot 2015-10-28 12.43.21
Here is some basic CSS that can be used with Harlowe, the default Twine 2 theme.

mario

P.S.
To remove the back arrow (I recommend it for Twine games) include this code in your CSS

CONTINUE TO THE NEXT POST: Twine code, keys, and locked doors




RECENT POSTS

Mastodon