Howdy, Stranger!

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

[sugarcube 2] Can anyone explain to me how to do margins properly?

So, right now, I figured out how to stop text from overflowing the margin. So, right now, the edge of the sidebar acts as the end of story area.


That's of me just opening and closing the sidebar.

But, when I resize the browser, the text is pulled away. How do I anchor it to stay at the edge?

This is probably basic css stuff, but I must be missing something. As you can see, I'm attempting to integrate another sidebar, but I also reduced the width of the left sidebar too. Hence my fiddling with margins and things.

These are the css elements I've been playing with:

#story {
margin-left: 13em;
#ui-bar.stowed ~ #story {
margin-left: 2em;
#passages {
max-width: 40em;
margin: 0 auto;
#ui-bar {
width: 12em;
padding: 0.5em;
text-align: center;
#ui-bar.stowed {
left: -11em;
#ui-bar-body {
padding: 0;


  • Actually, somewhat related, I want to have a page-like element in the middle. Like this:

    But, I'd like the "page" to move dynamically as well. But, currently it doesn't.

    I tried to use this:

    #content {
    position: absolute;
    top: 0;
    left: 11.8em;
    right: 11.20em;
    padding: 1em;
    margin: 0.25em;
    border: solid;
    font-size: 18px;
    border-radius: 1px;
    background-color: white;
    border-style: none;
    font-family: electra;
    color: black;
    #ui-bar.stowed ~ #content {
    left: 2em;

    But, it doesn't work. So, there's probably a custom function behind it or something. Anyone have an idea of how I could do this?

    the "Text story text story" stuff is just wrapped in this: <span id="content">text</span> in the current passage.

    So, ideas?
  • SugarCube 2 includes CSS @media rules which change some of the layout CSS based on the current width of the viewport, which you will also need to override.

    Can you supply a copy of the story project you used to create the images?
    Without knowing exactly how you created and positioned the right hand side bar it is difficult to provide a solution to positioning the rest of the passage contents correctly between the two side bars.

    In your latest comment you linked an image that had two different sets of text (one set white and one set grey) in the middle section between the two side bars. Are both sets of text meant to be there?
  • Yeah, OK. I've mostly solved my margin problems. But I still have some issues I need help with.

    So, right now, I get things to do this:

    (the text moves appropriately when I resize the browser window. And this is the same for the normal passage text and the "page" text I have.)

    But when I stow the ui-bar, the "page" text still doesn't shift over. But I am happy with the passage text.

    As shown here:

    So, the problems remaining are:
    (1) how to get this page thing moving.
    (2) how to put stowing-functionality onto the right sidebar I have.

    Or... the way I've done this, isn't that going to be possible?

    I actually stole the idea of doing it this way from another project. Is there a better way to go about this right-sidebar thing?

    Anyway, here's the project file:

  • Oh, and as for why there's overlap of white and black text... It was just for testing.

    I don't intend to have them appear together. I just wanted to ensure normal passage text flowed well with the new sidebar positions.

    My game will probably take the "page" way of presenting the story.
  • What you're doing is… not optimal. /sigh

    I'll work up an example of what you should be doing and post it here later today.
  • @tryguy. Attached is a Twine 2 archive of a project showing how, more or less, you should be doing what you're trying to do. Adding the ability to toggle the right-hand side bar added some complexity.

    Please. No one else use this project simply to add a right-hand side bar. It makes several unnecessary, and generally detrimental, modifications to the core styles. It is specific to the style tryguy is attempting to achieve and not a general means to add a right-hand side bar.
  • Wow, thanks a lot, Exile. That's more than I could have hoped for. It's pretty much perfect to what I wanted to start with. With this, I think I can start writing my game for real now. And, I probably wouldn't have come up with such an elegant solution.

    Thanks again!
  • And if anyone is curious for the code... maybe leave a message here and one of us will upload it again. I'm not sure TheMadExile really wants to have this out in the open for some reason.
  • tryguy wrote: »
    And if anyone is curious for the code... maybe leave a message here and one of us will upload it again. I'm not sure TheMadExile really wants to have this out in the open for some reason.
    There is a bug in the forum code which deletes the attachments of any comment you mark as Answer, and this is why TheMadExile's example was deleted.
    The work around is that after you accept a comment containing an attachment as an Answer you need to post another comment containing the deleted attachement so that others will also be able to see the solution.
  • Fair enough. Here's the attachment:

    ps, when you mentioned "bug" I first thought you had discovered a bug in the code. But, yeah, I haven't seen any bugs in it. In my opinion, it's very lovely code.
Sign In or Register to comment.