UI Sidebar

Authoring Twine
1

Twine Version: Harlowe 3.2.2

Hey! So I’m pretty new to Twine, and I’ve been trying to get rid of the little sidebar that pops up on the bottom right. I’ve tried the code

“#ui-bar {
display:none
}”

and it’s worked temporarily, but for some reason, it always stops working after the first or second time I run the game. Does anyone know why this is happening or how I can fix it?

2

The CSS you included is for the SugarCube story format, which uses a different default HTML structure that Harlowe to display the contents of the story.

If you use your web-browser’s Web Developer Tools to inspect the HTML elements generated to display the following Passage content…

The content of the passage being shown.

…you will see that the custom HTML structure used by Harlowe v3.2.2 to show the story looks something like the following…

<tw-story tags="">
	<tw-passage tags="">
		<tw-sidebar>
			<tw-icon tabindex="0" alt="Undo" title="Undo" style="visibility: hidden;">↶</tw-icon>
			<tw-icon tabindex="0" alt="Redo" title="Redo" style="visibility: hidden;">↷</tw-icon>
		</tw-sidebar>
		The content of the passage being shown.
	</tw-passage>
</tw-story>

…and that Harlowe uses a custom <tw-sidebar> element to display the contents of its Left Sidebar.

If you want to supress the entire default sidebar then you need to add CSS like the following to your project’s Story Stylesheet area…

tw-sidebar {
	display: none;
}

However if you intend to add your own custom content to the sidebar area using the ?Sidebar named hook then you should use the following CSS instead…

tw-icon[title="Undo"], tw-icon[title="Redo"] {
	display: none;	
}
3

It worked! Thanks!

4

Hey,
I am using Twine 2.3.14 with Harlowe 3.2.2 and would like to get completely rid of the sidebar.
It uses too much space on the left side of the screen and I do not need it for my game.
This two codes work - but wont give me the space on the left side:

tw-sidebar{
visibility: hidden
}

tw-icon[title=“Undo”], tw-icon[title=“Redo”] {
display: none;
}

How can I completely remove/delete it, so I can use the complete screen?

Thanks for any help…
Jan

5

I am unaware of the specific code, but from seeing people ask this before I think the body text window is coded (via CSS?) to only take up the right 75% or so of the screen to make room for the UI column. The code you have hides what’s in the UI bar but doesn’t reclaim that space. Might want to check if there’s a thing you can do that resets the main body window to full width. Sorry I don’t know the exact code.

6

In earlier versions there was a chance to use this left space. There are tutorials on YouTube. But THIS version does not react to the codes I found…

If there is any idea how to use the full screen, I would be very happy.

7

As I mentioned previously, you use your web-browser’s Web Developer tools to inspect the HTML elements (and the CSS being used to style those elements) that are used to display the contents of a Passage. I even included an example of the core elements that make up the Story, Sidebar, and Passage areas.

If you select the parent <tw-story> element within your inspector you will see that the following CSS is being applied to it…

@media (min-width: 576px) {
	tw-story {
		padding: 5% 20%;
	}
}

…which looks something like the following when you expand the padding property so show its individual components…

@media (min-width: 576px) {
	tw-story {
		padding-top: 5%;
		padding-right: 20%;
		padding-bottom: 5%;
		padding-left: 20%;
	}
}

The blank areas that ‘appear’ on all four sides of the main Story area are a result of the four padding property settings. You can reduce the size of the left & right blank areas by reducing the 20% value, and the CSS rule to do that would looks something like…

@media (min-width: 576px) {
	tw-story {
		padding: 5% 5%;
	}
}
1 Like
8

Thanks! I’ll try with that…

9

IT WORKS! GREAT!!
Thanks… great help!