Skip to main content
Inspiring
November 19, 2014
Question

Need help with Responsive HTML5 screen layout in RoboHelp HTML 11

  • November 19, 2014
  • 1 reply
  • 1314 views

I have a few questions/issues regarding screen layouts for Responsive HTML5 output in RoboHelp HTML 11.

First off, I decided to just use the Theme1_Standard layout that came with the program (only other default option was Theme2_Government) and started customizing the layout. I originally added a company logo to the 'Header' component in the Customization dialog, but have since decided to remove it. I can't seem to do this from the dialog, so I tried just deleting the image file from the whole project. The file is gone, but the logo is still there. This is only displayed in the header when a topic is displayed, it does not appear in the header at the TOC, Index, Search screen, etc. How do I get rid of this???

Secondly, the text in the header for the topic screens appears differently than the one on the screens for the TOC, Index, Search, etc. In the former of these, the header is displayed in maroon text in a much smaller font, similar to that used in the topics. In the latter, the topic is displayed based on what I configured in the Layout Customization dialog; much larger in white text on a black background. In each case the heading text serves as a link to the default display topic shown when the help file is launched, which is fine. However, how do I get the header to be consistent across all screens (topics and TOC, Index, etc. alike)???


As a result of these issues with the Theme1_Standard layout, I'm trying to import a different Responsive HTML5 screen layout than the two provided within RoboHelp HTML 11 (Standard and Government). I did some digging in the program help and found another layout I'd like to use (Theme3_Black.zip) at RoboHelp screen profiles and layouts. I tried importing the new layout, but it's looking for a .SLZ file and the only one in the files that came with the ZIP file is SLZConfig.xml, and I don't think that's what I need, though quite honestly, I don't know.

I extracted the contents of the ZIP folder to a folder in the !ScreenLayout! folder within the RoboHelp project, but when I open the project, I don't see Theme3_Black as an option. I need to figure out how to import this screen layout because the color scheme matches the one used in the program for which I am writing the help. How do I import and apply this other screen layout???

Any tips, tricks, or guidance on any or all of these items would be GREATLY appreciated.

Thanks much in advance,

Dave

This topic has been closed for replies.

1 reply

Willam van Weelden
Inspiring
November 20, 2014
  1. There are two options:
    1. Use the HTML5 editor and remove the logo from the HTML code.
    2. Create a transparent image of 1x1 and use that for the logo. It's still there, but invisible.
  2. Look at the Title Mobile section in the layout. You can set the color and font there.
  3. Rename .zip to .slz and now you can import it :-) - I really don't get why it isn't presented as .slz in the first place.

Please note that the new Resonsive HTML5 layouts works only with RoboHelp 11.0.3 or later.

Kind regards,

Willam

TW97Author
Inspiring
November 21, 2014

Hi Willam,

Thanks for your feedback/answers. With these I was able to take care of the issues with the logo (actually created a small black box and used this since the header background is black in the screen layout I'm using) and with importing the alternative screen layout. However, I still haven't ben able to figure out how to make the text in the header on the screen when a topic is displayed match that in the header on the screen when the TOC, Index, Search, etc. is displayed. Following your example to "Look at the Title Mobile section" won't fix my problem. This enables me to set the font attributes for the screen or page title versus the header, and I need the latter. As noted in my original post, there appears to somehow be a different header being used when a topic is displayed versus the TOC, Index, Search, etc. and I can't figure out why. I configured the settings in the screen layout for the 'Header' component the way I want them to appear for all screens across the board. However, it only shows this way for the TOC and such, not the topics.

Do you have any ideas on why I'd be getting a different header for the topic screen versus these other screens?

Thanks Very Much!

Dave

Willam van Weelden
Inspiring
November 24, 2014

Can you please post an image of what your issue is? I'm not sure whether I understand it correctly.

Kind regards,

Willam