Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

How do I replace or style the Back and Forward buttons?

edited April 2016 in Help! with 2.0
I don't want to disable them. I just want to change their appearance. They're barely visible against every background image I try to use. Ideally I would replace them with buttons of my own design, but I'll settle for making them a different color or something, if that's possible. Is it?

Using Harlowe.

Comments

  • Most modern web-browsers come with built-in Developer Tools which can be used to inspect the HTML structure of the current page. How you access these tools depends on which operating system and web-browser you are using.

    On Windows a number of web-browsers use the F12 key, a number also support placing the mouse cursor over the item you wish to inspect then using the right mouse button to open a content menu containing an Inspect Element item (or words to that effect).

    If you use you web-browser to Inspect the HTML code representing the Undo link (contained within the sidebar) you will see it looks something like the following:
    <tw-sidebar>
    	<tw-icon tabindex="0" class="undo" title="Undo">↶</tw-icon>
    	<tw-icon tabindex="0" class="redo" title="Redo" style="visibility: hidden;">↷</tw-icon>
    </tw-sidebar>
    
    ... as you can see each of the links within the sidebar are represented by a tw-icon element which uses a class property to indicate the type of link and the element contains an extended character (↶ or ↷) which is shown on the page.

    1. Changing the Styling:
    You can use CSS like the following to style the tw-icon elements, either as a set or individually. The CSS needs to be placed within your Story Stylesheet area.
    /* Style both of the sidebar links. */
    tw-icon {
    	opacity: 0.5;
    }
    tw-icon:hover {
        opacity: 0.75;
    }
    
    /* Style the Undo sidebar link. */
    tw-icon.undo {
    	color: red;
    }
    
    /* Style the Redo sidebar link. */
    tw-icon.redo {
    	color: orange;
    }
    
    note: Searching the forums for "tw-icon" (include quotes) will return threads showing other forms of styling like using images.

    2. Changing the Link Text or Tool-tip:
    You will need to use Javascript within a header tagged passage to do this. The following changes the Link Text (text) and the Tool-tip (title) of both side-bar links.
    <script>
    	$('tw-sidebar tw-icon.undo').text("Back").attr("title", "Back");
    	$('tw-sidebar tw-icon.redo').text("Forward").attr("title", "Forward");
    </script>
    
Sign In or Register to comment.