Skip to main content
Deb Sauer
Deb Sauer
Inspiring
March 9, 2016
Answered

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

  • March 9, 2016
  • 10 replies
  • 1704 views

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?

    This topic has been closed for replies.
    Correct answer 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!


    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>

    10 replies

    jaggedpeak
    jaggedpeak
    Inspiring
    October 16, 2016

    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
    jaggedpeak
    Inspiring
    October 16, 2016

    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.)

    S
    Stefan Gentz
    Legend
    March 10, 2016

    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
    Deb SauerAuthor
    Inspiring
    March 11, 2016

    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
    Community Expert
    Jeff_CoatsworthCommunity Expert
    Community Expert
    March 11, 2016

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

    Firefly Community Gallery
    Adobe Firefly

    Remix with Firefly Community Gallery

    Thousands of free creations to fall in love with and remix in Firefly.

    Explore now
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices