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

Comments

• tryguy

  October 2015

  Actually, somewhat related, I want to have a page-like element in the middle. Like this:
  
  http://imgur.com/a/crxOD
  
  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;
  opacity:0.5;
  }
  #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?
• greyelf

  October 2015

  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?
• tryguy

  October 2015

  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:
  http://imgur.com/Y3BWY5Y
  http://imgur.com/lbmNBCw
  
  (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:
  http://imgur.com/uapvVCA
  
  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:
  
  
  
  
• tryguy

  October 2015

  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.
• TheMadExile

  October 2015

  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.
• TheMadExile

  October 2015

  @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.
• tryguy

  October 2015

  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!
• tryguy

  October 2015

  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.
• greyelf

  October 2015

  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.

  @tryguy:
  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.
• tryguy

  October 2015

  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.