Inspiring

Question

Lost multilevel CSS formatting after RoboHelp 2017 to RoboHelp 2019.12 upgrade

Forum|Forum|5 years ago
June 9, 2020
10 replies
589 views

Upgraded a project from RoboHelp 2017 to RoboHelp 2019.12 New. After the 2019 Classic to 2019 New step in the upgrade process, I lost the multilevel list formatting in my topics.

BEFORE:

1. This is my first outline level 1 step.

a. This is my first outline level 2 step.

b. This is my second outline level 2 step.

i. This is my first outline level 3 step.
ii. This is my second outline level 3 step.

2. This is my second outline level 1 step.

AFTER:

1. This is my first outline level 1 step.

1. This is my first outline level 2 step.

2. This is my second outline level 2 step.

1. This is my first outline level 3 step.
2. This is my second outline level 3 step.

2. This is my second outline level 1 step.

In the 2017/2019 Classic instances of my project, multilevel list CSS styles are defined for 9 levels - using rh-list (named, "Standard") with 9 x-lvl params. In the 2019 New upgraded instance of my project, RoboHelp converted/replaced the rh-list.Standard (presumably to make it "true" HTML5/CSS3 compliant) in my CSS with a bunch of new ol.Standard styles for each level. I've included the relevant CSS from 2017/2019 Classic and 2019 New below.

I've also included mockups of what the HTML code for a multilevel list in a topic looks like at each step of the upgrade process below. By comparing the "before" and "after" HTML in one of the topics, it looks like the upgrade changed ol style="<name of my CSS outline level>" to simply ol class="p" for ALL my steps, regardless of level.

Is there a simple or automated way to restore the correct multilevel formatting for all my topics in 2019 New - either via the upgraded CSS or before the upgrade (for example, run multiple find and replace processes for each of the 9 levels to prep the topics, assuming that can be done without mucking up the restart/continue numbering instances that already exist in the topics. Ugh.).

ROBOHELP 2017/2019 CLASSIC

CSS

rh-list.Standard {
x-lvl-2-type: lower-alpha;
x-lvl-3-type: lower-roman;
x-lvl-8-type: lower-alpha;
x-lvl-8-margin: 140px;
x-lvl-7-format: "<x>.";
x-lvl-7-margin: 120px;
x-lvl-9-type: lower-roman;
x-lvl-9-margin: 160px;
x-lvl-1-format: "<x>.";
x-lvl-2-format: "<x>.";
x-lvl-3-format: "<x>.";
x-lvl-4-type: disc;
x-lvl-4-format: "<x>";
x-lvl-5-type: circle;
x-lvl-5-format: "<x>";
x-lvl-6-type: square;
x-lvl-6-format: "<x>";
x-lvl-1-margin: 40px;
x-lvl-1-text-indent: -20px;
x-lvl-1-p-tag: p;
x-lvl-2-margin: 60px;
x-lvl-2-text-indent: -20px;
x-lvl-2-p-tag: p;
x-lvl-3-margin: 80px;
x-lvl-3-text-indent: -20px;
x-lvl-3-p-tag: p;
x-lvl-4-margin: 100px;
x-lvl-4-text-indent: -20px;
x-lvl-4-p-tag: p;
x-lvl-5-margin: 120px;
x-lvl-5-text-indent: -20px;
x-lvl-5-p-tag: p;
x-level-count: 9;
x-lvl-6-margin: 140px;
x-lvl-6-text-indent: -20px;
x-lvl-6-p-tag: p;
}

SAMPLE TOPIC CODE VIEW
<ol style="list-style: decimal;">
<li class="p">This is my first outline level 1 step.
<ol style="list-style: lower-alpha;">
<li class="p">This is my first outline level 2 step.</li>
<li class="p">This is my second outline level 2 step.
<ol style="list-style: lower-roman;">
<li class="p">This is my first outline level 3 step.</li>
<li class="p">This is my second outline level 3 step.</li>
</ol></li>
</ol></li>
<li class="p">This is my second outline level 1 step.

SAMPLE TOPIC WYSIWYG + GENERATED OUTPUT VIEW

1. This is my first outline level 1 step.

a. This is my first outline level 2 step.

b. This is my second outline level 2 step.

i. This is my first outline level 3 step.
ii. This is my second outline level 3 step.

2. This is my second outline level 1 step.

ROBOHELP 2019.12 NEW (After upgrading the project from RoboHelp 2019 Classic)

CSS

ol.Standard {
--prefix-size: 30.0px;
--prefix-fixed-size: 0;
--prefix-gap: 20px;
--list-indent: 40px;
--vertical-spacing: 0px;
list-style: none;
counter-reset: item1;
padding-left: var(--prefix-size);
margin-left: calc(var(--list-indent) - var(--prefix-size));
}
ol.Standard>li {
--prefix-size: 30.0px;
--prefix-fixed-size: 0;
--prefix-gap: 20px;
--list-indent: 40px;
--vertical-spacing: 0px;
position: relative;
margin-top: calc(var(--vertical-spacing) / 2);
margin-bottom: calc(var(--vertical-spacing) / 2);
}
ol.Standard>li:before {
counter-increment: item1;
content: counter(item1, decimal)".";
text-align: right;
position: absolute;
left: calc(-1 * var(--prefix-size) - var(--prefix-gap));
margin-right: var(--prefix-gap);
width: var(--prefix-size);
overflow: hidden;
}
ol.Standard>li>ol {
--prefix-size: 30.0px;
--prefix-fixed-size: 0;
--prefix-gap: 20px;
--list-indent: 20px;
--vertical-spacing: 0px;
list-style: none;
counter-reset: item2;
padding-left: var(--prefix-size);
margin-left: calc(var(--list-indent) - var(--prefix-size));
}
ol.Standard>li>ol>li {
--prefix-size: 30.0px;
--prefix-fixed-size: 0;
--prefix-gap: 20px;
--list-indent: 20px;
--vertical-spacing: 0px;
position: relative;
margin-top: calc(var(--vertical-spacing) / 2);
margin-bottom: calc(var(--vertical-spacing) / 2);
}
ol.Standard>li>ol>li:before {
counter-increment: item2;
content: counter(item2, lower-alpha)".";
text-align: right;
position: absolute;
left: calc(-1 * var(--prefix-size) - var(--prefix-gap));
margin-right: var(--prefix-gap);
width: var(--prefix-size);
overflow: hidden;
}
ol.Standard>li>ol>li>ol {
--prefix-size: 30.0px;
--prefix-fixed-size: 0;
--prefix-gap: 20px;
--list-indent: 20px;
--vertical-spacing: 0px;
list-style: none;
counter-reset: item3;
padding-left: var(--prefix-size);
margin-left: calc(var(--list-indent) - var(--prefix-size));
}
ol.Standard>li>ol>li>ol>li {
--prefix-size: 30.0px;
--prefix-fixed-size: 0;
--prefix-gap: 20px;
--list-indent: 20px;
--vertical-spacing: 0px;
position: relative;
margin-top: calc(var(--vertical-spacing) / 2);
margin-bottom: calc(var(--vertical-spacing) / 2);
}
ol.Standard>li>ol>li>ol>li:before {
counter-increment: item3;
content: counter(item3, lower-roman)".";
text-align: right;
position: absolute;
left: calc(-1 * var(--prefix-size) - var(--prefix-gap));
margin-right: var(--prefix-gap);
width: var(--prefix-size);
overflow: hidden;
}
ol.Standard>li>ol>li>ol>li>ol {
--prefix-size: 26.0px;
--prefix-fixed-size: 0;
--prefix-gap: 20px;
--list-indent: 20px;
--vertical-spacing: 0px;
list-style: disc;
padding-left: var(--prefix-size);
margin-left: calc(var(--list-indent) - var(--prefix-size));
}
ol.Standard>li>ol>li>ol>li>ol>li>ol {
--prefix-size: 26.0px;
--prefix-fixed-size: 0;
--prefix-gap: 20px;
--list-indent: 20px;
--vertical-spacing: 0px;
list-style: circle;
padding-left: var(--prefix-size);
margin-left: calc(var(--list-indent) - var(--prefix-size));
}
ol.Standard>li>ol>li>ol>li>ol>li>ol>li>ol {
--prefix-size: 26.0px;
--prefix-fixed-size: 0;
--prefix-gap: 20px;
--list-indent: 20px;
--vertical-spacing: 0px;
list-style: square;
padding-left: var(--prefix-size);
margin-left: calc(var(--list-indent) - var(--prefix-size));
}
ol.Standard>li>ol>li>ol>li>ol>li>ol>li>ol>li>ol {
--prefix-size: 30.0px;
--prefix-fixed-size: 0;
--prefix-gap: 4px;
--list-indent: -20px;
--vertical-spacing: 0px;
list-style: none;
counter-reset: item7;
padding-left: var(--prefix-size);
margin-left: calc(var(--list-indent) - var(--prefix-size));
}
ol.Standard>li>ol>li>ol>li>ol>li>ol>li>ol>li>ol>li {
--prefix-size: 30.0px;
--prefix-fixed-size: 0;
--prefix-gap: 4px;
--list-indent: -20px;
--vertical-spacing: 0px;
position: relative;
margin-top: calc(var(--vertical-spacing) / 2);
margin-bottom: calc(var(--vertical-spacing) / 2);
}
ol.Standard>li>ol>li>ol>li>ol>li>ol>li>ol>li>ol>li:before {
counter-increment: item7;
content: counter(item7, decimal)".";
text-align: right;
position: absolute;
left: calc(-1 * var(--prefix-size) - var(--prefix-gap));
margin-right: var(--prefix-gap);
width: var(--prefix-size);
overflow: hidden;
}
ol.Standard>li>ol>li>ol>li>ol>li>ol>li>ol>li>ol>li>ol {
--prefix-size: 30.0px;
--prefix-fixed-size: 0;
--prefix-gap: 4px;
--list-indent: 20px;
--vertical-spacing: 0px;
list-style: none;
counter-reset: item8;
padding-left: var(--prefix-size);
margin-left: calc(var(--list-indent) - var(--prefix-size));
}
ol.Standard>li>ol>li>ol>li>ol>li>ol>li>ol>li>ol>li>ol>li {
--prefix-size: 30.0px;
--prefix-fixed-size: 0;
--prefix-gap: 4px;
--list-indent: 20px;
--vertical-spacing: 0px;
position: relative;
margin-top: calc(var(--vertical-spacing) / 2);
margin-bottom: calc(var(--vertical-spacing) / 2);
}
ol.Standard>li>ol>li>ol>li>ol>li>ol>li>ol>li>ol>li>ol>li:before {
counter-increment: item8;
content: counter(item8, lower-alpha)".";
text-align: right;
position: absolute;
left: calc(-1 * var(--prefix-size) - var(--prefix-gap));
margin-right: var(--prefix-gap);
width: var(--prefix-size);
overflow: hidden;
}
ol.Standard>li>ol>li>ol>li>ol>li>ol>li>ol>li>ol>li>ol>li>ol {
--prefix-size: 30.0px;
--prefix-fixed-size: 0;
--prefix-gap: 4px;
--list-indent: 20px;
--vertical-spacing: 0px;
list-style: none;
counter-reset: item9;
padding-left: var(--prefix-size);
margin-left: calc(var(--list-indent) - var(--prefix-size));
}
ol.Standard>li>ol>li>ol>li>ol>li>ol>li>ol>li>ol>li>ol>li>ol>li {
--prefix-size: 30.0px;
--prefix-fixed-size: 0;
--prefix-gap: 4px;
--list-indent: 20px;
--vertical-spacing: 0px;
position: relative;
margin-top: calc(var(--vertical-spacing) / 2);
margin-bottom: calc(var(--vertical-spacing) / 2);
}
ol.Standard>li>ol>li>ol>li>ol>li>ol>li>ol>li>ol>li>ol>li>ol>li:before {
counter-increment: item9;
content: counter(item9, lower-roman)".";
text-align: right;
position: absolute;
left: calc(-1 * var(--prefix-size) - var(--prefix-gap));
margin-right: var(--prefix-gap);
width: var(--prefix-size);
overflow: hidden;
}

SAMPLE TOPIC CODE VIEW
<ol class="p">
<li class="p">
This is my first outline level 1 step.
<ol class="p">
<li class="p">
This is my first outline level 2 step.
<ol class="p">
<li class="p">
This is my second outline level 2 step.
</li>
<li class="p">
This is my first outline level 3 step.
</li>
</ol>
</li>
<li class="p">
This is my second outline level 3 step.
</li>
</ol>
</li>
<li class="p">
This is my second outline level 1 step.
<ol class="p">
<li class="p">

SAMPLE TOPIC WYSIWYG + GENERATED OUTPUT VIEW

1. This is my first outline level 1 step.

1. This is my first outline level 2 step.

2. This is my second outline level 2 step.

1. This is my first outline level 3 step.
2. This is my second outline level 3 step.

2. This is my second outline level 1 step.

New UI

This topic has been closed for replies.

Peter Grainge

Community Expert

I expect that when Adobe reach out to you, they will ask for a copy of your Classic project for testing purposes.

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

RoboFanAuthor

Inspiring

Update on our one legacy RoboHelp 2017 project that wouldn't upgrade to RoboHelp 2019 New after I installed the .13 update. My co-worker installed RoboHelp 2019.12 and was able to successfully upgrade the project.

So, something introduced in the .13 update, that wasn't present in the .12 update, prevents us from upgrading one of our projects. It's concerning, but for now, we have a workaround (use RH 2019.12 to upgrade the project).

RoboFanAuthor

Inspiring

Thank you for the link, Peter. I'm a little concerned about mucking up a different project that was originally created in RH 2019 new and is being actively developed - solely by me. Working on that project is my primary daily task. Upgrading our legacy RH 2017 projects, which are being actively developed by my co-workers, is also my responsibility, but less important at the moment. That said, I can have one of my co-workers (working on our legacy projects in RH 2017 is their current primary responsibility; they both have RH 2019 - they just aren't using it yet) install the RH 2019.12 version and attempt to upgrade the one project that's having issues. Since they aren't actively using their RH 2019 installs, I suspect they haven't been updating it regularly. Nonetheless, it'll be less of an issue for them to uninstall and reinstall it if they have.

Also, someone from Adobe's support team did reach out to me and I've given them my phone number so they can call me to work on the issue further too.

A note on the multilevel list formatting issue. Amebr's suggestion to replace the first instance of the OL class' target style does work. I'll just have to do it in every single topic. This means a very carefully crafted and planned multi-file find and replace. I've done a MFFaR on a RH project, on a similar scale, before using FAR HTML's tool with success. This one will be a little more involved - we have some multiple style sheets within a project so I'll have to make sure the new OL style I'm inserting is defined in every style sheet.

I do want to play around a little with the styles in the RH 2017 projects to see if I can update the source styles so they upgrade properly. Not confident on this as a solution, but I want to verify before moving forward with the MFFaR solution.

I will update the thread further as I have additional info to add.

Peter Grainge

Community Expert

Sorry, the missing link.

https://www.adobe.com/support/robohelp/downloads.html

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

Peter Grainge

Community Expert

Ironically Update 13 was supposed to fix some upgrade issues. I will bring this thread to Adobe's attention.

Meantime, you will need to uninstall 13 and go to this link where you can download 12.

I can't say how that will impact projects that have been opened in 13 and I can ask about that too. Can you install 12 on a different machine and test a copy of one of the upgraded projects?

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

RoboFanAuthor

Inspiring

We have approximately 12 RH2017 projects to upgrade. They exhibit the issue, even after installing the .13 update. To be clear on my end, I update the 2017 version of a project to 2019 Classic, and then upgrade the 2019 Classic version of the project to 2019 New. Unfortunately, the .13 update now prevents one of my projects from finishing/completing the Classic to New project upgrade. The upgrade appears to start just fine, but then the application (RH2019 new) just freezes. Eventually, after an hour, for example, I have to kill it via Windows Task Manager. Note that this project upgraded just fine to 2019.12 new. It's only since the .13 update that I can't upgrade it. So new questions - is there a way to rollback my RH2019 install to .12?

Peter Grainge

Community Expert

I wasn't clear. I meant upgrade from Classic to 2019 Update 13.

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

RoboFanAuthor

Inspiring

Updated RoboHelp 2019.12 to 2019.13 and attempted the upgrades again. Same result.

I've also observed the same issue in other projects that I upgraded (the multilevel lists are defined in our CSS the same) after updating from .12 to .13.

Peter Grainge

Community Expert

I don't know if it is too late but Update 13 is now available and that has some upgrade improvements. I don't know that it will fix this problem but worth a try.

Otherwise, have you looked in the CSS editor to see what the preview of the styles looks like?

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

Amebr

Community Expert

I *think* changing the class on the first ol should then format the list correctly.

SAMPLE TOPIC CODE VIEW
<ol class="Standard">
<li class="p">
This is my first outline level 1 step.

However, that would need to be done for every list. Perhaps something went wrong with the upgrade. You could create a test project with 3 or 4 topics containing lists, and try the upgrade again, to see if it converts correctly with a small sample?

A find and replace might also be possible, but you'd have to be very careful you didn't change something that shouldn't be.

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