Can you add a custom button to HTML5 and direct it to a URL?

[Deb Sauer]

I am outputting responsive HTML5 from FM 12 (soon to upgrade to FM 2015). I manually remove the Index and Glossary buttons from the output (this step will go away with FM 2015). I would like to replace the Index button image with a custom button image (of the PDF symbol) and make it so that when you click this PDF button, a PDF file opens (so the button has to redirect to the URL for the PDF). Can this be done?

[Stefan-Gentz]

Hi,

that should be possible. Just setup your own configuration and save the Default.sts as your own settings file. Then you can rename this settings file from *.sts to *.zip or *.sts.zip and unzip it. Now you have all the template files in front of you.

There you will also find the three graphics for the index button in the navigation:

• index_desktop.png
• index_tab.png
• index_mobile.png

You can replace them with your own ones. Use an image of 31x23 pixels for best results. Of course it makes sense to design a PDF button that fits into the design of the other buttons for a nicer user experience 😉

Now you will have to tweak the file that contain the code for this. This can be done in the Topic.slp file. But this one is a little bit more trick and you need to have knowledge of HTML, CSS and JavaScript to do it. Search for <!-- Function bar with TOC/IDS/GLO/FILTER/FTS buttons --> and <!-- Index --> to find the sections with the code for the index. You can tweak them or – maybe better – add new sections / links for the PDF.

If you struggle, Willam van Weelden‌ is an excellent contact for this. He also runs http://www.helpessentials.com/ where you can get customized layouts and skins for RoboHelp.

Stefan Gentz

[Deb Sauer]

Thanks, Stefan! Very helpful!

For the images, I thought I would replace the necessary png files with my images but keep the same names (*index*) so I don't have to worry about chasing down every occurrence of the images in the code. It just means that an images named *index* will show a PDF icon, but I'm OK with that.

I'll look for those sections in Topic.slp.

BTW, I'm outputting the responsive HTML5 from FrameMaker, not RoboHelp. But, I suppose editing a .slp file is the same in either environment!

Deborah

[Jeff_Coatsworth]

Don’t forget Deb that all the guts that make FM generate help outputs are really RH under the hood ;>)

[Deb Sauer]

Yes, indeed, Jeff. Actually, after I generate HTML5 from FM, I use RH to make some tweaks that I can't do directly in FM. 

[Willam_van_Weelden]

For the button behaviour, you will have to change the HTML code in the .SLP page. And you can also change the label displayed in the code as well.

[Deb Sauer]

Hi Willam

Can you provide guidance on the specific HTML code in the topic.slp file that needs to be edited? I'm finding references to the index in multiple sections of the file.

Thanks!

[Deb Sauer · Accepted solution]

Here's the correct answer:

Using FM2015, unzip the Settings (.sts) file and open the Topic.slp file in a text editor such as Notepad. Find the index button from the sidebar:

<a class="idx" data-if="KEY_FEATURE.idx" data-class="active: @KEY_ACTIVE_TAB == 'idx'" data-click="$mc.toggleActiveTab('idx')" data-attr="title:@KEY_LNG.Index; href: '#'">&#160;</a>

This contains all the code required to show the index. To change this to a hyperlink, change it into: <a class="idx" data-attr="title:@KEY_LNG.Index" href="http://www.example.com">&#160;</a> This changes it into a hyperlink that opens the page.

To make the hover text something other than "Index" remove the attribute data-attr="title:@KEY_LNG.Index". Then add the title="My title" attribute instead. In my case, I added title="PDF" so the resulting line in my Topic.slp is:

<a class="idx" title="PDF" href="http://www.sonos.com/documents/productguides/en/Play1Guide_EN.pdf">&#160;</a>

Many thanks to Willam van Weelden and Stefan Gentz for their guidance in helping me sort this out.

In each of my HTML5 guides, the PDF button should open the PDF file for the guide. So, if I open the ABC HTML5 guide and I click the PDF button, the ABC PDF file should open. Since the link for the PDF button goes to a specific PDF file, I must have a unique Topic.slp file (and therefore Settings file) for each HTML5 guide.

I also removed the code for the icon that appears at the far left top of the HTML5 content and links to the Home page. I prefer to have the title of the HTML5 guide flush left and not have a logo. So, I deleted the lines 

  <div class="logo" data-attr="title:@KEY_LNG.HomeButton;href:rh.consts('DEFAULT_TOPIC')" data-click="!(@KEY_SCREEN_DESKTOP || @KEY_SCREEN_TABLET) && @KEY_ACTIVE_TAB(null)">

  </div>

[Deb Sauer]

Hi Stefan

I can't find the content you referenced in topic.slp. I am using FM 12. Any suggestions?

Thanks!

[jaggedpeak]

I'm a bit unclear on the process here, hoping someone can point me in the right direction.

I assume that after editing the Topic.slp file, it must be added back into the Settings (.sts) file, then when I use Publish and generate for Responsive HTML, the resulting pages should include the redefined 'index' button.

Is that correct?

Because that's what I did, and the index icon is still linked to the index, not the PDF.

Colour me confused. Any help appreciated 🙂

[jaggedpeak]

Got it figured out... Didn't realize I would have to switch temporarily to a different settings file in the publish dialog, then switch back. (Thought it would reload each time I generated.)