Change Undo/Redo Icon?

zeldawg

Hey all! I know you can change background color and everything, but is there any way that I can replace the undo (tw-icon.undo) and redo (tw-icon.redo) icons in Twine using CSS? Thank you!

greyelf

You need to state which story format you are using, as answers can be different for each one. Based on the element and class names in your question I am going to assume you are using Harlowe.

The undo and redo 'buttons' don't use icons, they are actually just text characters. You can use Javascript to change both the character and title (tooltip) displayed, the following changes the undo button to be Back.

$('tw-sidebar tw-icon[title="Undo"]').text("Back").attr("title", "Back");

Because the undo and redo buttons are (re)created every time a new passage is shown you will also need to issue the above Javascript each time as well. You can do that by first adding a header tagged passage to your story (if you don't already have one) and then using code like the following:

<script>$('tw-sidebar tw-icon[title="Undo"]').text("Back").attr("title", "Back");</script>

... the text function is changing the character display while the attr function is being used to change the title (tooltip)

Now we come to the harder part, making the new undo/redo buttons look good. If you have tried the above suggestions you will notice that the new buttons may overlap the passage text area because the text being displayed is longer than a single character/symbol. If your proposed replacements are also a single character/symbol then there should be no issue otherwise you will need to use CSS to style the new buttons correctly.