Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


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

Engaged ,
Nov 22, 2019 Nov 22, 2019

Copy link to clipboard

Copied

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. 

 

whats-wrong.png

 

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?

TOPICS
HTML5 layout, New UI, Single source layouts

Views

447

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Nov 23, 2019 Nov 23, 2019

Copy link to clipboard

Copied

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

Please use the Blue reply button at the top. It helps keep posts in order.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Nov 24, 2019 Nov 24, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Nov 25, 2019 Nov 25, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Nov 26, 2019 Nov 26, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Nov 26, 2019 Nov 26, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Nov 26, 2019 Nov 26, 2019

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Nov 26, 2019 Nov 26, 2019

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Nov 26, 2019 Nov 26, 2019

Copy link to clipboard

Copied

LATEST

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.) 

 

frameless-home.png

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation