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

Authoring Twine
#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?

1 Like
#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!

#6

Why does it not work for me?
I’m using the newest version of harlowe, the 3.2.1.
I have no problems hiding the whole of the sidebar but it does not let me hide just the undo and redo buttons :frowning:

#7

I just tried it and it worked for me…are you trying the tw-sidebar tw-icon version from this thread? The tw-sidebar .undo version from the other thread won’t work any more, I don’t think.

1 Like
#8

@Ringil
Just in case I retested the CSS example in my previous comment within a new Harlowe v3.2.1 project and it successfully suppressed rendering of the Undo and Redo links.
eg. the following CSS, which I placed within the project’s Story Stylesheet area.

tw-sidebar tw-icon {
	display: none;
}

@JoshGrams
You are correct that any variation that includes a .undo (or .redo) CSS class in the selector won’t work, because the <tw-icon> elements involves don’t have assigned CSS classes.

1 Like
#9

Exactly! Well, I managed to solve the problem with a bit of creativity:
I created a footer in which I used a (replace:?Sidebar)[my content], and it did the trick :slight_smile:
Thank you for the prompt answer though! :smiley:

#10

The Twine Cookbook’s “Left Sidebar”: Harlowe (only v2.1.0 or later) recipe uses a similar technique.