Howdy, Stranger!

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

How do I add buttons to the sidebar in Harlowe and Twine 2?

I would like to add a few buttons to the sidebar (and maybe entirely move it to the bottom of the screen); one for going back to the main menu, one for achievements, going to the map, acknowledgements, etc. I can't find anything about doing it in Harlowe; all I've found is Sugarcube. I'm really new to programming and know hardly anything; I'm learning as I go.

Comments

  • I don't know about a sidebar, but you can definitely do a footer. Basically, you just create a separate passage with code for links to each of the pages you want, and then give that passage the tag "footer." Then, when you're playing the game, all of the code in the passage tagged "footer" will be rendered in the bottom of every screen. Also, if you want a line separating that the footer from the rest of your story, just throw a "<hr>" at the top of the footer passage.
  • You can edit the stylesheet of your passage so that a sidebar is included. Below is the code for the box itself.
    #box
    {
    float: right;
    width: 300px;
    padding: 10px;
    border: solid;
    border-width: 5px;
    border-radius: 10px;
    }
    
    To insert content into that box, use this inside your footer. This lets the sidebar be rendered in every passage.
    <span id="box"> (insert content here) </span>
    
  • The left side-bar in Harlowe is a visual illusion created by the following process:

    1. The area the story's contents is displayed in is given a width of 60% of the web-browser's horizontal dimension. That area is then cantered horizontal using automatically calculated left and right margins, which results in the blank areas to the left and right.

    2. The Undo and Redo links are contained within a special header like element that is added to the top of the current Passage's content, this element is then re-positioned to appear within left blank area to make it look like it is a side-bar. **

    You can do the same with either a header or footer tagged passage and some CSS.

    ** The special header like element is destroyed and re-created each time passage traversal occurs which is why it is not a good idea to inject your own content into it, unless you are willing to do that injection for every passage traversal.
Sign In or Register to comment.