How to remove the UI bar (sidebar) margin in Sugarcube?

Hawkmoth

I managed to remove the sidebar using two methods which were supposed to also eliminate the left margin, but the margin is still there.

Please help! This is driving me crazy.


I'm using Twine 2, Sugarcube.

These are the methods I tried:

CSS:

#ui-bar {
display: none;
}
#story {
margin-left:3.5em;
}

JavaScript:
$('#ui-bar').remove();
$(document.head).find('#style-ui-bar').remove();


ALTERNATIVELY, if this is impossible, can I have all the text in some sort of centered invisible text box? For example like in The Uncle Who Works at Nintendo, so that the text is in the center of the screen but justified to the left.


Thank you very much for your help.

TheMadExile

The methods you are attempting use are for SugarCube v2—this likely should have been clear from the context wherever you found them. We can probably assume that you are, unfortunately, using SugarCube v1.


SugarCube v1

The situation is significantly more complicated in v1 as it was never designed to have the UI bar removed—the CSS is interleaved in complicated ways. Still, it should be doable, if not pretty.

Add something like the following to your Story Stylesheet:

body {
	margin: 3.5em;
}
#ui-bar {
	display: none;
}
#passages {
	margin: 0;
}
@media screen and (max-width: 1440px) {
	#passages { margin: 0; }
}
@media screen and (max-width: 1136px) {
	body { margin: 3.5%; }
	#passages { margin: 0; }
}
@media screen and (max-width: 800px) {
	body { margin: 3.5%; }
	#passages { margin: 0; }
}

I believe that's probably what you want or close to it.



SugarCube v2

The JavaScript is all that is necessary. The CSS you've listed should not be used as it will still leave some of the media queries from the UI bar's CSS—not to mention that it only hides the UI bar. The given JavaScript will remove the UI bar and its CSS completely.

$('#ui-bar').remove();
$(document.head).find('#style-ui-bar').remove();

Hawkmoth

TheMadExile wrote: »

The methods you are attempting use are for SugarCube v2—this likely should have been clear from the context wherever you found them. We can probably assume that you are, unfortunately, using SugarCube v1.

Thank you very much for your answer.

Yes, it turns out that I was using Sugarcube 1 (I'm new to Twine, and didn't realize at the time of posting that Twine 2 doesn't necessarily mean Sugarcube 2).

I'm now using Sugarcube 2 and the JavaScript method worked splendidly.