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.


Continue Reading

Fixing Inverted Text For People Who Get Migraines/Are Photosensitive

Published on Jan 11th, 2013 by

So I, along with many other people, get migraines, and also have weird light sensitivity where certain things are uncomfortable or impossible to look at for long. I can’t read blue LEDs for example, and can barely read blue text at all, nor can I view white text on a black background for more than about 10 seconds before a migraine/nausea/dizziness kicks in. It’s a pretty common problem for migraine sufferers and people with photosensitivity. When you complain about it people tend to think you’re just being fussy about how you want something to appear, but it’s actually super unpleasant and has nothing to do with visual taste.

Continue Reading