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.aspIn 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.
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-sizehttp://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.asphttp://www.w3schools.com/css/css_text.aspYou'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!
Comments
I'd add in the sidebar-hiding code for Sugarcube:
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.
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.
From W3's point of view they are all equally valid.
EDIT: Added.
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: 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!
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: However, it does not change Restart's hover color to blue.
I tried this, but it also didn't work: What am I doing wrong? Am I misspelling something?
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: Hope that helps!
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.
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)
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"!!)
.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
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.
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.
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.
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.
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.