twine sugarcube template
NOTE: this has not been updated to work with sugarcube 2.37. update tba!
---
nothing fancy, just a quick ui template slapped together with some old code i found while digging around my codepen. requires some css / html knowledge.
there are some comments in the file, but my coding process is generally quite messy. feel free to give a shout about any questions you may have!
edit: added a live demo of the template that you can click around in to test things out. updated to the latest version (v3) as of writing this.
instructions:
- download index.html, open in twine.
- if you use tweego, download the .zip file, drop it in your folder of choice, and open directly into visual studio code.
- have a poke around in the code! feel free to modify and use it however you wish.
useful links:
Download
Click download now to get access to the following files:
Development log
- update: centering dialog boxesNov 15, 2021
- update to mobile + menu adjustmentsOct 03, 2021
- minor updateJul 20, 2021
Comments
Log in with itch.io to leave a comment.
Sadly this isn’t working for me with Twine 2.9.1 and Sugarcube 2.37. It just throws errors about elements with IDs in StoryInterface and nothing loads after.
Looking into this further, a LOT of CSS/HTML selectors and some functions have been changed with Sugarcube 2.37, you may want to update this. For example, Sugarcube doesn’t use the div ID “story” anymore, and if you remove it from your StoryInterface script, it spits out a “[tw-user-script-0]: config is not defined” error, but at least the story/UI loads.
thanks for letting me know! i'll put a note up in the description for now until i can get around to fixing it :)
just started planning out my first twine project and this was quite helpful! Thank you so much
Thank you so much, adore this template!
I love your template but I can't figure out how to add another border around the text. Help.
Thank you for releasing this beautiful template! Just a quick question: how can I change the toggle icon for the menu? I cannot find it for the life of me 🤦♀️
hello! i wrote up a small tutorial on tumblr for customizing the template - instructions on changing the toggle icon should also be there, so hopefully that helps !
Thank you for creating such an excellent template! 💗
This is so funny, I play Wayfarer so often, and was wondering how you developed such a beautiful UI! So ironic that I find one of my favourite interactive fiction creators on the page of a UI template I had chosen to use for my very own Twine project!