Make Your Game Look Great!
So how do you alter the appearance of your story, how do you make it look nice? The answer is with CSS coding! Twine publishes to html files which means you can simply play them in the web and it also means anything you can do on the web you can do in Twine! I think it’s important to know that every webpage you ever open on the web is styled with CSS. This means if you Google how to do something with CSS there will be way more recourses then you will ever need. We’re not going to go into depth learning CSS here as that would be a course on it’s own but we are going to provide you with some basic code so you change the looks of your game!
To edit your Twine story’s CSS, click on the Story menu item in the top menu bar then click # Stylesheet in the menu bar below. This will load a screen that is just an empty CSS file.
To change the background color of you game enter the following CSS code
tw-story {
background-color: white;
color: #424949;
font-family: Ariel,Impact,Helvetica,sans-serif;
font-size: 115%;
}
To change the color of linked text and to change the color that displays when you hover over linked text enter the following code
tw-link {
color: #1434A4;
}
tw-link:hover {
color: #6F8FAF;
text-decoration: none;
border-bottom: 4px solid #6F8FAF;
}
I want my images to be centered on the page, if you do to then enter the following code. We will go over how to add the “class” center when we go over how to add images to your game!
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
Your story’s stylesheet should look something like the one we made for this game below.
GOOGLE FONTS
You can change the primary font for your story in CSS. Google fonts has a visual guide to fonts to help you choose what to use.
HEX CODES COLOUR PICKER
You can use this site to find and customize your Twine colour pallet using CSS or in Twine.
https://htmlcolorcodes.com/
—
What would you like to do next?
