Removing the undo buttons (the standard fix isn't working)

Authoring Twine
1

Twine Version: Harlowe 3.3.6

Quick little question… I want to get rid of the “undo” “redo” buttons however the usual fix of

tw-sidebar tw-icon.redo {
display: none;
}
tw-sidebar tw-icon.undo {
display: none;}

Is having no effect. I do use the sidebar for other things, here is my full code:

tw-sidebar tw-icon.redo {

display: none;

}
tw-sidebar tw-icon.undo {

display: none;

}


tw-icon {
	opacity: 0.5;
}

tw-icon:hover {
    opacity: 0.75;
}



@import url('https://fonts.googleapis.com/css?family=IM+Fell+DW+Pica+SC|IM+Fell+Double+Pica+SC');

tw-sidebar tw-include[title="Sidebar"] {
	width: 80%;
  	font-size: .4em;
	position: fixed;
	bottom: 5%;
  	right: 0%;
	padding: 0.15em;
}


#navitext {
    font-size: .7em;
    font-family: 'IM Fell French Canon SC', serif;
}

#navitext .enchantment-link, tw-link {
	color: #e4f4f7; 
}

#navitext .enchantment-link:hover, tw-link:hover {
	color: #ed2e00;
}

h1,
h2,
h3,
h4,
h5{
	font-family: 'IM Fell French Canon SC', serif;
}

body, tw-story
{
  font-family: 'IM Fell DW Pica', serif;
  font-size: 1.2em;
}

tw-story
{
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center; 
}

tw-passage {

  	display: block;
  	background-color: rgba(0, 0, 0, 0.65);
  	background-align: center;
  	border-left-style: double;
  	border-bottom-style: double;
  	border-right-style: double;
  	border-top-style: double;
  	border-color: #464646;
  	padding-left: 6%;
  	padding-right: 6%;
  	padding-bottom: 6%;
  	padding-top: 8%;
  	margin: 2% auto;
  	flex-direction: column;
    width: 80%;
    box-shadow: 0px 0px 4px 7px rgba(0, 0, 0, 0.7);
}


.enchantment-link, tw-link {
	color: #d52a00; 
}

.enchantment-link:hover, tw-link:hover {
	color: #ff7023;
}

.visited {
	color: #ff9f85;
}

.visited:hover {
	color: #ffc9a5;
}

#portraitR {
    position: fixed;
  	z-index: 1;
    right: 5%;
    top: 5%;
    width: 18%;
    text-align: center;
}

#portraitL {
    position: fixed;
  	z-index: 1;
    left: 5%;
    top: 5%;
    width: 18%;
    text-align: center;
}

.responsive-image {
  height: auto;
  width: 100%;
}

 @media screen and (orientation:portrait) and (max-width: 768px) {
  h1,
  h2{
	  font-size: .7em;
  }
  h3,
  h4,
  h5{
	font-size: .7em;
  }
   body { 
      font-size: .9em; 
   }
}

@media only screen and (orientation:landscape) and (max-width: 768px) {

 
  #portraitR {
	  position: fixed;
	  right: 5%;
	  top: 2%;
	  width: 12%;
	  text-align: center;
  }

  #portraitL {
	  position: fixed;
	  left: 3%;
	  top: 2%;
	  width: 12%;
	  text-align: center;
  }

  h1,
  h2{
	  font-size: .8em;
  }
  h3,
  h4,
  h5{
	font-size: .8em;
  }
   body { 
      font-size: 1.5em; 
   }
  tw-passage{
	padding-left: 2%;
  	padding-right: 2%;
  	padding-bottom: 2%;
  	padding-top: 2%;
  	margin: -5%;
  	flex-direction: column;
    width: 100%;
	box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.7);
  }
  tw-story{
	padding: -5% auto;
	margin: 0% auto;
	width: 100%;
	background-size: cover;
  }
}

tw-story {
	background-image: url("Images/Background2.png");
	background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position:center center; width: 100%;
    height: auto;

}

table, th, td {
  border: 1px solid white;  text-align: center;
padding-left: .25%; padding-right: .25%;
}
2

Short story, put this is your Stylesheet code…

tw-sidebar tw-icon[title*="undo" i],
tw-sidebar tw-icon[title*="redo" i] {
  display: none;
}

Long story, in order to target an HTML element for styling, we need to discern what makes it uniquely targetable. The trick is to use the browser’s inspector, by right-clicking on the element and selecting Inspect. The following HTML is revealed…

<tw-sidebar>
  <tw-icon tabindex="0" alt="Undo" title="Undo">↶</tw-icon>
  <tw-icon tabindex="0" alt="Redo" title="Redo">↷</tw-icon>
</tw-sidebar>

…and as you can see, the only way to identify the two history links is with their alt or title attribute values. You can interpret the logic in the CSS selectors I provided in the short answer. *= looks for a string value contained in the title attribute and the i makes the match not case-sensitive. I tried to make the selectors future-proof. However, the main takeaway is that you can see the HTML by using the browser’s inspector.

Let us know if this works for you.

Edit: This was tested in Harlowe 3.3.7.

3

I didn’t get a chance to try until now, but it totally worked, thank you, and thank you for the long version which will help me troubleshoot in the future!

1 Like