UI Sidebar

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?

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;	
}

It worked! Thanks!