Twine CSS (Sugarcane Edition)

Published on Jan 19th, 2013 by

HELLO. Some people, such as myself, make Twine games using the Sugarcane layout. Sometimes it’s hard to do the CSS, because the CSS selectors you need to know aren’t immediately obvious. I’ve looked at various Twine CSS guides but they all seem to be missing bits of info. So, I figured I’d list some random bits of CSS for Twine games using Sugarcane, in the hope they are useful. For the most part, you can change the actual CSS part { the bits in these things } by just looking up regular CSS stuff, it’s the actual selectors you need to know in advance, so these are mainly what I’ll focus on.

Note: Putting !important in a tag just makes sure nothing overrides it. Worth trying if some CSS isn’t working that you feel should be working. Also, with the font family, you need to put it in “quotation marks” if the font is more than one word. Otherwise it doesn’t matter.

Here’s the CSS from my last game:

.passage { width: 600px !important } – the overall passage size

#passages { color: #000000; !important }
#passages { font-weight: normal }
#passages { font-family:”courier new”; !important } – #passages affects the text in the main box. So here, I’ve set the font to courier new. Actually Molly did this one but whatever, I’ll take the credit.

body { background-color: #888888 }  - ‘body’ is basically ‘the whole page’. You can use this to denote the background colour, set a background image etc. 

#sidebar li{ color: #990000; }
#sidebar li{ font-family:”courier new”; !important } – so ‘#sidebar li’ is everything in the Sugarcane sidebar that isn’t the title/author. 

#sidebar #title { color: #990000; }
#sidebar #title { font-family:”courier new”; !important }  - and #sidebar #title is the title/author.

#sidebar #title:hover { color: #ffffff; } -  This is the mouseover change that occurs when you mouseover the title/author (I don’t know why this even has a mouseover function but there you go).

NOTE: One tutorial said simply using #sidebar can affect it all, which maybe it SHOULD, but it doesn’t, so I dunno. Doing it individually works, though.

a:link { color: #990000; } – this affects links

a.internalLink:hover,a.externalLink:hover,a.back:hover { color: #ffffff; } – This also affects links, and lets you change the mouseover colour for actual links. If you want to change these to individual things, just split them up such as a.internalLink:hover {color: #ffffff } etc. 

a:visited { color:#4CBB17; } – This affects links you’ve already visited. You’ll really only ever want to have a colour command here, but I guess you could go wild and change visited link fonts to Comic Sans. 

OKAY SO this is just some CSS from my last Twine game, and I haven’t done anything more complex than this yet because I’m still working it out myself, but a few of these weren’t easily available to find, so hopefully they’ll help someone! I’ll update the post as and when there’s something new to add.

So hey, it’d be cool if you checked out my Twine games while you’re here: Simmons | Don’t Read The Comments | Never Have I Ever (with Molly Carroll)

AND, a recent Twine game jam a bunch of us did can be found here.

And if you’ve never had a go with Twine before, Anna Anthropy’s excellent starter guide is, as always, the first port of call.

 

Latest Comments (5)

Porpentine

thank youuuu!!

January 19, 2013 4:08 am Reply

L

You don’t actually need each individual declaration inside its own block. You could rewrite the #passages blocks as:

#passages {
color: #000000; !important;
font-weight: normal;
font-family:”courier new” !important; }

Just put semicolons at the end of each line.

(Also, the !important keyword doesn’t work if it comes after a semicolon in a line.)

January 26, 2013 5:17 pm Reply

A Game Maker Is You – Twine – Infodump – weekendwarrio.rsweekendwarrio.rs

[…] use of Comic Sans, but even if they don’t, you want your story to stand out from the crowd. This post by Ashton Raze has some CSS for the Sugarcane template specifically – it’s a straightforward little […]

August 26, 2013 7:30 am Reply

Roseanna

If you desire to grow your know-how simply keep visitingg this site and be updaed with the most
recent nwws update posted here.

October 18, 2014 1:09 am Reply

raze1

They engross dozens or even hundreds of players based around the world.

Combined with the additional comfort options it provides, the Orbweaver looks like a solid upgrade from the
Nostromo. Vikings can be used to hunt for Overlords on the map,and can be usefull when Broodlords are on the field.

October 30, 2014 3:02 pm Reply

Post a Comment

Posting your comment...

Subscribe to these comment via email

http://www.ashtonraze.com/wp-content/themes/smokeandmirrors