From what i can see in SugarCube source code is that side bar belongs to #ui-bar and i wanted to move it to right part(including line too)

But what I thought would look much better is to have the whole sidebar disappear whilst the map is opened, which I tried doing like so: body.Map {<br />#ui-bar {<br />display: none;<br

Thanks for the quick reply. So what I've done is made a hand drawn map, and saved it as an image and imported it in Twine. What my plan is, is to have a link to a passage called "Map". The u

#ui-bar

Assuming that you're referring to the link colors in the UI bar menu, then something like this should change the color of the nav links (of which those two are a part): <br />#ui-bar nav a { col

I'm using sugarcube, and I've narrowed down the sections I have to edit to the #ui-bar #credits and the #ui-bar #version methods.  Is there a method that I don't know about, or should I be using displ

The #sidebar and #title elements are named (id) #ui-bar and #story-title respectively.

the a:hover and a:active colors */<br />#ui-bar #title { color: #35C0CD; }<br />#ui-bar #title:hover { color: #35C0CD; }<br />#ui-bar #story-title { font-size: 30px; }<br />#u

* The #sidebar and #title elements are named (id) #ui-bar and #story-title respectively.

For the font, you'd do something like this: <br />/* To affect the whole page (incl. the #ui-bar). */<br />body { font-family: &quot;FONT_NAME_HERE&quot;; }<br />/* To affec

SugarCube's border there actually comes in two pieces, one on the right-hand side of #ui-bar and the other on the left-hand side of #passages.  Normally, this provides a better look than having it onl

2. Put this in a stylesheet tagged passage: <br />#sidebar, #ui-bar<br />{<br />top: 240px;<br />}<br />#minimap<br />{<br />position:fixed;<br />left:

The same is true of SugarCube's UI bar (#ui-bar).  Though in SugarCube, I'd likely suggest using PassageReady/PassageDone for such things (or the prerender/postrender task objects).

and the sidebar CSS selector is different (#ui-bar in SugarCube, #sidebar in Sugarcane). Those are really the only differences, but the ability to save from SugarCube is a big deal. The conversion ba

Try changing your code to this: <br />$(&quot;#passages&quot;).on(&quot;mouseenter&quot;, &quot;.header&quot;, function() {<br />$(&quot;#ui-bar&quot;).show

/>$(&quot;#ui-bar&quot;).show();<br />});<br />});<br />$(document).ready(function(){<br />$(&quot;#ui-bar&quot;).mouseleave(function(){<br />$(&q

I'd add in the sidebar-hiding code for Sugarcube: #ui-bar<br />{<br />display: none;<br />}

And the sidebar issue was actually a problem completely on my end due to some faulty CSS I used on #ui-bar, so yep, set to go.

This should get rid of all of it: #ui-bar<br />{<br />display: none;<br />}

The #sidebar selector will need to be changed to #ui-bar.