Skip to main content
A
ajwwhitney96
Known Participant
September 21, 2015
Question

RH 2015 responsive layout redesign?

  • September 21, 2015
  • 1 reply
  • 520 views

We just upgraded to RH 2015, and I've been looking at the responsive layouts that come with the product. I've worked with the multiscreen HTML5 layouts in the past, and tried out one of the responsive layouts from RH 11. It seems to me that there has been a complete redesign of how the responsive layouts work in RH 2015 that make it virtually impossible to edit them without using the built in editor. For example, looking at the Azure_Blue layout, only the Topic.slp page is present. The TOC, Index, Glossary and Search .slp pages no longer exist. In addition, the layout.css file is now one gigantic string on a single line instead of a more traditional .css file with the classes and divs broken out.

I've done a good amount of customization on our current Multiscreen HTML5 layout, and was hoping to incorporate some of the new features of the RH2015 responsive design (such as displaying the search results in the sidebar), but from what I've seen it doesn't seem as if this will be possible without giving up too much of our customization.

As a simple example, I can't seem to find a way in the responsive editor to set the default setting for highlighting search results to "off", or even to display the checkbox giving the user the option to turn highlighting on or off (this used to be possible by changing the screen layout properties for the highlight checkbox).

Does anyone know of a way to edit the RH 2015 responsive layouts without using the editor? Or is it best to stick with my current multiscreen HTML5 layout if I need to change something beyond basics like color and font?

Thanks for your thoughts!

This topic has been closed for replies.

1 reply

Willam van Weelden
Willam van Weelden
Inspiring
September 22, 2015

In RH2015, the Responsive HTML5 is indeed completely redesigned, both functionally and technically. Everything is now contained in a single Topic.slp where you can find search, index, glossary, filters, toc and topic content. The method RoboHelp now uses is akin to Google's Angular. The data-xxx attributes all have a specific meaning setting classes, hiding content, etc.

Also, Adobe used SCSS to generate the CSS files. The CSS of the new layouts is huge and you don't want to manually have to edit that. Luckily, Adobe published the SCSS source files to work with: RoboHelp screen profiles and layouts If you download an SCSS convertor (I use the free Koala app http://koala-app.com/‌) you can very efficiently change anything you want from the layout.

Also, there are several settings controlled in layout.js. You can access this with the layout editor (right click the layout and select Edit) or open the JS and see what is available.

As for the search highlighting, you can set the search highlight color through the editor, in the Search (All) components. Currently, you an turn it off completely. (Alternatively, you can also set the color in the SCSS.)

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