I am publishing a large FrameMaker 2019 book as Responsive HTML5 using the Indigo skin. I want to make some changes to the template, but cannot figure out where to make the changes. I want to change: The "Welcome to Our Help Center" headerThe "What can we help you with today?" subheadChoose different icons for each of the topicsUpdate the copyright notice at the bottom I have RoboHelp 2019, but want to try and make it work to publish directly from FM if at all possible. Converting from FM to RH and then publishing would be a monumental headache, especially since I am not the only person who edits this document.

J

johnofackabode

Known Participant

Answered

FM 2019 Publish Responsive HTML5 Indigo Skin

Forum|Forum|4 years ago
May 26, 2021
9 replies
2664 views

I am publishing a large FrameMaker 2019 book as Responsive HTML5 using the Indigo skin.

I want to make some changes to the template, but cannot figure out where to make the changes.

I want to change:

The "Welcome to Our Help Center" header
The "What can we help you with today?" subhead
Choose different icons for each of the topics
Update the copyright notice at the bottom

I have RoboHelp 2019, but want to try and make it work to publish directly from FM if at all possible. Converting from FM to RH and then publishing would be a monumental headache, especially since I am not the only person who edits this document.

This topic has been closed for replies.

Correct answer Stefan Gentz

Here is how to customize the text:

Browse to your settings file ("Settings.sts").
Make a copy of it and rename it with .zip appended (e.g., "Settings-Custom.sts.zip").
Open the "Settings.sts.zip" with any Zip-App of your choice (e.g., 7zip, Winzip, WinRar, etc.).
In the ZIP you will find \!Language!\en_US\RoboHHRE.lng
Extract RoboHHRE.lng and open it in a text editor like Windows Notepad, Notepad++, or any professional XML Editor.

You will find the content you want to change relatively at the end:

<section name="ResponsiveHTML5">
	<!-- other strings -->
	<element name="Copyright" value="© Copyright 2017. All rights reserved."></element>
	<element name="Welcome_header" value="Welcome to our Help Center"></element>
	<element name="Welcome_text" value="What can we help you with today?"></element>
	<!-- other strings -->
</section>

You can change the text in the value attribute between the quotation marks.

Save and close the file and add it back to the zip.
Rename your new settings file from "Settings-Custom.sts.zip" to "Settings-Custom.sts"
Load the new Settings-Custom.sts file into the publish dialog.
Publish 🙂

Note, that the "preview" images shown in the Layout Customization Editor only show pixel images for illustration purposes. They will not show this changed text.

You can also find the two icons for the welcome page in this zip in folder \!ScreenLayout!\IndigoResponsive_HTML5:

theme-1-toc-book.png
theme-1-toc-book-over.png
theme-1-toc-topic.png
theme-1-toc-topic-over.png

You can replace them with your own (best, to keep the size the same). If you want to have different icons for the books, it would get more complicated (enough for a separate post).

Jeff_Coatsworth

Community Expert

Yes, but the next time you create output, you're going to lose your customizations - that's why Stefan's way is better - you fix your "factory" copy of the settings, not the output each time.

J

johnofackabodeAuthor

Known Participant

Darn it. So close. It worked the first time, but I had a typo in my edits so I re-edited the file.

When I went to republish the book through FM, it reverted . . . back to my typo-ed version.

At least I got it to stop using the default information, but now I am fighting it to make it use the new, fixed-typo version.

J

johnofackabodeAuthor

Known Participant

I FOUND IT!!!!!

In my output folder is a file called index.lng.

Within that file you can change lots of things including the header (Welcome_header), subhead (Welcome_text), and copyright date (Copyright).

Welcome_header=[Put your deired text here]
...

Welcome_text=[Put your deired text here]
...
Copyright=[Put your deired text here]

No messing with ZIP files.

Thank you everyone for your help with this.

J

johnofackabodeAuthor

Known Participant

Oops . . . *desired *desired *desired

😉

Jeff_Coatsworth

Community Expert

Make sure your copy of the settings has the modified language file in it & then create a new Responsive HTML Output (call it something slightly different) and point it at your modified .sts file. Oh, and make sure you have admin rights to be able to mess about in that location where you found the settings.sts file

J

johnofackabodeAuthor

Known Participant

Thank you. I'll give that a try.

Jeff_Coatsworth

Community Expert

I would suggest unzipping the renamed copy of the settings.zip - then edit within the unzipped folder, then zip it back up.

J

johnofackabodeAuthor

Known Participant

I did try that. FM still reverted it back to the original. It's like the freakin' Terminator....

Matt-Tech Comm Tools

Community Expert

If you're zipping the folder, then things will next one extra level and not be usable. Did you select all the files/folders to be zipped and then compress?

-Matt Sullivan, FrameMaker Course Creator, Author, Trainer, Consultant

Jeff_Coatsworth

Community Expert

I've got to remember that the .sts file is just a zip (like .docx) with all the goodies in it!

But really, it needs more exposing in the UI - @johnofackabode, fire up the Tracker (https://tracker.adobe.com/) to log a request for that. Post it here & let people vote for it.

S

Stefan Gentz

Correct answer

Community Manager

Here is how to customize the text:

Browse to your settings file ("Settings.sts").
Make a copy of it and rename it with .zip appended (e.g., "Settings-Custom.sts.zip").
Open the "Settings.sts.zip" with any Zip-App of your choice (e.g., 7zip, Winzip, WinRar, etc.).
In the ZIP you will find \!Language!\en_US\RoboHHRE.lng
Extract RoboHHRE.lng and open it in a text editor like Windows Notepad, Notepad++, or any professional XML Editor.

You will find the content you want to change relatively at the end:

<section name="ResponsiveHTML5">
	<!-- other strings -->
	<element name="Copyright" value="© Copyright 2017. All rights reserved."></element>
	<element name="Welcome_header" value="Welcome to our Help Center"></element>
	<element name="Welcome_text" value="What can we help you with today?"></element>
	<!-- other strings -->
</section>

You can change the text in the value attribute between the quotation marks.

Save and close the file and add it back to the zip.
Rename your new settings file from "Settings-Custom.sts.zip" to "Settings-Custom.sts"
Load the new Settings-Custom.sts file into the publish dialog.
Publish 🙂

Note, that the "preview" images shown in the Layout Customization Editor only show pixel images for illustration purposes. They will not show this changed text.

You can also find the two icons for the welcome page in this zip in folder \!ScreenLayout!\IndigoResponsive_HTML5:

theme-1-toc-book.png
theme-1-toc-book-over.png
theme-1-toc-topic.png
theme-1-toc-topic-over.png

You can replace them with your own (best, to keep the size the same). If you want to have different icons for the books, it would get more complicated (enough for a separate post).

J

johnofackabodeAuthor

Known Participant

Thank you, Stefan! Everything looks fine until I try to publish.

Every time I replace the RoboHHRE.lng file within the ZIP file, it reverts it back to the original settings. I've tried it many times now, in several different ways, and it just won't accept any edits made.

Here's what I'm doing:

01. Copy the Settings.sts file.

02. Rename the copied file to Settings-Custom.sts.zip.

03. Open the ZIP archive.

04. Edit the RoboHHRE.lng file.

05. I save the revised RoboHHRE.lng to my desktop.

06. I copy the new file from my desktop to the ZIP file. It asks if I want to replace the RoboHHRE.lng file that is already there. I click yes . . . but now there are TWO copies of the RoboHHRE.lng file.

07. I check to see which one has the edits I want and delete the other.

08. Save the ZIP file.

09. Change the name to Settings-Custom.sts and place it back in the original directory with the Settings.sts file.

10. Tell FM to use the Settings-Custom.sts file.

11. Publish.

No joy. It has reverted back to the default wording.

S

Stefan Gentz

Community Manager

06. I copy the new file from my desktop to the ZIP file. It asks if I want to replace the RoboHHRE.lng file that is already there. I click yes . . . but now there are TWO copies of the RoboHHRE.lng file.

07. I check to see which one has the edits I want and delete the other.

Maybe in one of the two steps is an error happening? If there are two copies, one probably has a name like RoboHHRE (2).lng or RoboHHRE - Copy.lng? If you delete RoboHHRE.lng and keep the newer one, make sure to also rename it back to "RoboHHRE.lng".

Jeff_Coatsworth

Community Expert

What are you seeing when you choose "Edit" there?
(haven't got a new version of FM in front of me to look for myself)

J

johnofackabodeAuthor

Known Participant

It allows me to change colors and widths and things like that, but not the areas I need to edit.

For example, here is what's under the HEADER tab:

S

Stefan Gentz

Community Manager

Just so that I understand it correctly: The screenshot you are showing from the help center … you did generate that with RoboHelp, not with FrameMaker, right?

J

johnofackabodeAuthor

Known Participant

The content came from FrameMaker. Under File > Publish > Responsive HTML5.

From here I can edit the Indigo skin.

But I can't figure out where to edit the header, subhead, icons, or copyright text.

J

johnofackabodeAuthor

Known Participant

* came from and was generated by FrameMaker

Jeff_Coatsworth

Community Expert

I can't recall if the Publish HTML5 route in FM exposed the same skin elements as you can get at in RH - have you tried creating a new set of Settings and messing around inside it?

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded