Skip to main content
A
a_David
Known Participant
August 21, 2023
Question

Robohelp messes up CSS

  • August 21, 2023
  • 5 replies
  • 343 views

Hi, 

 

Using version: 2020.8.34

 

I've noticed that Robohelp messes up my custom CSS upon generation in certain scenarios.

So I have a custom CSS file that is included in the masterpage. When editing this within Robohelp it looks good but when the generation of the project is done the CSS gets messed up.

I haven't pinpointed exactly when this happens but it looks like Robohelp have a issue with parsing CSS that contains ">" (directly nested elements).

As an example I have this CSS in my file:

 

 

table > tbody > tr:last-child > th,
table > tbody > tr:last-child > td {
    border-bottom: none;
}

 

 

Now the result of that in the generated CSS looks like this:

 

 

.RH-LAYOUT-CENTERPANEL-topic-box> tr:last-child > th, 
.RH-LAYOUT-FOOTER-container> tr:last-child > th,
.RH-LAYOUT-CENTERPANEL-topic-box> tr:last-child > td, 
.RH-LAYOUT-FOOTER-container> tr:last-child > td {
    border-bottom: none;
}

 

 

As you can see the first part "table > tbody" is simply removed from my initial CSS... And the result is a jibberish of CSS. The 4 generated rows points to classes that doesn't exists.

Please help since this casues major problems trying to style our content and I simply can't work if I can't count on what I see inside Robohelp and what I know should work but in the end ends up like a total mess. 

This topic has been closed for replies.

5 replies

A
Community Expert
AmebrCommunity Expert
Community Expert
August 23, 2023

@Jeff_Coatsworth The generate process will modify the topic css file for certain outputs and circumstances to limit the css to topics only. For example, in Multiscreen HTML5 output in Classic you could select a checkbox to limit the css to topic content, otherwise the topic css would also modify the skin components, sometimes in unwanted ways. I think all the modern frameless (as in no frame tags) layouts might do this automatically now - that's the .RH-LAYOUT-CENTERPANEL stuff you can see.

 

 

Jeff_Coatsworth
Community Expert
Jeff_CoatsworthCommunity Expert
Community Expert
August 22, 2023

I'm confused as to what you mean when you talk about "generated CSS" - I always thought all you needed to do was make a reference to an external CSS in the header of the HTML and it would take over the formatting of all elements. Are you embedding the CSS elements in your HTML (which then would get rendered into the output HTML by RH)?

Peter Grainge
Community Expert
Peter GraingeCommunity Expert
Community Expert
August 22, 2023

The table code in RoboHelp is particularly complex and i don't pretend to understand it. Some changes have been made to the code editor in 2022. I guess there's always a chance something has changed that would help here. It's free to upgrade but and you can keep both versions running. That would let you create a copy of the project to test.

 

If you want to report that as a bug, here's the link. https://tracker.adobe.com. Post the link to your bug report / feature request in this thread and others can vote for it. The more people who do so, the higher it gets prioritised.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

 

Use menu (bottom right) to mark as Best Answer or to Highlight particularly useful replies. Found the answer elsewhere? Share it here.
Peter Grainge
Community Expert
Peter GraingeCommunity Expert
Community Expert
August 21, 2023

I can't help with the actual CSS but maybe knowing this will help you. The new UI versions of RoboHelp all adhere to strict HTML5 and CSS3 rules. Sometimes the parser will tell you that it cannot parse something. That does not mean the code is breaking the rules, simply that the parser has not been written to deal with something. A bit like Microsoft's grammar checking will tell you something is wrong when you know full well it is correct.

 

Maybe you will need to write the styles individually?

 

If you know for sure your code is valid you have two options.

 

Please follow this link to report bugs or request new features. https://tracker.adobe.com. Post the link to your bug report / feature request in this thread and others can vote for it. The more people who do so, the higher it gets prioritised.

 

See https://helpx.adobe.com/contact/enterprise-support.other.html#robohelp for your Adobe Support options. The email link tcssup@adobe.com is recommended as it reaches a team dedicated to Technical Communication Suite products including RoboHelp.

________________________________________________________

My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

 

Use menu (bottom right) to mark as Best Answer or to Highlight particularly useful replies. Found the answer elsewhere? Share it here.
A
a_DavidAuthor
Known Participant
August 22, 2023

Yes it's valid CSS code. Using direct children selector (">") are useful when styling tables, especially if the tables are nested.

Take a look att this example aswell, in this case Robohelp is also messing upp my CSS but this time only the second selector, the first works. The only difference between the two is the "thead" and the "tbody", the structure is the same but I end up with a broken CSS.

Initial CSS:

.tableWrapper table > thead > tr > th:first-child,
.tableWrapper table > tbody > tr > th:first-child {
    width: 170px;
    min-width: 170px;
    max-width: 170px;
    word-break: break-word;
    box-shadow: var(--table-columnhead-box-shadow);
}

 

Generated CSS:

.RH-LAYOUT-CENTERPANEL-topic-box .tableWrapper table > thead > tr > th:first-child, 
.RH-LAYOUT-FOOTER-container .tableWrapper table > thead > tr > th:first-child,
.RH-LAYOUT-CENTERPANEL-topic-box> tr > th:first-child, 
.RH-LAYOUT-FOOTER-container> tr > th:first-child {
    width: 170px;
    min-width: 170px;
    max-width: 170px;
    word-break: break-word;
    box-shadow: var(--table-columnhead-box-shadow);
}

 

So the result is that my inital CSS works on the cells in the table "thead" but since Robohelp messes up the second selector the CSS won't be applied to the tables "tbody" cells as code is removed and whats left of it is ".RH-LAYOUT-FOOTER-container>"

A
a_DavidAuthor
Known Participant
August 21, 2023

It could also be the fact that I'm using a comma in order to assign multiple selectors with attributes, or perhaps a combination of both the ">" and comma seperated selectors. As I said I'm not sure of the pattern if there is any...

UPDATE

Got rid of one of the selector and the comma but this didn't do anything to help, still issues with Robohelp removing the start of the selectors.

I then started removing the ">" from "table >" and then on to the next and this works:

table tbody tr:last-child > th,
table tbody tr:last-child > td {
    border-bottom: none;
}

 
The generated CSS is now:

.RH-LAYOUT-CENTERPANEL-topic-box table tbody tr:last-child > th, 
.RH-LAYOUT-FOOTER-container table tbody tr:last-child > th,
.RH-LAYOUT-CENTERPANEL-topic-box table tbody tr:last-child > td, 
.RH-LAYOUT-FOOTER-container table tbody tr:last-child > td {
    border-bottom: none;
}


So it might be an issue with multiple ">" in the same selector.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices