How to move sidebar to top in SugarCube 2.21.0

Question

I am writing a story where I want the main focus to be solely on the text. Currently I have the default sidebar to the left, but it takes up too much space and is distracting in my opinion, so I would like to move it to the top and for it to be small so it takes up minimal space. I know next to nothing about writing code so does anyone know if there's any way that I could do this?

Answer 1

I can't help with moving the UI sidebar to the top, but have you considered minimizing it at the side where it is?

When editing with Twine2, open the menu at the left (select the upward pointing triangle), and select the entry "Edit Story Javascript". Insert the text below. The UI sidebar will be shown as a thin vertical bar along the left edge of the browser window where the story is run. Only the "expand" icon will be shown at the top of that bar. This is documented at https://www.motoslave.net/sugarcube/2/docs/#config-api-ui

// As a boolean; always start stowed
Config.ui.stowBarInitially = true;

Comments

Yes, I actually tried that option after posting this question. After thinking about it in depth, however, I felt that it wasn't a good solution to my issue. If readers want to save or go back in the story, since it will be novel length, they will still open it and most likely keep it open as they read. This is why I was hoping to keep the options visible and easily accessible without having to stow/unstow the sidebar.

Answer 2

If you are unhappy with the layout of the SugarCube 2's default User Interface then you can use the StoryInterface special passage to define your own custom one.

Answer 3

Hi my friend!

I thought for a long time how to do this thing, as you say, move the menu from left to right, and today I do it!

Thanks to the Firefox browser, the site with an explanation of HTML and CSS, the FireBug plugin for Firefox and people from this nice place.

Then use this code in your style sheet and change the values ​​if you want.

#passages {
    margin: 1px;
    max-width: 54em;
}
#ui-bar {
    background-color: #111;
    border-right: none;
    text-align: center;
    height: auto;
    left: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    transition: left 0.2s ease-in 0s;
    width: 100%;
    z-index: 50;
}
#ui-bar-body {
    height: calc(100% - 2.5em);
    margin: 0 0;
    padding: 0 0.5em;
}

#ui-bar-body > *:not(:first-child) {
    margin-top: -2em;
}

#ui-bar-toggle::before {
    content: "";
}
#ui-bar.stowed #ui-bar-toggle::before {
    content: "";
}
#ui-bar-toggle {
    border: none;
    display: block;
    padding: 0.3em 0.45em 0.25em;
    position: absolute;
    right: 0;
    top: 0;
}
#ui-bar.stowed {
    top: -4.5em;
  	left: 0
}
#ui-bar.stowed ~ #story {
    margin-left: 20em;
    margin-top: 0em;
}
#story {
    margin-left: 20em;
  	margin-top: 5em;
}

#ui-bar.stowed {
    left: 0;
    top: -4.5em;
}
#ui-bar.stowed #ui-bar-toggle {
    padding: 3.3em 0.35em 0.25em 0.55em;
}

#ui-bar-history {
  margin-left: 0 auto;
  margin-left: 90%;
}

#menu ul {
    border: medium none;
    list-style: outside none none;
    margin: -2em 0 0;
    padding: 0;
  	display: inline-flex;
}
#menu li:not(:first-child) {
    border-top: none;
}

I hope this is what you wanted and I helped)