Sidebar Menu in Harlowe

Dskreet

Would someone please be willing to provide sample code for creating permanent links in the margin to a story page and a back button which returns the user to where they were using the Harlowe format?

I realize this is super easy in SugarCube but I have minimal programming experience so I started with the youtube tutorials by VegetarianZombie which are with Harlowe. I'm not sure if I'm bad at googling or just don't understand the answers, but this wasn't covered and I can't figure it out.

Thanks!

Sage

I'm sorry. I don't understand your question. Harlowe does have a back button.

Can you be more specific please?

Or (alternatively) someone smarter than me will be along shortly. There's like A BUNCH of those people here.

Neoroman

Pretty much everything asked here can be done with a little bit of CSS: the back button, sidebar stuff and all.

I recommend you check out this nifty little tutorial: http://furkleindustries.com/fictions/twine/twine2_CSS_tutorial/ Anything related to margin menus would be tw-sidebar.

Sage

See? Someone Smarter: @Neoroman

I swear to god they just appear like magic around here.

Neoroman

Sage wrote: »

See? Someone Smarter: @Neoroman

I swear to god they just appear like magic around here.

Only because I recently discovered it as well, but if you want to go with "smarter", I can't argue

Dskreet

I just went though that tutorial you posted Neoroman,

It's still not clear to me how to get links into the sidebar.

I've tried things like:

tw-sidebar{
(link:"status")[(goto:"Status")]
(link:"Inventory"[(goto:"Inventory)]
}

I did this with the assumption that the sidebar would work similar to how links are made in the story but I think this was a bad assumption because doing this doesn't seem to add anything to the sidebar.

I removed the undo and redo buttons in the sidebar by following the tutorial that VegetarianZombie posted. he gives these two lines of code where he pulls out the .undo and .redo class and sets them to display:none; and this removes those buttons.

However, this hasn't helped me add links in the sidebar.

Dskreet

Just to clarify, I don't want the default undo and redo buttons because I don't want the user to go back and forth at any arbitrary point in the story. I want them to be able to click permanent links in the sidebar and go to a different page and then return to where they were.

Sharpe

@Dskreet, I'm afraid I don't know the answer to your question and I'm dubious about the possibilities.

Sorry. :-(

greyelf

Currently any solution to this problem would need to overcome a couple of issues:

1. The tw-sidebar (as well as the tw-passage and tw-story) element gets recreated each time a Reader moves from one passage to another, so any extra HTML added to that area by the Author would need to be re-added each time a passage is displayed.

2. There is no documented API for changing which passage is being shown using Javascript, so any hack we come up with may stop working next time a new version of Harlowe is released.

The developer of Harlowe may have a better answer.

Dskreet

Thanks for both your responses then Sharpe and Greyelf,

Despite not being a solution I at least understand the issue.

Can I ask for a workaround then? For example, based on what your telling me I may not be able to do a sidebar in Harlowe like in SugarCube by using the stylesheets, but I still should be able to split all my story pages into two columns using stylesheets and simply add the links to the first column in every passage, right?

I'll do the research myself and see if I can figure this out, unless someone wants to be nice and just give me some sample code here.

Sharpe

Dskreet wrote: »

Can I ask for a workaround then? For example, based on what your telling me I may not be able to do a sidebar in Harlowe like in SugarCube by using the stylesheets, but I still should be able to split all my story pages into two columns using stylesheets and simply add the links to the first column in every passage, right?

Now, that's something with which I can help, and CSS is the answer.

Let me give you the relevant part of my RPG's stylesheet. I'm not going to put it in code tags because they sometimes mess up CSS.

First, to make sure we're on the same page, I'll link you to my beginner's CSS guide for Twine 1: CSS is Your Friend: The Basics of Changing Twine's Default Appearance For Newbs

The selectors are different for Harlowe, but if you understand all that in my guide, you'll understand what you're looking at in a Harlowe stylesheet.

Here it is:


*
{
margin: 0;
padding: 0;
white-space: normal;
}

tw-story
{
width: 1024px;
padding: 0px;
margin-top: 0px;
}

tw-passage
{
width: 1024px;
margin: 25px;
padding: 25px;
}


#box
{
float: right;
width: 300px;
padding: 10px;
border: solid;
border-width: 5px;
border-radius: 10px;
}

#content
{
float: left;
width: 640px;
}

Copy that into a new game.

Then, copy this into the first passage and test/run the game:

<span id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut arcu leo. Phasellus nibh arcu, placerat non ipsum id, mollis efficitur purus. Morbi est orci, sagittis id accumsan in, vulputate at urna. Sed commodo sollicitudin neque, vestibulum blandit nulla pharetra vitae. Aenean at lectus dictum diam suscipit imperdiet eget eget elit. Etiam tempus sem ut efficitur aliquam. Fusce sed rhoncus nulla, eget pretium lacus. Integer in mattis orci, eu dapibus felis.

Proin efficitur lorem pharetra rutrum vulputate. Integer consectetur vel neque placerat posuere. Aliquam erat volutpat. Nunc laoreet urna eu erat mollis, sit amet malesuada sapien convallis. Donec sit amet massa laoreet, pellentesque risus in, suscipit tellus. Ut varius lacinia metus, at finibus magna dictum vel. Proin semper, risus non sodales ullamcorper, massa nisl bibendum nibh, id tristique lorem ante non tellus. Etiam et purus sit amet nisi placerat vehicula in eget urna.</span>
<span id="box">Donec sit amet massa laoreet, pellentesque risus in, suscipit tellus. Ut varius lacinia metus, at finibus magna dictum vel. Proin semper, risus non sodales ullamcorper, massa nisl bibendum nibh, id tristique lorem ante non tellus. </span>

I put bold for the HTML tags to make them more legible.

You'll notice there is a box in the upper right corner. Its position is controlled by CSS (notice the "float" element in the SS). To change it's position, you mess with the CSS in the stylesheet. In my guide, I link to several places to learn more about CSS for such a task.

If you don't want the border or want the widths of the divisions to change, that's changed with CSS in the SS. Again, reading my guide, looking at the links, and messing with the SS above, I'll bet you can figure it out. :-)

And, yeah, it's a pain, but I have to put those span HTML tags in every passage where I want a box in the corner.

Note that Harlowe's transitions and spans don't play nicely (there's no fade for stuff between "<span>" tags). No idea why, and it's no different in the 1.1 beta. It might be on the list of things to change for Harlowe 2. Or, it might be behavior as intended. Dunno. Leon's got his hands full so I'm not going to ask. ;-)

If, after reading my guide, checking out the links, and messing with the SS you stumble into some questions, by all means ask. :-)

SugarCube really is the way if you don't want mess with all this CSS stuff. SugarCube is of course far more mature; it's been around since Twine 1.

Dskreet

Thanks Sharpe! it worked.

Deadshot

Dskreet wrote: »

Thanks Sharpe! it worked.

How did you do it?

greyelf

Read this comment by Sharpe in this thread.

Deadshot

Sharpe wrote: »

Dskreet wrote: »

Can I ask for a workaround then? For example, based on what your telling me I may not be able to do a sidebar in Harlowe like in SugarCube by using the stylesheets, but I still should be able to split all my story pages into two columns using stylesheets and simply add the links to the first column in every passage, right?

Now, that's something with which I can help, and CSS is the answer.

Let me give you the relevant part of my RPG's stylesheet. I'm not going to put it in code tags because they sometimes mess up CSS.

First, to make sure we're on the same page, I'll link you to my beginner's CSS guide for Twine 1: CSS is Your Friend: The Basics of Changing Twine's Default Appearance For Newbs

The selectors are different for Harlowe, but if you understand all that in my guide, you'll understand what you're looking at in a Harlowe stylesheet.

Here it is:


*
{
margin: 0;
padding: 0;
white-space: normal;
}

tw-story
{
width: 1024px;
padding: 0px;
margin-top: 0px;
}

tw-passage
{
width: 1024px;
margin: 25px;
padding: 25px;
}


#box
{
float: right;
width: 300px;
padding: 10px;
border: solid;
border-width: 5px;
border-radius: 10px;
}

#content
{
float: left;
width: 640px;
}

Copy that into a new game.

Then, copy this into the first passage and test/run the game:

<span id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut arcu leo. Phasellus nibh arcu, placerat non ipsum id, mollis efficitur purus. Morbi est orci, sagittis id accumsan in, vulputate at urna. Sed commodo sollicitudin neque, vestibulum blandit nulla pharetra vitae. Aenean at lectus dictum diam suscipit imperdiet eget eget elit. Etiam tempus sem ut efficitur aliquam. Fusce sed rhoncus nulla, eget pretium lacus. Integer in mattis orci, eu dapibus felis.

Proin efficitur lorem pharetra rutrum vulputate. Integer consectetur vel neque placerat posuere. Aliquam erat volutpat. Nunc laoreet urna eu erat mollis, sit amet malesuada sapien convallis. Donec sit amet massa laoreet, pellentesque risus in, suscipit tellus. Ut varius lacinia metus, at finibus magna dictum vel. Proin semper, risus non sodales ullamcorper, massa nisl bibendum nibh, id tristique lorem ante non tellus. Etiam et purus sit amet nisi placerat vehicula in eget urna.</span>
<span id="box">Donec sit amet massa laoreet, pellentesque risus in, suscipit tellus. Ut varius lacinia metus, at finibus magna dictum vel. Proin semper, risus non sodales ullamcorper, massa nisl bibendum nibh, id tristique lorem ante non tellus. </span>

I put bold for the HTML tags to make them more legible.

You'll notice there is a box in the upper right corner. Its position is controlled by CSS (notice the "float" element in the SS). To change it's position, you mess with the CSS in the stylesheet. In my guide, I link to several places to learn more about CSS for such a task.

If you don't want the border or want the widths of the divisions to change, that's changed with CSS in the SS. Again, reading my guide, looking at the links, and messing with the SS above, I'll bet you can figure it out. :-)

And, yeah, it's a pain, but I have to put those span HTML tags in every passage where I want a box in the corner.

Note that Harlowe's transitions and spans don't play nicely (there's no fade for stuff between "<span>" tags). No idea why, and it's no different in the 1.1 beta. It might be on the list of things to change for Harlowe 2. Or, it might be behavior as intended. Dunno. Leon's got his hands full so I'm not going to ask. ;-)

If, after reading my guide, checking out the links, and messing with the SS you stumble into some questions, by all means ask. :-)

SugarCube really is the way if you don't want mess with all this CSS stuff. SugarCube is of course far more mature; it's been around since Twine 1.

Sorry, I really didn't understand anything in that explanation, or in the beginner's guide. Could you explain how to split it into two columns, but a little simpler, please?

Deadshot

It works. Not that I understand anything, but it works, so thank you.