How To Get Rid Of Back Button In Twine (Without Losing Sidebar)

#1

I am using Harlowe 3.0.2/Twine 2.3.1 browser. I want to add a sidebar and so followed the Twine Cookbook to add the text I wanted. However, I want to get rid of the “Back Arrow” to stop players from choosing a different choice. I checked the Twine Q&A but every answer I looked at says use;

tw-sidebar {
visibility: hidden
}

This just makes the entire sidebar hidden and I don’t get the sidebar text. Is there a way to get rid of the back arrow without also losing the sidebar text?

Thanks in advance.

#2

Does this work?

#3

My solution was SugarCube-specific, but I kludged my way into an answer by selecting “edit story JavaScript” and setting the config history controls with this line of code:

config.history.controls = false;

[Edited after Greyelf noted that this will not work in Harlowe]

1 Like
#4

@BitterlyIndifferent
Your solution is SugarCube specific, it won’t work for Harlowe,

@TomAClem
If you use your web-browser’s Web Development Tools to Inspect the HTML element structure of a Harlowe based project (with startup, header & footer tagged Passages) you will see that the elements that make up the main ‘story’ area look something like.

<tw-story tags="">
	<tw-passage tags="">
		<tw-sidebar>
			<tw-icon tabindex="0" class="undo" title="Undo" style="visibility: hidden;">↶</tw-icon>
			<tw-icon tabindex="0" class="redo" title="Redo" style="visibility: hidden;">↷</tw-icon>
		</tw-sidebar>
		<tw-include type="startup" title="Startup" data-raw=""></tw-include>
		<tw-include type="header" title="Passage Header" data-raw=""></tw-include>
		...The content of the Passage...
		<tw-include type="footer" title="Passage Footer" data-raw=""></tw-include>
	</tw-passage>
</tw-story>

As you can see the ‘sidebar’ section of the passage area consists of a parent <tw-sidebar> element that contains two child <tw-icon> elements. So as shown by @Pace if you want to only hide the child elements and not the parent element then you will need to use CSS like the following within your project’s Story Stylesheet area.

tw-sidebar tw-icon {
	display: none;
}
1 Like
#5

Thank you for all your advice.

I went into my development tools (thank you @Greyelf for walking me through the process). Luckily the code was still listed as tw-icon so was not hard to find.

This works perfectly. Many thanks once again to all posters!