[data-region="topic"] prepended to each CSS style when generating RH2019 frameless output

[RoboFan]

Running RoboHelp 2019 (update 9). 

Generating Frameless output

The project's main/only style sheet is default.css. It looks and operates fine in the project. However, when compiling/generating Frameless output, none of the styles are being applied. I opened default.css in Notepad in the output folder and discovered that [data-region="topic"] is being inserted in front of each style. The default.css in the project folders does NOT have this. Screen shot below shows a comparison. 

For now, I can manually copy in the CSS file from the project over the one in the output, but obviously this isn't ideal. Thoughts on what could be causing this - and how to resolve it?

[Peter Grainge]

I am not seeing that when I used a default.css as in a new project with no modifications. Try that yourself to prove that. It won't solve the problem itself but it will suggest it is something either elsewhere in your CSS or your project.

Assuming you don't get the problem in a new test project, in your main project temporarily rename default.css and drop in the one from the test project. That will tell you whether the issue is your css file or the project.

Try that and let us know how you get on.

---

www.grainge.org

[Amebr]

There used to be a setting called something like "Limit project styles to topic", which would prepend an ID to each style, so you couldn't accidentally affect the skin styles. That attribute looks like it could be doing something similar.

Perhaps check all the settings in your output preset for something that sounds similar?

[Vivek Kumar]

It is added during Frameless output generation. Since no frame is used in this output a single HTML file is generated which combines the topic and skin content. To avoid the css/style conflict between topic and skin it is added but it should not impact any style in the topic. If you can share more details about what problem you are facing and in which browser then we can explore that.

[RoboFan]

The [data-region="topic"] tags in the generated CSS prevent those styles from being applied. The resulting text is unformatted as a result. If I edit the generated CSS file in a text editor and simply "Replace All" of those tags with nothing, and then refresh the generated help view (hit the refresh button in the web browser), the CSS styles appear correctly in the topic/webpages.

Also, if I look at/generate other projects, I can see that each style in those CSS files gets prepended instead with the following tag instead: .RH-LAYOUT-CENTERPANEL-topic-box  This is weird, but at least the topics pick up/use/reflect the correct styles in the generated output.

[RoboFan]

UPDATE. It appears something is/was broken in my Frameless output definition. I created a new one/second one and generated the help from it. Topics are showing/using/reflecting the correct styles. 

Here's a comparison of the two Frameless settings. I don't see anything that would cause a problem. I also set the new frameless output to use the same "Orange" skin used by the problematic frameless output and CSS styles worked correctly in that resulting output. 

GENERAL
<different output paths, but both are on my local machine>

CONTENT

Problem Frameless Output

• Default Topic: <file path and name of topic>
• Glossary: Default
• Glossary Style: Expanding

Test/Stock Frameless Output

• Default Topic: <blank>
• Glossary: <None>

LAYOUT

Problem Frameless Output

• Skin: Orange
• Skin Home Page Content: <file path and name of topic>

Test/Stock Frameless Output

• Skin: Select
• Skin Home Page Content: <blank>

SEARCH
N/A - all settings are identical.

PUBLISH
N/A - all settings are identical.

[RoboFan]

The problem was not the Frameless output. It's an issue with trying to hide/suppress the default TOC tiles, use the frameless home page/skin's search and search results function, and using your own topic as the "home page" content. I discovered that by removing the CSS assigned to my home page topic (which is the same CSS used for all topics in my project), the CSS worked as expected for those topics. Of course, now there's no CSS assigned to my home page so my next test will be to create and assign a one-off CSS dedicated to the home page topic. Stay tuned. 

[RoboFan]

That fixed it. I duplicated my existing/main CSS, and called it home-page.css. Assigned it to only the help topic that is my home page. Compiled. All styles and search functionality work as desired/expected. Very strange. Not sure if this is a defect or not. 

[RoboFan]

To help users better understand, this is what my home page now looks like - and what I was going for. I wanted more control over the home page than what the TOC Tiles provide, but wanted to retain the ability to use the default search function provided in the center of the top container. (Note that the image has been edited to block out company and product-specific content here for corporate privacy reasons.)