›

Howdy, Stranger!

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

Sign In Register

Categories

Creating a Menu Sidebar or Header in Harlowe

DairynGMDairynGM
in Help! with 2.0
So i haven't had a lot of luck with previous threads asking for advice, but what the heck. I'll ask again and hope someone answers. :)

Spent the last five or so hours trying to get a menu sidebar or footer to work for an RPG I'm making. I want to put a link to see the player's stats in it, the save and load button, usual stuff. I know it exists in other Twine games, but I can't seem to get it to work in Harlowe.

Tried Sharpe's solution and while this provided a nifty sidebar, it wasn't at all mobile friendly. So far I'm facing the choice of having no sidebar and mobile-friendly text, or something only optimized for PC players. I know how to create a header and footer, but these aren't visually appealing as they're relative to the length of the story text. Ideally, I'd want something that's it's own box and stays static on the user's screen, regardless of scrolling.

Is this possible with Harlowe? I really don't want to have to switch story formats to something like Sugarcube to achieve this. I've done a fair bit already and I find Harlowe's way of doing macros far more friendly.

Comments

  • mcdmcd
    It sounds like your issues with Sharpe's sidebar can be fixed with CSS. You'll need to provide some details about what's not mobile friendly about it now and what you want it to look like on mobile in order to get a more specific answer. Posting your current sidebar code and css would probably help, too.
  • DairynGMDairynGM
    My apologies. Here's the CSS stylesheet info.
    {
    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;
    }

    Snippets of the non-wrapping problem are attached.
  • DairynGMDairynGM
    Hmm. This tends to give a more static result.
    #box
    {
    float: right;
    width: 30%;
    padding: 10px;
    border: solid;
    border-width: 5px;
    border-radius: 10px;
    }

    #content
    {
    float: left;
    width: 60%;
    }

    God, I hate being a code newb. :persevere:
  • mcdmcd
    The wrapping is due to the fixed widths on tw-story, tw-passage, and, in the first CSS, #content. You can fix that by changing the two occurrences of
    width: 1024px;

    to
    width: 100%;
max-width: 1024px;

    Your 30%/60% solution for the column widths will then work.

    I noticed that Sharpe's "solution" involves rewriting every passage to make two columns; you probably want something more efficient than that. There are some previous discussions of adding a sidebar to Harlowe you might want to look at; this one has a few more links in it: twinery.org/forum/discussion/6215/right-oriented-sidebar-in-harlowe-with-replaceable-picture

    Note: I find it easier to search the forums with Google rather than the search box.
Sign In or Register to comment.