Howdy, Stranger!

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

Multi-pane Layout, like this one i list inside, but built with Harlowe, please?

edited October 2015 in Help! with 2.0
Hello, everyone!
So, i have already gave up about three projects on Twine before this one and went absent for a while, when this idea of a kind of very simple life simulator seemed really simple to make and potentially fun. Surprisingly, my experience from the previously projects made the whole concept work well for a while, but i had one single problem, which is illustrated on the annexed pic: because my "inventory" (which isn't really but idk how to call it - inventory of stats, maybe) system wasn't dynamic, and the contents were too many, it soon wouldn't fit into the screen, forcing the player to constant move the page down to look at his attributes, and then up again to make a decision.
While looking for a away to make a dynamic system, which would at least minimize the problem and make things look prettier, along with possible alternative solutions, i ran into this system, which seemed just perfect:

Only thing is, it's designed for Sugarcube and my whole project is being built in Harlowe. :c

I understand that the author of this system himself mentions emphasizing how difficult it was to built, so i don't necessarily ask for a port; even thou it would be so much amazing oh my god <3 <3
Any suggestion if very much wellcome. In fact, a simple solution that would require less adaptation could be even better.

This is my first post in which is like a surprisingly active and helpful community for such a unfortunately impopular program, and i hope it came out alright. Thank you all very much for the


  • Flawkes wrote: »
    Only thing is, it's designed for Sugarcube and my whole project is being built in Harlowe. :c
    Actually, it's for Sugarcane, not SugarCube (not the same story formats).
  • Oh, i see. My bad, thought they were the same.
  • A common way to create a custom sidebar in Harlowe is to first create a header tagged passage which will contain the sidebar's contents and then to use CSS to position the header passage on the page.

    1. Create a new Passage, name it something like Sidebar and assign a header tag to it. This will be the passage you place your side-bar related code into.

    2. Position the new Sidebar passage with CSS, at minimum you will need to give the side-bar a width and top, left or right position information.
    note: the following assumes you named your header passage Sidebar.
    tw-passage tw-include[title="Sidebar"] {
    	width: 7em;
    	position: absolute;
    	left: -7em;
    	top: 0;
    	padding: 0.5em;
    	text-overflow: clip;
    ... you may need a more experienced CSS coder to fix anything I miss.

    One issue with trying to working out how wide to make the side-bar and where exactly (top/left/right) to position it is that Harlowe uses percentages to determine how wide (60%) the area where the passage content is display is. This means that the space you are trying to place your side-bar into (left/right margin) changes width depending on how wide the end-user make their browser window.

    One way to get around this is to change Harlowe from using percentages to using fixed widths.
  • Awesome! So far this worked out perfectly! Thank you very much <3
Sign In or Register to comment.