Howdy, Stranger!

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

Black Column on Lefft in Sugarcube (Twine 2.0)

Hi all,
Pretty new to twine, but getting better every day.  I don't have much programming knowledge, so please "dumb" down your response for me.  I was wondering if there was a way to remove the long black column on the left of the screen that appears in Twine 2 Sugarcube.
I need more space for a project I'm working on.  Hopefully this is possible.  I searched the forums, but wasn't sure what to search for. Please let me know if anyone has any tips on this for me.  Thanks!
-Trevor

Comments

  • Put this in your story css section:

    #ui-bar, #ui-body {
    background: hidden;
    background-attachment: fixed;
    background-color: transparent;
    border-color: transparent;
    }
    Not sure if you need the "background-attachment" part. It was just in my css and I can't remember exactly if it's needed or is just something I put in to test.
  • Great!  Thank you, this was very helpful.  Is there a way to shrink the width of that column?  Or get rid of the menu and title and restart completely?

    Thanks again!
  • You need to set the display property to none for the relevant areas that contain text:

    #story-title {
    display: none;
    }

    #credits, #version {
    display: none;
    }

    #ui-bar, #ui-body {
    display: none;
    }

    Another way to do it would be to set the text in those areas to transparent, as so:

    color: transparent;
    That's kinda weird, but would select the text only.


    To reduce width, you'd do something like:

    #ui-bar, #ui-body {
    width: 200px;
    }
    Version 2.0 of SugarCube is also slated to include a collapsible sidebar.

  • This is great info for me to keep!  I tried it out and it does exactly what it says. 
    However, I was hoping it would move the rest of my content over once I shrunk the width.  I wanted my content to fill more of the screen is all.  One of my users has bad eyes, and has his resolution set way up... and this is causing issues with the design of the page because he has to scroll over.  I was hoping there was a way to scoot it all over by getting rid of the UI menu.  Perhaps Sugarcube 2 will help.
  • Positioning of elements is covered in structural.css. https://bitbucket.org/tmedwards/sugarcube/raw/default/src/structural.css

    You can try throwing some of those elements into the user css and see what happens. For example, try changing the huge 21em margin in body.

    To be specific, write this in your user css:

    body {
    margin: 3.5em 3.5em 3.5em 3.5em;
    }
  • You can completely hide the Side-Bar by placing the following three CSS rules in your Story Stylesheet:

    body {
    margin-left: 3.5em;
    }
    #ui-bar {
    display: none;
    }
    #passages {
    margin-right: 0px;
    }
    Note: The SugarCube 2.0 demo includes an improved Side-Bar that collapses / minimizes into the left edge of the screen, thus also saving screen space.
Sign In or Register to comment.