Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Creating margins with sugarcube 2


So I'm new at this and I think I've only just decided to go with Twine 1 and Sugarcube 2 (although I'm still not confident that's the right choice).

What I want to be able to do is create a second UI on the right, that I can use to display character stats and images.

I did find this...

...but it's for T2 and I'm not sure it will work on T1. Worse, I'm not entirely sure how to use that info bar opening the link at the bottom, pressing f12 to bring up the code and copying each bit into a stylesheet under 'body'.

If anybody can help I'd be v appreciative!


  • The good thing about the SugarCube story format (both 1.x and 2.x) is that it works almost exactly the same no matter which release of Twine you are using.

    note: The Special Names page of the relevant SugarCube documentation includes information about the main exceptions which is a couple of Special Passages and Tags that are not needed/used in Twine 2.

    In Twine 1 you place CSS in a stylesheet tagged passage (the Story > New > Stylesheet menu) and Javascript goes in a script tagged passage (the Story > New > Script menu)

    In Twine 2 you place CSS in the Story Stylesheet area and Javascript goes in the Story Javascript area, both accessed via the menu in the bottom left corner.
  • Hey Greyelf, thanks for your swift response.

    I wanted to respond asap but thought I’d work on getting something worth replying with first and I’m still not sure how to answer whether or not your answer has answered my question so I’ve not clicked that yet either.

    Sorry to tell you, I’m not sure I’m winning.

    I think I got the Javascript bit down at least thanks to Twine automatically removing everything else for me.
    I still seem to have a heap of stuff in there that shouldn’t be - I’m not entirely sure what though.

    Maybe I should tell you what I did and you might tell me where I went wrong (I’m not sure I’ve done anything right so far).

    OK, so I opened up Tryguys demo, pressed f12, clicked the ‘DOM Explorer’ tab then tried various ways of copying the code (while frustrated that I was probably making hours of work from something that I imagine could be done in minutes and simultaneously feeling guilty that I was cheating by ripping a heap of code without understanding it first). I typed or pasted the code either onto a notepad or straight into a twine stylesheet under ‘body’ and into a passage tagged ‘script’ (the brown one right?).

    So now I have an empty passage titled ‘<>]?img\[[^\’ and one titled ‘RightUiBar’.

    My stylesheet currently has EVERYTHING in it. I think I right clicked the ‘<body abp=”0”> element and selected ‘copy element with styles’, then pasted that into my stylesheet under ‘body’.

    ...are you facepalming yet or have you moved straight on to laughing hysterically?

    My styles passage got the same heap of code and twine edited it for me.

    Please tell me how to copy/paste code selectively as the usual shift/ctrl methods don't seem to work.

    Also just to clarify; everything in the <head> of the doc needs to go in the passage tagged ‘script’ and everything in <body> goes in the stylesheet under <body>?

    I ought to stop talking now.

    Sorry and thanks!
  • The easiest way to look at the code written for a Twine 2 project is:

    a. Download the Story / Archive HTML file.

    b. Open the hosted release of Twine 2 via the Use it online link found in the top right corner of the Twine 2 website.

    c. Use the Import From File option to import the downloaded HTML file.

    d. Click on the imported Story to open the Story Editor.
    You can now see the Passage Map and the contents of all the passages. Clicking on the story's name in the lower left corner will open a menu which contains menu items for viewing the story's Javascript and Stylesheet (CSS) areas.
Sign In or Register to comment.