0 votes
by (190 points)

Newbie to Twine so please be paitent. I am trying to add a Sidebar to my Twine game (using Harlowe 3.0.2/Twine 2.3.1 browser). I have been looking for a code to add one but they all seem to be for Sugarcane and copy/pasting them into my CSS folder doesn't work.

I just want to add some text that stays there for the entire game. How do I do this?

1 Answer

0 votes
by (159k points)

Please use the Question Tags to state the name and full version number of the Story Format you are using, using them to do this makes it easy to determine this information.

The main issue with adding text to the Harlowe 'side-bar' area is that that area is destroyed & recreated each time a Passage Transition occurs. eg. each time the end-user selects a link that includes a Target Passage.

The Twine Cookbook includes two recipies for adding automatically refreshing section to the 'side-bar' area.

"Left Sidebar": Harlowe (both v1.x and v2.x series) (also new v3.x series)

"Left Sidebar": Harlowe (only v2.1.0 or later)

by (190 points)
Thank you for answering. What are the Question Tags?

I looked at the Harlowe v2.1.0 or later code but don't understand which bit to copy. I took everything from tw-sidebar onwards and put it in the Stylesheet but nothing came up. I knwo the footer has to go somehwere in the code but I don't understand where.

Thanks in advance.
by (159k points)

What are the Question Tags?

When you look at the "Ask a question" page you used to ask a Question you will see that there is a Tags section near the bottom of that page. If you start typing something like "harlo" (without quotes) in the text field a list of potential 'tags' will be displayed for you to select from.

but don't understand which bit to copy

The example contained within the recipies page is written using Twee Notation, which is described within the cookbook's Common Terms section.

The Using the Twine Cookbook section explains how to download and import the recipe's Live Example into your Twine 2.x application so that you can view the different parts that make up the solution.

For that specific recipe the contents of the TWEE Notation example would be broken down as follows:

1. The CSS contents of the UserStylesheet passage wout be placed within your project's Story Stylesheet area.

2. The TwineScript contents of the Start passage is just setting up some test data, if you wanted to use it then you would place it within the main passage of your project.

3. The TwineScript contents of the Sidebar passage is what will automatically be displayed within the 'side-bar' area, simply add a footer tagged special passage to your project and copy this passage's contents into it. You can name this new passage whatever you like, but the solution named it Sidebar so it's purpose was clear.

It is the (append: ?SideBar) macro call and the built-in ?SideBar named hook that is responsible for updating the contents of the 'side-bar'

by (190 points)
Thank you for your reply. It was very helpful and I have got the code working as I wanted. I was unsure which bits to copy from the cookbook so your breakdown has helped me immensely.