Navigation icons for webhelp responsive questions

Having trouble installing <oXygen/>? Got a bug to report? Post it all here.
sparklies2
Posts: 1

Navigation icons for webhelp responsive questions

Thu Sep 13, 2018 5:32 pm

Hello,

I have oXygen v20.1 and I'm publishing using the webhelp responsive transformation. The navigation icons (navleft, navright, print etc) appear fine on the desktop version of the site, but are nowhere to be seen when viewed on my device. There is no way to navigate through pages at all other than via the breadcrumbs, which do not display other topics at the same level so many topics are unreachable. Is this by design (which seems odd) or have I made a mistake somewhere?

On a similar subject, is there any way of adding additional navigation icons to the topic pages? For example, placing them at the bottom of either the topic or the footer, in order to save readers from needing to scroll back to the top of the page when they want to read the next page.

Thank you!
ionela
Posts: 209

Re: Navigation icons for webhelp responsive questions

Tue Sep 18, 2018 1:46 pm

Hi,

Indeed, the navigation links are by default hidden on mobile devices. I have added an improvement request to our issue tracking tool in order to reanalyze this.
However, using Oxygen XML v20.1 you could achieve the result you need following these steps:
  • Save you favorite template as explained here: https://www.oxygenxml.com/doc/versions/20.1/ug-webhelp-responsive/topics/whr-create-publishing-template.html. Make sure you check the "Include HTML Page Layout Files" option.
  • Open the resulted archive in Oxygen to edit the topic HTML page layout file "wt_topic.html".
  • Add this code

    Code: Select all

    <div id="custom_nav" class="text-center hidden-md hidden-lg">
                <whc:webhelp_navigation_links/>
            </div>
    right before the end tag of the <body/> element. This will add the navigation links at the bottom of each topic page, only on mobile devices.
  • Edit the transformation scenario and choose your customized publishing template using the "Choose Custom Publishing Template" link.

Please note that you may need to also use a custom CSS to style the newly added element. For example, to keep it always visible at the bottom of the page, you can use the following CSS:

Code: Select all

#custom_nav{
    position: fixed;
    bottom: 0px;
    display: block;
    width: 100vw;
    background-color: #000;
    opacity: 0.5;
}

To use a custom CSS in the WebHelp Responsive transformation scenario, please check the instructions from our user guide:
https://www.oxygenxml.com/doc/versions/20.1/ug-webhelp-responsive/topics/webhelp-customizing-with-css.html#ariaid-title5

Regards,
Ionela
Ionela Istodor
oXygen XML Editor and Author Support

Return to “Common Problems”

Who is online

Users browsing this forum: Bing [Bot] and 1 guest