Skin Editor - Options are Missing - How Can I Restore Them?

[straygoat]

Hello

I want to edit the skin we are using so that it has a Back button and a Forward button. Should be simple enough, right? I have opened the skin and selected Toolbar, but the list of options in the left-hand pane doesn't contain Back or Forward - in fact, it hardly contains any of the options shown in Flare's help. (Obviously, they are not in the right-hand pane either). I guess they have been deleted, so does anyone know how I get them back?

If I create a new skin, the options aren't available for that, either.

[straygoat]

This is for HTML5 by the way.

[nickatwork]

What are you seeing in that toolbar list?
For HTML5 skins it is has the following (and you can only remove them from the right list, not actually delete them):

NextTopic (I guess you refer to this one as forward)
Previous Topic (I guess you refer to this one as back)
Print
Expand All
Topic Ratings
Edit User Profile
Current Topic Index

If you want additional custom buttons, you'll need to make them yourself.

[straygoat]

Okay, sorry...I got a bit confused. In Flare's help, there's a screen shot of the skin with Back and Forward (as in back to the previous topic you viewed, not back to the previous topic in the TOC structure)...it must be a custom option they have added.

It seems that I can add the buttons I need as a topic toolbar proxy to the master page layout...i've added the proxy, but it doesn't appear when the help is built. Any ideas on why that might be?

[straygoat]

So what I have now is:

Master Page Layout with Topic Toolbar Proxy included at the top. It is set to include these buttons:

Back Forward PreviousTopic NextTopic RemoveHighlight Print

Skin

No Toolbar options set.

The output I get is:

Print, Expand All, Next Topic, Previous Topic shown above the Topic window - this is what I used to have setup in the skin...could these settings be cached somewhere?

Print, Next Topic, Previous Topic in the toolbar proxy, but no sign of Back, Forward, or RemoveHighlight.


I'm finding this pretty confusing...do I need to create buttons and script for the Back, Forward, and Remove Highlight buttons? I got the impression they are built-into Flare seeing as they are listed as option s in the proxy editor.

Or am I experiencing another bug?

[NorthEast]

HTML5 help has fewer toolbar buttons than WebHelp (e.g. back, forward, home), and they're listed here:
http://webhelp.madcapsoftware.com/flare ... Output.htm

You can add buttons to the HTML5 toolbar itself; you'd use the topic toolbar proxy if you wanted buttons inside the actual topic.

The help link above mentions how to add a custom button.

To add buttons for back and forward, you'd need to create buttons with the javascript:

Code: Select all

window.history.back();

Code: Select all

window.history.forward();

HTML5 doesn't highlight search results, so you'd not need a remove highlight button.

[straygoat]

Thanks Dave, that has cleared that up for me. Creating custom buttons with javascript is the answer then - no problem.

[straygoat]

In the Skin editor, there is a Javascript box for entering JS. Am I right in thinking that for this box, you have to enter a complete script that references all of the buttons you are going to use? I expected it to allow me to set the js for each button individually in the box.

I've discovered that you can set the script via the Styles>Event property...I just wondered how the JS box is supposed to work.

[nickatwork]

Yes, that JS box is for all of your scripts. For example, I have 4 different JS custom buttons going on in that box.

var button1 = function()
{
your script
}

var button2 = function()
{
your script
}

var button3 = function()
{
your script
}

[straygoat]

Thanks Nick. I achieved what I wanted by adding the js to the Event property of each button in the end, but it is good to know I could just enter the lot in that box. Not that I know much js...I'll add it to my list of things to learn - Dreamweaver's next up.

[candeeh]

I am not well versed in JavaScript, so please forgive my ignorance. I am wondering if one of you might be able to provide me with the code for adding a navigation pane Show/Hide toggle button to our HTML5 webhelp skin. I know how to add an additional button, but I don't know what the JavasScript code would look like for the action of showing and hiding the navigation (TOC) pane. Do any of you know some JavaScript code that could accomplish this task?

Thanks so much for any help you can offer.

[Nita Beck]

I am not well versed in JavaScript, so please forgive my ignorance. I am wondering if one of you might be able to provide me with the code for adding a navigation pane Show/Hide toggle button to our HTML5 webhelp skin. I know how to add an additional button, but I don't know what the JavasScript code would look like for the action of showing and hiding the navigation (TOC) pane. Do any of you know some JavaScript code that could accomplish this task?

Are you aware that one can click the little left-pointing arrow that is in the middle of the divider between the nav pane and topic pane in HTML5 output? That arrow is a toggle for showing and hiding the nav pane. Perhaps you don't need to add a custom button to the toolbar at all.

show_hide_nav_pane_in_HTML5_output.png

[candeeh]

Nita,

Yes, I am aware of the little arrow toggle, but it isn't sufficient enough for our users. We have to use a platform called TeamSite for publishing, and when we do so, the small triangle on the nav pane toggle disappears, so in essence, it doesn't really look like it is a control. To compensate for this issue, we wanted to place a show/hide nav pane icon in the toolbar so that our users could open the pane from there. This is why I was asking for some JavaScript code for an icon.

Candee

[straygoat]

window.history.back();

Does this work in HTML5 output? I am getting very erratic results - it works once when a Search Results page is in the sequence of pages and works all of the time in the TOC, unless the default.htm is in the sequence (which kills the sequence it would seem).

[NorthEast]

It's the standard javascript method to use; and it should do the same as the clicking the browser back button.
So, if you can reproduce a fault, try it with the browser buttons too.

A quick test suggests IE doesn't like it when you click the buttons too quickly (including the browser buttons).

[straygoat]

Thanks Dave. I will give it a try again tomorrow and see what happens. I've read a few of your posts on this and know you have got it to work, so I'm sure there's something quirky going on with the way we build our help.

[straygoat]

Quick update - the window.history.back and window.history.forward scripts don't work in HTML5 unless your help is hosted on a web server. This is a bug in Flare (confirmed by tech support).

[KCinColorado]

I added custom Back and Forward buttons to my HTML5 skin (Flare 9) using Dave's instructions above (thanks!). Just wondering how to add "ToolTips" to those two new buttons? There doesn't seem to be any related options in the Toolbar Button style. And other buttons on my toolbar (Expand All, Print, etc.) have ToolTips so my two new ones should too.

[KCinColorado]

Got the answer to the ToolTip question (how to assign tooltips to my custom toolbar buttons in the HTML5 skin) while on a support call with MadCap. The tooltips are on the UI Text tab in the skin editor. (See Toolbar Button listings.) FYI, MC support said your button tooltips cannot contain spaces.