Twine: changing style and variables


Download the variables example here.

Stylesheet

Copy paste this example in the story > edit story stylesheet page

 

@import url(https://fonts.googleapis.com/css?family=Poiret+One);
/* this is a font import see below what it means */

/* Everything between these symbols is a comment and it won't affect the appearance */

/*
Cascading Style Sheets (CSS) is a language for specifying how documents (usually web pages) are presented to users. CSS code doesn't include content, only how parts of a document will appear in the browser.

To set the appearance of certain elements you need to know the names of the HTML elements. In case of twine2 there are only a few of them so it will be easy.
--- This tutorial refers to the Harlowe format ---
*/

/*
In the example below body is the selector, background-color is the property, #0f0f0f; is the value of the property.
The property:value; syntax is mandatory, including the semicolon. 

body is the container for everything else in the page.
*/

body {
background-color: #E2FFED;
}

/*
Multiple properties can defined for each element. Try to copy and paste these lines:

background-image: url("http://mycours.es/gamedesign2015/files/2015/09/colorful-triangles-background_yB0qTG6.jpg");


*/

/*
Color values in CSS can take five different forms: two hexadecimal, and two decimal, and plain-text color names like "black," "red," "pink," etc.

Hexadecimal goes from 0 to F, where A is 10, B is 11, etc. and F is 15. The max value for any color is FF, or 255 in decimal. When used to represent color, each third of the string represents a different color - red, green, and blue, in that order. So the components of a six-length hex string are like so: #ffffff

Here's red in 6-length hex: #ff0000

And here's the same color in 3-length hex, in which each value is effectively doubled (f -> ff, 0->00, etc.), resulting in an identical color value of the above 6-length hex: #f00

The max value for decimal notation is 255. So if we wanted to represent red with decimal notation, it'd look like this:

Here's red in decimal notation: rgb(255, 0, 0) 

You can have a 4th channel too, which is the alpha, i.e. opacity

rgba(255, 0, 0, 0.5)
*/

/* tw-passage is the style of each passage. Here are some common properties */

tw-passage {
background-color: #4FFFB8;
width: 400px;
padding:10px;
border: 5px solid #3CE8B7;
border-radius: 10px;
color:#248F84;
}

/* 
You can use custom fonts from google fonts https://www.google.com/fonts#
Here's how:
1. pick a font you like
2. click "quick use"
3. copy and paste the @import code at the very top of this page
4. copy and paste the font-family code inside the element you want to change (see below)
*/

tw-passage {
font-family: 'Poiret One', cursive;
font-size: 30px;
}

/* Note how you can have multiple selectors pointing at the same element the properties below will override the properties above 
*/

/* offset-x | offset-y | blur-radius | color */
tw-passage {
text-shadow: 1px 1px 2px rgba(0,0,0,0.5); 
}

/* tw-link will change the links' appearance */
tw-link {
color: rgb(255, 0, 215); 
}

/* uncomment this if you want the "undo" arrow to disappear */

/*
tw-icon.undo {
    display:none;
}

tw-icon.redo {
    display:none;
}

*/

/*
You can find a more extensive tutorial here:
http://furkleindustries.com/fictions/twine/twine2_CSS_tutorial/
*/

Posted in