Header information missing in responsive HTML5 output after RoboHelp upgrade

검색

마지막 업데이트 날짜 2022년 2월 10일 | 다음에도 적용됨 RoboHelp (2015 release)

With RoboHelp (2017 release), a lot of existing users reported issues about missing header information from their RoboHelp (2015 release) projects. Whenever you generate responsive HTML5 output from RoboHelp 2017 for a project that was created in 2015, the header information is not maintained. The following screenshot shows the responsive HTML5 output generated from RoboHelp 2017 for a project that was created in RoboHelp 2015:

before — Responsive HTML5 output created without upgrading the layout

In the above screenshot, the following things from the header are either missing or not as defined in the project:

A. The project’s logo
B. Title color and font family
C. Background color
D. Navigation string (to open project’s layout)

Using the fix given in this article, you will be able to correct the missing or incorrect information from the header of your responsive HTML5 output.

Open usersettings.js file of your project in an editor. The default location of usersettings.js file is:

<project-folder>\!ScreenLayout!\<layout-name>
In the variable declaration section of this file, add the following four variables:
var titleColor = "#ffffff";
var backgroundColor = "#509de6";
var logo = "logo.png";
var fontFamily = "\"Trebuchet MS\", Arial, sans-serif";
The titleColor and fontFamily define the font color and family for the title used in the header (highlighted as ‘B’ in the above screenshot). backgroundColor is used to define the background color for the top header (C in screenshot). logo is used to define the project’s logo (A in screenshot).

참고:

You may choose to provide the actual values as per your project’s theme, or use these default values. The default values for these variables are overwritten by the actual values at the time of publishing the project.
Save the changes made in the usersettings.js file and close the file.
Open MasterThemeSchema.xml file of your project in an editor. The default location of MasterThemeSchema.xml file is:
<project-folder>\!ScreenLayout!\<layout-name>
In the MasterThemeSchema.xml file, make the following changes:

a. Look for the variable name head_titlecolor, and add the following code in the sources element definition:

<source filename="usersettings.js" variable="titleColor"></source>

b. Look for the variable name head_logo, and add the following code after the <allowedvalues/> element definition:

<sources>
<source filename="usersettings.js" variable="logo"></source>
</sources>

c. Look for the variable name head_bgcolor, and add the following code in the sources element definition:

<source filename="usersettings.js" variable="backgroundColor"></source>

d. Look for the variable name us_font, and add the following code in the sources element definition:

<source filename="usersettings.js" variable="fontFamily"></source>
Save the changes made in the MasterThemeSchema.xml file and close the file.
Open RoboHHRE.lng file of your project in an editor. The default location of RoboHHRE.lng file is:
<project-folder>\!Language!\<locale-folder>

참고:

The RoboHHRE.lng file contains the definition for the navigation string (highlighted as ‘D’ in the above screenshot). You must update the navigation string definition in all locale folders created for your project.
Look for the ResponsiveHelp section and add the following code before the </section> tag:

<element name="ShowTopicInContext" value="Click here to see this page in full context"></element>

참고:

You can change the default value for the ShowTopicInContext element as per your project’s requirements.
Save the changes made in the RoboHHRE.lng file and close the file.
Open the RoboHelp (2015 release) project file in RoboHelp (2017 release) and regenerate responsive HTML5 output.

The following screenshot shows the output generated after applying the fixes:

Responsive HTML5 output created after upgrading the layout