Adobe Community: Message List - RoboHelp HTML5 Layouts

Re: Creating a new template

forums_noreply@adobe.com — Fri, 14 Nov 2014 00:12:06 GMT

One way to share things like this is using WeTransfer. I've had really good luck with this free service myself.

http://www.wetransfer.com

Cheers... Rick

Re: Creating a new template

forums_noreply@adobe.com — Thu, 13 Nov 2014 18:10:37 GMT

Great! The RoboHelp project though is about 60MB as a .zip file. Could I share this with you another way?

Re: Creating a new template

forums_noreply@adobe.com — Thu, 13 Nov 2014 16:01:59 GMT

It would be my pleasure. Can you please send the information to contact [at] wvanweelden [dot] eu?

All layouts created for RoboHelp can be imported and exported, so if you have a layout at one time, you can easily reuse it in all your projects.

Kind regards,

Willam

Bizarre section URLs in Responsive Layout after upgrade to 11.0.3

forums_noreply@adobe.com — Thu, 13 Nov 2014 14:32:02 GMT

The following problem has hit my RoboHelp after upgrading v11 to the latest patch 3:

When I generate a Responsive HTML5 layout, section URLs get weirdly formatted in a browser (tried both Firefox and Chrome). This does not seem to be project-specific, because the same problem happens when I generate even the standard out-of-the-box projects like Salesbuilder2 and EmployeeCare2.

Here is what happens:

For example, a link to:

file:///D:/!!!/EmployeeCare/Employee_Care/Introduction.htm

opens the following browser URL:

file:///D:/!!!/EmployeeCare/index.htm#t=Employee_Care%2FIntroduction.htm

or, say, a link to:

file:///D:/!!!/EmployeeCare/Employee_Care/HR_Policies/Attendance.htm

opens as:

file:///D:/!!!/EmployeeCare/index.htm#t=Employee_Care%2FHR_Policies%2FAttendance.htm

I hope the screenshot below illustrates what I mean:

The links still work, but I really like my URLs human-readable. When I roll back to the previous version of RH, the problem disappears. Any ideas what might be causing it?

Thanks!

Re: Creating a new template

forums_noreply@adobe.com — Wed, 12 Nov 2014 22:57:36 GMT

Thanks Willam. If I send you image comps that illustrate the layout I am trying to create (which would ideally be importable as a .slz file), in addition to the RoboHelp project environment I am working on, could you provide me with a quote?

Re: Responsible HTML5: I can't scroll through the content (iOS 8.1).

forums_noreply@adobe.com — Wed, 12 Nov 2014 01:23:11 GMT

Hi Willam

Thank you for taking the time to reply.

I appreciate your kindness.

I was able to scroll through the content when Itried method that instructed me.

Thank you for teaching me !

Re: Responsible HTML5: I can't scroll through the content (iOS 8.1).

forums_noreply@adobe.com — Tue, 11 Nov 2014 19:22:19 GMT

Ok, this was a little more complicated than I expected. You can fix the issue by adding the following to your Screen Layout CSS:

div.contentholder {

overflow-y: auto !important;

-webkit-overflow-scrolling: touch;

}

iframe.wTopic {

width: 99% !important;

height: 99% !important;

}

I tested this on iPad mini (iOS 8.1), Chrome on Android (5.0 & 4.4), IE, FF and Chrome.

This fix works for both the Theme3_black as well as the Theme1_standard.

Kind regards,

Willam

Re: Mobile (phone & tablet) screen profiles not displaying correctly

forums_noreply@adobe.com — Tue, 11 Nov 2014 16:38:58 GMT

William, for the record I just backed everything up, then went and re-did the steps you suggested for another issue I was having.

---

Re: Disappearing screen elements in Responsive HTML 5 output

If you installed RH11.0.3, try the following:

0. Export your current screen layout for backup.

1. Remove the RoboHelp cache (not project cache). Instructions at the bottom of: http://helpx.adobe.com/robohelp/release-note/robohelp-11-0-1-readme.html

2. Remove the Responsive layout from your project.

3. Add the responsive layout again by adding a new layout.

---

This didn't fix the issue, but it didn't seem to clear my Theme1_Standard template customizations and Responsive HTML5 Settings like I thought it was going to. (Was it supposed to? I thought I would be starting fresh from scratch, but if that wasn't what was supposed to happen then that's fine, I just misunderstood.) Are there any other cache, etc., files/locations I can maybe clear?

I have been tinkering for a couple days now and the only thing that seems to "work" is using a different template (e.g. Theme2_Government or Theme3_Black).

Thank you so much for looking into this!

Re: Mobile (phone & tablet) screen profiles not displaying correctly

forums_noreply@adobe.com — Tue, 11 Nov 2014 15:07:40 GMT

Thank you so much!

Re: Responsible HTML5: I can't scroll through the content (iOS 8.1).

forums_noreply@adobe.com — Tue, 11 Nov 2014 01:49:31 GMT

Hi Willam

Thanks for your reply.

I tried method that instructed me, but it didn't work.

Re: Button Sizes

forums_noreply@adobe.com — Mon, 10 Nov 2014 16:07:02 GMT

Your memory is pretty good! It was div.wTabContentGroup.

Thanks

Jonathan

Re: Button Sizes

forums_noreply@adobe.com — Mon, 10 Nov 2014 16:01:04 GMT

Sure. You have to set the size for the div.wTabGroupContent (if I remember correctly). It's the DIV defined in same section as the div.wTabGroup.

Kind regards,

Willam

Re: Button Sizes

forums_noreply@adobe.com — Mon, 10 Nov 2014 15:53:48 GMT

Thanks Willam

Is it also possible to control the font size in the sidebar?

Re: Button Sizes

forums_noreply@adobe.com — Mon, 10 Nov 2014 15:21:23 GMT

Look for ul.wTabGroup, li.wTab, li.wTabSelected and li.wTabHover. That's where the tab sizes for desktop are defined.

For the buttonbar, look for div.bar_(topic|glo|idx|toc|fts). There the buttonbar is defined. Be aware that the same elements have different styling for different media queries.

You can put in a larger image, but I think it will stretch the layout. Could you resize the images? That's the easy way as you don't need to play with the layout.

Kind regards,

Willam

Re: Responsible HTML5: I can't scroll through the content (iOS 8.1).

forums_noreply@adobe.com — Mon, 10 Nov 2014 15:17:24 GMT

I haven't really played with the black layout, but I know there's an issue in iOS safari scrolling iFrames. The following should fix it:

In the CSS of the layout add the following:

div.contentholder {

-webkit-overflow-scrolling: touch;

}

I don't have an iPad handy right now that I can test on, but this fixes it for other sites I work on.

Kind regards,

Willam

Re: Mobile (phone & tablet) screen profiles not displaying correctly

forums_noreply@adobe.com — Mon, 10 Nov 2014 15:07:32 GMT

It could be that there is something wrong with the template. I'll look into it to see whether I can dig something up. I'll keep you posted.

Kind regards,

Willam

Re: Disappearing screen elements in Responsive HTML 5 output

forums_noreply@adobe.com — Mon, 10 Nov 2014 15:05:18 GMT

If you want your help output to be updated in your application, you will have to update the generated help in your product.

Kind regards,

Willam

Button Sizes

forums_noreply@adobe.com — Mon, 10 Nov 2014 13:05:53 GMT

RH11 | WebHelp

Does anyone know how to change the button sizes for the images used in the Function bar and Sidebar? The Layout Customisation screen states the images must be a certain size (e.g. 30x22 pixels) but I want to use my own sized buttons which are 84x42 pixels. I also want to remove the padding around the buttons. I've had a look in main.css, but I can't find anywhere that controls this. It must be "baked" into the responsive layout somewhere.

Thanks

Jonathan

Responsible HTML5: I can't scroll through the content (iOS 8.1).

forums_noreply@adobe.com — Mon, 10 Nov 2014 08:29:38 GMT

I generate Responsible HTML5 outputs, that using template "Theme3_Black".

When I browse outputs with mobile Safari (iPhone 5S, iOS 8.1), i can't scroll through the content.

Is that bug?

Re: Mobile (phone & tablet) screen profiles not displaying correctly

forums_noreply@adobe.com — Thu, 06 Nov 2014 20:21:12 GMT

Screenshots:

Internal navigation shoved up into the header bar (yellow on top of black, color changed here just to show this):

In tablet size, an extra wide image does not cause a horizontal scrollbar to appear anywhere at the bottom of the browser to scroll to the right side of the image (sorry this one is hard to see, but the image does go off to the right side of the screen):

Dead zone:

Content reappears at a much smaller size and a much larger size, but the top/bottom/and right-side text wrap is off:

(Again, above, notice no horizontal scroll bar despite the extra wide image.)

It may be of note that I can use a different template (e.g. Theme2_Government) and I don't have such problems. I guess this means there's something wrong with the template/layout in this project. Am I just going to have to reconstruct it?

Thanks,

Re: Disappearing screen elements in Responsive HTML 5 output

forums_noreply@adobe.com — Thu, 06 Nov 2014 19:38:38 GMT

CORRECTION: Only the newly generated help appears correctly, the previously generated system still has issues. But the newly generated system has other issues of it's own. (See link below.)

-----

It does seem to correct my problem with the Search bar and other things going missing, from my local machine, thank you!

But am I going to have to regenerate this to give to the developers to put a new copy in our product? The problem persists there, in it's current state. (On my computer, anyway, I don't know if anyone else is having the issue yet, I'm trying to get someone to test for me.) And I'm having an issue generating new help at the moment...

Re: Mobile (phone & tablet) screen profiles not displaying correctly

Thank you!

-----

Re: Mobile (phone & tablet) screen profiles not displaying correctly

forums_noreply@adobe.com — Thu, 06 Nov 2014 18:57:29 GMT

When I go to Manage Media Queries nothing comes up, so I don't think I have any... (I am not sure about the whole media queries thing--I only just found out about them when I started having this issue so it's still new to me.)

A search for @media in the layout style sheet finds nothing (though there are plenty of @media results in main.css).

Thank you!

Re: Mobile (phone & tablet) screen profiles not displaying correctly

forums_noreply@adobe.com — Thu, 06 Nov 2014 18:48:41 GMT

Hi,

What are your media queries at the moment? Also, try opening the style sheet of the layout and search for @media. Do you see the media queries from your settings or something else?

Kind regards,

Willam

Re: Disappearing screen elements in Responsive HTML 5 output

forums_noreply@adobe.com — Thu, 06 Nov 2014 18:45:40 GMT

Hi,

In which mode do you see this behaviour? I can find a fix if I know where this dead zone is.

If you installed RH11.0.3, try the following:

0. Export your current screen layout for backup.

1. Remove the RoboHelp cache (not project cache). Instructions at the bottom of: http://helpx.adobe.com/robohelp/release-note/robohelp-11-0-1-readme.html

2. Remove the Responsive layout from your project.

3. Add the responsive layout again by adding a new layout.

Does that solve the missing item problem?

Kind regards,

Willam

Mobile (phone & tablet) screen profiles not displaying correctly

forums_noreply@adobe.com — Wed, 05 Nov 2014 23:48:54 GMT

RoboHelp 11 on a Windows 7 machine

I have a small project that I put down in August and just picked up again today. The only changes I made today were a background color in the selected layout and adding browsers to the screen profiles (desktop, mobile, phone). I also changed the pixel sizes of aforementioned screen profiles, and saved, but ultimately thought better of it and changed them back. I don't know if that would have made any difference to this problem. (When I made the size changes RH told me to update the media queries, but I'm not using any... or at least none came up in the Manage Media Queries functionality.)

Then I re-generated the output, but the tablet and phone screen sizes are no longer displaying properly when I tested by changing the size of my desktop browser--there is a rather large "dead zone" browser size in which no content is displayed at all (which makes it almost seem like the "responsive" part of the output doesn't work), the internal navigation (forward and back buttons, and bar) is shoved up in the header bar, and no browser horizontal scroll bar appears so that I can scroll to see the edge of wide images. I mainly use IE but this occurred in Firefox and Chrome as well. The desktop display seems to work fine. (I'm so sorry I don't have screenshots now--I can provide some if needed.)

I wondered if this had something to do with my chosen "template" but a brand new project that used that same one (Theme1_Standard) didn't have any problems. Now, I also noticed that the template seems to have changed since I was last in Robohelp, because the unchanged template preview today was definitely not the same as the template from August. The Readme for the latest patch didn't mention anything that I thought seemed to be related.

Like I said, all I changed were a color, the screen profile browsers, and the screen profile sizes which I later discarded. I am completely at a loss as to what caused this and how to fix it. I feel like a complete dolt because it seems to be related to something I *DID* but retracing my steps has yielded nothing.

Thank you!

UPDATE

Still having this issue, but in poking around I discovered that some of the program files on my local machine were updated in mid-September (when it looks like the latest patch's ReadMe file was installed on my computer) and others were updated mid-October (the first time I was in RH since mid-August, though I didn't generate anything then). I don't know if this means anything, but to me it looks mildly suspicious. Thx.

Re: Disappearing screen elements in Responsive HTML 5 output

forums_noreply@adobe.com — Thu, 06 Nov 2014 17:07:24 GMT

I'm having a similar issue where the Search bar just... goes missing... in some browser dimensions. Sometimes adjusting the browser width fixes the problem and makes it reappear. This has been ongoing since I upgraded to RH11 in the summer.

Also I just had an issue crop up where a generated Responsive HTML5 output doesn't handle the tablet browser sizes--there's a "dead zone" browser size where no content displays, and the navigation and scroll mechanisms are all out of whack. Literally, had been generating fine for months then just yesterday this happened.

I have no answers yet, for sure, but there DOES seem to be a difference between running the help locally from my desktop and running the system from the server (when it's incorporated into our product). That may be something to look into.

Best of luck,

P.S. You've tested in multiple browsers?

Re: Custom Buttons

forums_noreply@adobe.com — Thu, 06 Nov 2014 16:58:55 GMT

Absolutely. A more user friendly and extensive editor is a must.

I'll hit the Wish Form...

Cheers

Jonathan

Re: Custom Buttons

forums_noreply@adobe.com — Thu, 06 Nov 2014 16:52:18 GMT

Totally understand and agree. Not only with options, but EASE OF USE. There are some limited customization options you can make (mostly colors).

Please take a moment to open and complete a Wish Form to alert Adobe as to what you would like to see. We will only ever see changes if they hear from enough folks.

Click here to open the Wish Form

Cheers... Rick

Re: Custom Buttons

forums_noreply@adobe.com — Thu, 06 Nov 2014 16:30:55 GMT

I thought so. Looks like I'll have to get my hands dirty then, which is a shame because WebHelp skins let you add custom toolbar items from within the UI.

For me, it needs more customisation options out-of-the-box.

Thanks anyway

Jonathan

Re: Custom Buttons

forums_noreply@adobe.com — Thu, 06 Nov 2014 16:22:42 GMT

Hi Jonathan

Indeed, if you are willing to roll up your sleeves and dig in, and you have a good understanding of HTML 5, CSS, JavaScript and RoboHelp widgets, much customization is possible.

Cheers... Rick

Custom Buttons

forums_noreply@adobe.com — Thu, 06 Nov 2014 14:40:06 GMT

RH11 | WebHelp

I'm looking to switch our WebHelp to a responsive layout. Does anyone know if it's possible to add custom buttons to the Function bar? It doesn't look possible via RH, so can it be done by modifying the output files?

Thanks

Jonathan

Disappearing screen elements in Responsive HTML 5 output

forums_noreply@adobe.com — Thu, 06 Nov 2014 14:29:28 GMT

I recently installed the update to RoboHelp HTML 11, which was supposed to fix a lot of problems with Responsive HTML 5 output issues. However, a new issue has just cropped up out of nowhere and I have no idea why it's happening.

When I generate Responsive HTML 5 output for my help system, the following items are missing from the screen in the browser:

- The vertical separator bar that separates the TOC from the help content window

- All the "hover" buttons (the dark versions of the TOC, Search, Glossary, Home, and Print buttons that appear when you hover over them or when that page is selected)

Also, the Show/Hide button is visible (even though the separator bar is not), but it does not function at all.

The output was generating just fine, with no such problems, until just a couple of days ago. This struck out of nowhere. Does anyone have a clue what is causing this or how to fix it?

Thanks!

Tim Huddleston

Re: Creating a new template

forums_noreply@adobe.com — Wed, 05 Nov 2014 21:55:33 GMT

Hi,

To get this clear: do you (a) want to change the existing template and remove the splitter between the sidebar and the content? Or do you (b) want to create a new custom layout completely according to your specifications?

If (a), comment out line 106-120 in the layout.js file. Also, in every .slp, there is a div with the class closeButton. Remove that DIV as well. That should get rid of it.

For (b), that would require you to build a layout from scratch or really dive into the code to make some changes. I can provide consulting on that or I can help build one for you (for a charge, obviously). Creating something from scratch requires a thorough understanding of HTML, CSS, JS and RoboHelp widgets.

Kind regards,

Willam

Creating a new template

forums_noreply@adobe.com — Wed, 05 Nov 2014 20:43:19 GMT

If I want to create a template for a new multiscreen responsive layout in RoboHelp 11 HTML 5, for example one that does not have a sidebar separating the TOC from the documentation, what basic changes should be made to the project environment? Is it just a matter of making changes to the CSS and JS files? If so, which ones? Pardon my ignorance.

Re: Next and Back navigation buttons have disappeared

forums_noreply@adobe.com — Tue, 04 Nov 2014 08:13:08 GMT

In your SSL settings, are your browse sequences enabled?

Kind regards,

Willam

Next and Back navigation buttons have disappeared

forums_noreply@adobe.com — Mon, 03 Nov 2014 23:09:53 GMT

My Next and Back navigation arrows have inexplicably disappeared from the Responsive Layout in RoboHelp 11 HTML. I found many nav bar-related topics on these forums, but could not find one that was similar to this issue I am experiencing. I'm not sure what I may have done, as it seems like this could only be the result of manually or purposefully removing them.

why is the tab functionality not working in Responsive layout? I need accessibility for non-mouse users.

forums_noreply@adobe.com — Thu, 30 Oct 2014 19:30:32 GMT

I have generated Responsive HTML5 output. The tab key does not do anything. I want users to be able to tab through the topics and expand or collapse the drop-down hotspots. Tab appears to do nothing. If I generate the same content in WebHelp output users can tab between topics and expand/collapse drop-down hotspots. Is there some sort of setting I have to select to get it to work in Responsive HTML5?

Re: Hide search highlight once in a topic?

forums_noreply@adobe.com — Wed, 29 Oct 2014 23:46:35 GMT

Thanks! That looks like it will work a treat.

Now to figure out where I go to get a graphic to harmonise with the website.

Re: Hide search highlight once in a topic?

forums_noreply@adobe.com — Wed, 29 Oct 2014 07:12:54 GMT

The widget does the highlighting by reading the url. You will find ?rhsearch=searchstring added to the URL. Once the highlighting is applied, you can remove it with lots of JavaScript. An easier solution may be to create a button to reload the page without the highlight option in the url. A button could do:

document.location = location.protocol + '//' + location.host + location.pathname

Kind regards,

Willam

Hide search highlight once in a topic?

forums_noreply@adobe.com — Wed, 29 Oct 2014 06:07:37 GMT

Hi all,

RH version: 11.0.0.179

SSL: Multiscreen HTML5 - Desktop screen profile only

IE version: 9

Is there a built-in widget/thing to add a button to a topic to hide the search highlighting? To be clear, I want the search highlight on, but I want users to be able to turn it off once they have found the topic they need. I've done a little searching in the help and online, so I suspect there isn't, but want to make sure.

If there isn't a built-in function, does anyone know if there is a way to add my own button/javascript? I can read other's code and do a little bit of scripting, but only really basic stuff.

Thanks for your help

Re: Printing responsive layouts in Internet Explorer

forums_noreply@adobe.com — Fri, 24 Oct 2014 18:14:11 GMT

The problem is likely to have occurred with the 11.0.3 patch so if your projects were generated before that, then that would explain why they are working for you.

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

Re: Printing responsive layouts in Internet Explorer

forums_noreply@adobe.com — Fri, 24 Oct 2014 14:32:50 GMT

Agree, if the app has a print button, you should be able to use the feature as an option to print a page or two. I developed several of my RH projects for a customer who wanted to be able to use their responsive web out in the field. They wanted to be able to view or print installation and step-by-step procedures as needed on any device.

I have 14 projects that I can print from using any browser from any device and I cannot replicate this print issue.

BUT...

I develop JQuery Mobile as well and I can tell you from first-hand experience, IE is a problem when it comes to HTML5/Responsive web in all areas.

HTML5test - How well does your browser support HTML5?

Re: Printing responsive layouts in Internet Explorer

forums_noreply@adobe.com — Fri, 24 Oct 2014 14:20:29 GMT

Hi Rick,

It has a print button, so you kind of expect it to print something vaguely usable. Some layout differences are to be expected between browsers, images are always going be resized, possibly beyond usefulness... I don't expect perfection!

I do expect more than the first line of content though, that isn't a lot to ask for is it? Firefox and Chrome don't seem to think so, I just wanted to know why IE was so different. Thanks to Peter we now know it is likely a bug somewhere in the software or template.

Tom.

Re: Printing responsive layouts in Internet Explorer

forums_noreply@adobe.com — Fri, 24 Oct 2014 14:06:49 GMT

I never cease to be amused by "issues" that arise when folks want to create something in a medium for which it was never designed and they are dismayed that it doesn't produce what they want.

The thing is, print is a completely different world than on-line is. I'm totally baffled why so many folks just expect things to print perfectly from a web page that is intended for screen consumption.

Cheers... Rick

Re: Printing responsive layouts in Internet Explorer

forums_noreply@adobe.com — Fri, 24 Oct 2014 13:54:56 GMT

Hi There,

The example above wasn't on our webserver but I first noticed this on a project that was. I recreated the issue in a brand new project to make sure that it wasn't anything I had done to the template.

I'll put the clean project on the webserver to see if it helps, Thanks.

Re: Printing responsive layouts in Internet Explorer

forums_noreply@adobe.com — Fri, 24 Oct 2014 13:47:53 GMT

Hi All... are you sure this is a bug? I know IE behaves pretty odd nowadays as we become more responsive but I have several projects that I have created using responsive layout... When I read this post, I tested a few of my projects by printing random pages and I don't replicate this problem... It seems to print fine. I put my projects on a web server because many functions and features do not behave until you do that -

Re: Search option isnt showing up in multiscreen output once published

forums_noreply@adobe.com — Fri, 24 Oct 2014 13:02:39 GMT

Understand... sometimes we have to adjust to the limitations... I think the multi-screen works ok for desktop but to truly make the output work well on all devices (responsive web), I find the responsive layout /output works better as I converted 14 projects over from multi-screen to responsive. It took me 15 minutes to customize my template and 5 minutes to delete the existing multis-screen layouts and profiles and then attach the new responsive layout to my project and recompile. Good luck with your project.

Re: Search option isnt showing up in multiscreen output once published

forums_noreply@adobe.com — Fri, 24 Oct 2014 03:04:07 GMT

Again unfortunately, the decision to use Multiscreen was before my time and I can't change it at this stage. (Plus in my short experience, the current method of updating either multiscreen or responsive layouts is 'hack and hope' )

Re: Search option isnt showing up in multiscreen output once published

forums_noreply@adobe.com — Thu, 23 Oct 2014 23:07:51 GMT

In that case, Responsive output should work better than the multi-Screen. If you have RH 11 - you have that output option.

Re: Search option isnt showing up in multiscreen output once published

forums_noreply@adobe.com — Thu, 23 Oct 2014 22:28:28 GMT

Unfortunately we're in a locked down environment and IE is it (this is the first time I've really used IE in about 15yrs. )