Howdy, Stranger!

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

CSS is Your Friend: The Basics of Changing Twine's Default Appearance For Newbs

edited March 2014 in Workshop
Twine is a fantastic tool for quickly and easily making "choose your own adventure" games. However, in my opinion, Sugarcane, Twine's default story format, or "header," is a bit lacking in appearance. Neither Sugarcane's minimalistic design nor its white text on black background are the issue; it's just that Sugarcane makes a poor "one size fits all" format for the wide variety of Twine stories and games published. Unfortunately, it is by by great and wide margin the most often used even when it's a painfully bad fit. Also, its text is much too small in my opinion and that's not an insignificant complaint because almost all of what makes a Twine game is the text. The sidebar is a real eyesore when creating a custom layout that gets quickly thrown out, thus losing the use of Sugarcane's cool Rewind feature (and the need for the StoryAuthor passage, but that's not a disadvantage).

This may come as a huge shock, but one way around the issue is not to use Sugarcane. I say that tongue-in-cheek, but I didn't know about the other two story formats for a month or more of using Twine. That's right, you heard it here first: Twine comes with two other story formats: Responsive and Jonah. To change the default story format, select another from the Story drop-down menu up at the top of the Twine window.

Responsive is basically another version of Sugarcane that's white with black text and the appearance of tabs at the top rather than a sidebar to the left. This format may or may not suit your game better (though it would greatly benefit from increased text size as well). The other default story format is Jonah. It's much different. All the passages stay on the same page; a new passage appears below the old one. If you've never looked at the other two story formats, give them a look-see. I'll wait.

Back? Okay. Let's begin.


This is a very basic guide for using Cascading Style Sheets (CSS) to format the appearance of a Twine story using the Sugarcane story format in Microsoft Windows. Twine creates HTML documents. HTML documents are styled with CSS. So, Twine stories are styled with CSS. Make sense? Great.

Open a new story and follow along. You'll never even have to save the story or build an HTML document. You can test a story from the beginning by right-clicking the Start passage and clicking "Test Play From Here." Pretty cool, right?

Now, right-click anywhere in the open of Twine's main window pane and click on "New Stylesheet Here." That will create a stylesheet (SS), but you probably guessed that, right? ;)

A stylesheet is just a passage with the tag "stylesheet" without quotes (tags don't use quotes). It contains CSS code. Kinda daunting at first, but remember, CSS of your friend! :) What is contained in a SS changes the default CSS in Twine's HTML file. You can see what the default CSS is by viewing the source of your game's HTML file. No matter what you put in a SS, the old CSS remains, but what is in the SS will replace it. This can, and often does, cause conflicts, but those are beyond the scope of this beginner's guide.

This is what is contained in a new blank SS:
/* Your story will use the CSS in this passage to style the page.
Give this passage more tags, and it will only affect passages with those tags.
Example selectors: */

body {
/* This affects the entire page */


}
.passage {
/* This only affects passages */


}
.passage a {
/* This affects passage links */


}
.passage a:hover {
/* This affects links while the cursor is over them */


}
You may notice it gives a number of "example selectors." They are:
  • body
  • .passage
  • .passage a
  • .passage a:hover
They also contain some weird curly bracket characters: '{' and '}'. They are called braces.

Basically, braces contain the selector's code; they can be considered the start and end of that selector's section of code. Pretty simple stuff.

Selectors are also sometimes called elements

If you want to change the way something looks, you add or edit the code of that element. For example, if we want to change the color of the background of our Twine story, we would edit the body element's code like so:
body {
background-color: blue;
}
Or:
body{background-color:blue;}
Or:
body
{
background-color:

blue


;
}
All three examples do the same thing; white space and formatting doesn't matter. I use the first example, no one uses the third. ;)

The "background-color: blue;" code will change the HTML body's background color to blue. Surprise!

Go ahead and add the code to the body element in your SS, then test the game to see the result. Again, you don't have to save the story or build an HTML document. You can test a story from the beginning by right-clicking the Start passage and clicking "Test Play From Here."

Blue! Blue everywhere! It's a Smurf game.

Anyways, now you know how to change the background color to blue, but what if you want it to be another color?

I'll direct you to W3Schools, but know that the information and tutorials there aren't always accurate or up to date. However, W3Schools is one of the best places for beginners to learn for a number of reasons.

With that warning in mind, take a look: http://www.w3schools.com/tags/ref_colornames.asp

In addition to a list of color names, you'll notice hex values (e.g., "#0000FF" for blue). If you want a precise color, you can use hex values to set it. It's probably safer than using color names, but color names are quick and legible. If we wanted a red background, we could use:
body {
background-color: #FF0000;
}
If you try that, you'll see that the background changes from blue to red.

There are a number of ways to change color using CSS. Another way is to set the HSL (hue, saturation, and lightness) values. Note that setting the HSL value requires IE9+.

An HSL color value is specified by setting the hue (with a number), saturation (with a percent), and lightness (with a percent). Hue is a degree on the color wheel (from 0 to 360)0 is red, 120 is green, and 240 is blue. Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness is also a percentage; 0% is black, 100% is white.

So, to set the color to a medium green using an HSL value, we could do:
body {
background-color:hsl(120,100%,50%);
}
At first, it sounds complicated what with all those numbers and percentages and everything, but once you realize that it's just a number representing a color then a percent that's almost always going to be 100%, then another percent that changes the color's brightness, it's pretty easy to mentally picture the result. It does take some practice, though.

Yet another way to change color is to use Red, Green, Blue (RGB) values. If we want to change our background to magenta using RGB value, we could do:
body {
background-color: rgb(255,0,255);
}
Oh, gawds that's ugly. Ouch.

Note that no one way to set color is "better" better or "worse;" it's just personal preference. Use whichever way you like.

Now we know how to change the background color. What else can we change? How about the text!

In HTML, font color is called out specifically to change (e.g., <font color="red">). In CSS, though, we just change the element's color. Note that this will change the color of a lot of things, not just text. We'll deal with that later. For now, try this:
body {
background-color: blue;
color: red;
}
There, we changed the text color to red. However, that's not the best way to change the text color in Twine. For that, we want to move on to a different element.

First, clean up the code by either clearing out what we added to the body element, or just delete the SS and make a new one. Done? Okay. Let's continue.


To change the text color in Twine, one should change the color property in the .passage element. Just know that the .passage element is a class. It's a class because it starts with a period. That's about all we need to know about classes in that regard for now.

We change the text in the .passage class element the same way we did in the body element, like so:
.passage {
color: red;
}
Boosh. The text color is red.

Let's do something else to the passage. Let's put a border around it.

See what this does:
.passage {
color: red;
border-style: solid;
border-width: 1px;
}
Above, we set a solid border, 1-pixel wide, around the passage element.

However, it's red! Maybe we didn't want it to be red. Maybe we wanted it to be yellow. And, maybe we want the background of the passage to be green, too. Because we're crazy like that. Or, maybe it's a Christmas game. Who knows.

Let's change all those colors:
.passage {
color: red;
border-style: solid;
border-width: 1px;
border-color: yellow;
background-color: green;
}
Wow. I thought the magenta background was hideous. That looks like a giant baby with a stomach ulcer just puked on our Twine game.

You probably liked it. Sicko.

Anyways. You can see that the selector properties are normally very specific. If we want to change something, we tell the selector what thing we want change. That's a really deep statement, I know.

Let's start fresh again. Delete that Satan's spawn of a stylesheet and make a new one. Done? Onward ho!


Let's do what even the most basic Sugarcane SS should do, change the text's size.

However, here's where we stop calling the letters and words "text" and start calling them "font." Yes, there's a difference and we'll go into that. Why is there a difference? Because the evil scientists in charge of web standards want to drive you bat guano nuts. That's the only reason. That's not a joke. They are evil and they hate you.

Kind of like my dad. SCREW YOU, DAD!!!  :'(

Family problems aside, we'll again use the .passage element, this time to mess with the font and make it our punk. Like this:
.passage {
font-size: 16px;
}
There. Now the font is legible without a telescope or pair of magnifying glasses.

undefined

Like colors, there are a number of different ways to change the font's size. We set its pixel size. It can also be set with "em" and "%" and "pt" and "small/large/etc.".

Take a look:
.passage {
font-size: 1.5em;
}
And,
.passage {
font-size: 200%;
}
And,
.passage {
font-size: large;
}
Why use the different methods? Well, it goes into web design theory. If you'd like to explore more on that, here are a some links:

https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
http://css-tricks.com/css-font-size/

Normally, I either set the pixel size or use a percent. On occasion, I'll use "em". It just depends on what I'm doing, but I keep it pretty uniform.

Remember way, way back when we changed the font color? Well, you might have noticed that didn't change the link colors. They are still a bluish color.

To change them, you use two other selectors:
.passage a {
/* This affects passage links */
}
.passage a:hover {
/* This affects links while the cursor is over them */
}
By now, you can figure out how to change the color of links with the descriptions provided. ;)

The reason the link colors didn't change is because they are set with default CSS not in the SS. Remember, there's a whole lotta CSS included in the default story format.

We can do a lot more with the font, but I'll let you research that on your own. Check out these two links:

http://www.w3schools.com/css/css_font.asp
http://www.w3schools.com/css/css_text.asp

You'll notice all the changes we made to the font don't affect the sidebar. That's because we're in the .passage element, and the sidebar is another element.

It's not an example element, though, so we need to add it. Here we go:
#sidebar {
}
Sidebar isn't a class, so it doesn't begin with a period, it begins with a pound/hashtag. Why? Because I said so! Also, I don't know how to explain it very well and it's not very important at this point. There. I "went into it" like I said I would earlier.

What we put in the sidebar element will of course change the appearance of the sidebar. We can even remove the Sugarcane sidebar like this:
#sidebar {
display: none;
}
Sidebar is gone.

There are other important elements that Sugarcane uses that aren't listed in the default SS. For example, the #passages element (not to be confused with the .passage class, no 's' at the end).

If you remove the sidebar, you'll see there is still a border to the left of the passage. It's actually in the #passages element. Who'd have thought?

To remove that, we can do:
#passages {
border: 0;
}
Or, more precisely,
#passages {
border-left: 0;
}
Instead of '0' you could use "none" or 0px. All the same.


We don't just use CSS in a stylesheet. We also combine CSS with HTML tags in passages.

Oh no! Space aliens are attacking!

END OF LINE

This is a work in progress. I'll come back to it sooner or later.

Any comments or suggestions appreciated!

Thanks for reading!
«1

Comments

  • This is at least 12 kinds of awesome. :)

    I'd add in the sidebar-hiding code for Sugarcube:
    #ui-bar
    {
    display: none;
    }
  • Again, really helpful stuff.  I will certainly be using this as a reference...currently my game is using the sugarcane standard.  :)
  • Thats great Sharpe! Good job. Thanks for taking the time to do that.  This should get pinned.
  • A god among men is you, Sharpe. Very appreciated.  :D
  • One cool thing I discovered today...if you want your passage space to expand to the size of the browser window, set the height like this in the #passages class:

    height:100vh;

    This works better than height 100% for some reason, and it useful if you have a background image that you want to take up the entire passage.  What I was finding without this was that sometimes my background image would be cut off, and look a little weird in passages where there wasn't a lot of text.

    You can also set it to:

    height:150vh;

    This adds a scroll bar, so, if like me, your passage will expand anyway, this could be handy although maybe not great if your passages are mainly short. 
  • With the sidebar is it possible to display images there?
  • bawpie wrote:
    height:100vh;


    Be aware that support for Viewport units: vw, vh, vmin, vmax is still not universal as can be seen here, so don't be surprised if it does not work for everyone as people don't always run the latest version of their browser of choice.
  • I have one reservation about this article, which is that you neglect to mention hsl(). HSL is generally regarded as several times more intuitive a way of making colours than RGB (which requires you to mentally mix three pigments). You just alter the H value to determine where in the spectrum to take a colour from (0 = red, 64=yellow, 128=green, 192=blue, 255=red again), and the other two percentages control the grayness and the paleness (in a manner of speaking).

    .passage {
    background-color: hsl(32,50%,50%);
    }
  • I guess it depends what your used to using, if you're needing to support IE < 9, and if your editer's colour picker/selector supports HSL.

    From W3's point of view they are all equally valid.
  • Glad you approve, L. Good suggestion. I'll add HSL() color. Thanks.

    EDIT: Added.
  • What's the trick to changing the color of the credits?  I can get them to turn up in a different color - but the links are still grey and the credits turn gray when you bring the mouse near them.
  • Very informative! I just have one question: how do I change the styling of the sidebar elements? I need to change the color of the storyMenu hover links, and I'd also like to increase the size of the StoryTitle and StoryAuthor displayed as well.
  • For things in the sidebar (including the credits), you have to use the specific id or class names for each element. To find out what those are, you can look at the HTML for the Sugarcane (default) and Jonah story formats on the wiki. Sugarcane is here: http://twinery.org/wiki/sugarcane_html and Jonah is here: http://twinery.org/wiki/jonah_html.
  • Thanks, but I still can't figure out how to change the mouse hover colors! You know, like how you change the hover color in the passages like this:
    .passage a:hover {
    color: Yellow;

    }
    Does anyone know how to do that?
  • Do you mean that code isn't working for you, or do you mean you want to change the color of the actual mouse pointer (cursor)?

    http://css-tricks.com/almanac/properties/c/cursor/
    http://www.w3schools.com/cssref/pr_class_cursor.asp

    To change the mouse pointer's appearance, import the pointer's desired image and add the following (with correct image name) to your stylesheet:
    html, body {
    cursor: [img[pointer]], auto;
    }
    Add that same code ("cursor: [img[pointer]], auto;") to your CSS for links and buttons and such.

    If you need an example TWS, I can make one.

    Hope that helps! :)
  • No, no, the code's working for me, I just need to figure out a way to make it work for the sidebar elements like the Restart and Bookmark buttons, and any other items I choose to add to the StoryMenu.
  • Alright, I got home from work, so let me show you what I mean.

    Here is a picture of the Storymenu when the mouse isn't on it.
    [IMG]http://i.imgur.com/VKczj5K.png[/img]

    Here is a picture of the Storymenu when the mouse is on it (pretend you see a mouse pointer on "About" there); note how it's almost invisible against the white background? I would like to change the color of this to pretty much any other color than it is right now, so if you could tell me how to change its CSS that would be great.
    [IMG]http://i.imgur.com/s8dHL0a.png[/img]

    [B][I]EDIT:[/I][/B] Okay, I figured out how to change this:
    #storyMenu a:hover {
    color: Blue !important;

    }
    However, it does not change Restart's hover color to blue.

    I tried this, but it also didn't work:
    #restart a:hover {
    color: Blue !important;

    }
    What am I doing wrong? Am I misspelling something?
  • First of alland if I didn't say this in my guide, I'll add ityou can look at the base CSS by simply viewing the page source of your HTML file. So, when you're playing your game, right click anywhere (in Chrome/FF/IE) and click "view source." You'll see where it says, "<style id="baseCSS">". All that stuff is Sugarcane's base CSS.

    So, we look in there for what you want to change. In this case, I think it will be mainly #sidebar #whatever.

    I think this is just about everything over there as far as I can tell:
    #sidebar li a:hover, #sidebar #title a:hover {
    color: blue;
    text-decoration: none;
    }

    #sidebar #title a {
    color: blue;
    }

    #sidebar #title:hover {
    color: blue;
    }

    #sidebar #credits:hover {
    color: blue;
    }

    #sidebar #credits a {
    text-decoration: none;
    }

    #sidebar #restart:hover {
    color: blue;
    }

    Hope that helps! :)
  • Thank you for a great CSS refresher and a basic guide to what's what in Twine. For some reason, I can't get the .passage color to work at all, even when I put in the "!important" declaration or when I write out "black".

    Here's the offending code--everything EXCEPT color is working:


    .passage {
    font-size: 11pt;
    font-family: Verdana, Geneva, sans-serif
    color: #000000

    }

    What am I missing? I'm sure it's something I am just not seeing that is as plain as day to someone else.
  • dsrtrosy wrote:

    Here's the offending code--everything EXCEPT color is working:

    .passage {
    font-size: 11pt;
    font-family: Verdana, Geneva, sans-serif
    color: #000000

    }


    Both your font-family and color settings are missing semi-colons at the end of the lines (or at least they are in your example)

    .passage {
    font-size: 11pt;
    font-family: Verdana, Geneva, sans-serif;
    color: #000000;
    }
  • Oh brother...of course they are!

    Thank you. I should not be changing code at the end of a 16-hour work day, at the end of a 60-hour work week! (and this is something I'm doing "for fun"!!)
  • hey i was wondering if anyone could tell me how to display an image instead of a just a solid color also i was wondering why the
    .passage {
    color: #000000;
    border-style: solid;
    border-width: 1px;  
    }
    wasn't working for me?

    oh and how to play sounds at specified times
    I'm running sugercube :)
  • Those are fairly broad questions so I'll just give broad answers.

    Look up the css background-image property and apply it to your html class for background image, and your passages css for passage image. If applying to the html, you will also need to make the body class background transparent so you can see the html underneath.

    Also look up the SugarCube audio documentation. How to play sounds at specific times is all there.
  • huh sorry you lost me :o
  • http://www.w3schools.com/cssref/pr_background-image.asp

    Changing Twine's appearance is simply website styling, so all the information is out there. You need to review and understand the various css properties that are used.
  • To give you specific code, if you want, for example, to change the background image to a background that's in the same folder as your Twine 2 application, it'd go something like this:

    html {
    background-image: [img[background.jpg]];
    }

    body {
    background-color: transparent;
    }
    That makes the body area transparent so the html background can be seen. If it's not working for you then you've probably got the image path wrong.

    But I directed you to look into CSS earlier because things like this aren't plug and play. You need to have a solid grasp of CSS to get it to look good, as well as make sure it looks good on all browsers and screen resolutions.
  • excellent resources here!!
  • is there any way the moderators of the forum could tag this thread as "tutorial"?

    I'm thinking that lots of newbs like myself often look for help in getting started with twine, and anything that constitutes a tutorial of sorts (like the css of twine in this case) is highly valuable and saves a lot of time.

    That way all threads of a basic, tutorial nature would be tagged with "tutorial" and would be easy to find. I know the author of the thread could put tags when starting the thread, but once published, I don't think the author is able to add tags, and so I wonder whether this is something the moderators could do.

    just a suggestion. thanks.
  • Real quick, I attempted to add a tutorial tag (I'm both a mod and the author), but received an error message saying the post was about 9,000 characters too long. I'll talk to Chris about it. If possible, I'd like tags to be user-editable like they are in most forums I view. I'm also not a fan of strict character limits in posts, so I'll try to schmooze him into loosening that as well.

    As far as I know, there were no such thing as tags using the old forum software in which I wrote this, or I would have done so.

    The forum software is brand-spanking-new, so there are a number of little kinks to find, examine, and, if needed, resolve.
Sign In or Register to comment.