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 (21)


thank youuuu!!

January 19, 2013 4:08 am Reply


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 –

[…] 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


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


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

The two sideline referees are responsible for sending out a signal when someone makes an offside.

According to the Bleacher Report on Wednesday, it might be the home country,
Russia, who gets the advantage as the games are in Sochi and that might make it tough for USA to pull off the gold.

The timber block has been replaced with a vulcanized rubber
puck and sticks with flags have been distorted with right
hockey nets.

December 18, 2014 9:38 am Reply


Genuinely no matter if someone doesn’t be aware of afterward its up
to other viewers that they will assist, so here it

June 8, 2015 2:58 pm Reply


Great article.

August 27, 2015 2:26 pm Reply

mens beanie hats

Good write-up, I am normal visitor of one?s website, maintain up the excellent operate, and It is going to be a regular visitor for a lengthy time.

September 11, 2015 5:16 am Reply

Back Pain

Applying ice to swollen areas and taking anti-inflammatory medications may relieve some of the pain. Plantar fasciitis can be treated with rest, orthotics, anti-inflammatory medications,
steroid injections and sometimes surgery. The i – Pad 2S aka i – Pad
HD aka i – Pad 3 is now known as just the i – Pad.

January 6, 2016 12:23 pm Reply

On Writing Twine – Electron Dance

[…] myself about a decade ago. I also read it. The twine community, instead, offers ready-made CSS and concise advice. No one wants your CSS becoming complicated, because CSS will eat you for […]

March 9, 2016 2:03 am Reply

So these guys are my favourite philosophical poets of our post internet I resonate with a lot of their characters far more than the messages from our government about bombing countries in the name of democracy and freedom or liberating from Is Plato saying I should just play along with the official line and not attempt to alter that course or it’ll bring society down?

September 28, 2016 12:09 pm Reply

Amy Haritos

Yogi on the Green was written to help golfers of all abilities, to hopefully improve on their physical and mental games. It has been proven in many Medical Journals, that when one improves on their physical being they also improve on their mental awareness, “Yogi On The Green” is a guide to improving Golfers physical and mental abilities, both on the Golf Course and perhaps even their daily lives.

February 5, 2020 4:27 am Reply

Rudolf Fremont

Hello, I was just taking a look at your website and submitted this message via your feedback form. The “contact us” page on your site sends you messages like this to your email account which is why you’re reading through my message right now correct? This is the most important achievement with any kind of advertising, making people actually READ your advertisement and that’s exactly what I just accomplished with you! If you have an advertisement you would like to promote to thousands of websites via their contact forms in the US or anywhere in the world send me a quick note now, I can even focus on particular niches and my prices are very reasonable. Write an email to:

March 20, 2020 11:00 pm Reply

Armand Toler


n95 masks directly from our factory in U.S.A.
We have large stocks.
Order here


“Sent from my Mobile device”

April 1, 2020 3:47 am Reply

Ewan Sanger

Wanna post your business on 1000′s of Advertising sites monthly? For a small monthly payment you can get virtually unlimited traffic to your site forever!

Get more info by visiting:

June 13, 2020 8:00 pm Reply

Ludie Well


My name is Ludie Well, and I’m a Web Traffic Specialist. I can get:
– visitors from search engines
– visitors from social media
– visitors from any country you want
– very low bounce rate & long visit duration


October 19, 2020 12:36 am Reply

Micah Johnstone

Find out how to promote your business free of any cost!

Take a peek at this amazing list consisting of the best search websites here >>

October 21, 2020 1:33 am Reply

Ignacio Fusco

Did you know contact form messages like these are in effect a highly effective way to generate leads for your online or offline business? How do we do this? Easy, we create an advertisement like the one you’re reading now for your online business and we submit it to tons of contact pages on any kind of website you want. Do these types of ads work? Since you’ve ready my entire message then you’re proof that they do! What’s more, this doesn’t cost more than a hundred bucks a month! Want to find out more? send a reply here:

January 4, 2021 4:35 pm Reply

Dominic Colorado

Advertise your online business, local shop/service or blog for free. This post shows 5 cool ways to get lots of free ad exposure for your business:

January 14, 2021 5:51 pm Reply

Tia Rabin

Interested in advertising that charges less than $49 every month and sends thousands of people who are ready to buy directly to your website? Check out:

January 27, 2021 11:00 am Reply

Post a Comment

Posting your comment...

Subscribe to these comment via email