Twine Code Repository
Align all text to centre
tw-passage {
text-align: center;
}
Code to align single passages to centre (must add tag to passage, written here as ‘middle’)
tw-passage[tags~=”middle”] {
text-align: center;
}
Change letter spacing
tw-passage {
letter-spacing: 1.1px;
}
Change text colour to red (can substitute hex codes with # at the start)
tw-passage {
color:red;
}
Change button colour to green (same rules as any other hex code colour)
tw-link {
color:green;
}
Change hover text colour to red
.enchantment-link:hover, tw-link:hover {
color: red;
}
Change text font to pre-installed basic font
tw-passage {
font-family: arial;
}
Linking a google font in the first line of the CSS, to use later in the CSS
@import url(http://fonts.googleapis.com/css?family=Gruppo);
@import url(http://fonts.googleapis.com/css?family=Fanwood+Text);
Assign font to paragraph element or heading element
p {
font-family:gruppo;
}
h1 {
font-family: fanwood text;
}
Assign font, size, and colour to p element
h1 {
font-family: fanwood text;
color: #ff1a8c;
font-size: 18px;
}
Add image
</style>
<img src=http://www.huhmagazine.co.uk/images/uploaded/supermariorun_releasedate_00.jpg>
</div>
Scale image to page
<style> img {
max-width:100%;
max-height:100%;
}
</style>
<img src=http://www.huhmagazine.co.uk/images/uploaded/supermariorun_releasedate_00.jpg>
</div>
Add background image to specific page
tw-story {
background-image:url(“ENTER YOUR URL HERE”);
background-size:cover;
}
Add background image to a tag in the css
tw-story[tags~=”snow”] {
background-image:url(“ENTER YOUR URL HERE”);
background-size:cover;
}
Adding basic save/load functions
(link: “save”)[(save-game: “file A”)]
(link: “load”)[(load-game: “file A”)]
How to hide the sidebar (add to css)
tw-sidebar {
visibility: hidden
}
How to delete sidebar objects (add to css)
tw-sidebar tw-icon.redo {
display: none;
}
tw-sidebar tw-icon.undo {
display: none;
}
How to add looping music
var audio = document.createElement(‘audio’);
audio.src =
‘https://mayflowerassets.yolasite.com/resources/Make%20Me%20A%20Bird%20-%20Elektrik%20People.mp3’;
audio.loop = true;
audio.play();
Free website to upload assets to futureproof asset links in the code, can password protect and it still works: https://www.yola.com
How to add sound effects
<audio src=https://tempassets.yolasite.com/resources/Found%20Object%20-%20Sound%20effect.mp3 autoplay>
How to add sound effects that loop
<audio src=https://tempassets.yolasite.com/resources/Found%20Object%20-%20Sound%20effect.mp3 autoplay loop>
