HTML5 Output Query

[Stacey]

Hi There:

It looks like things have changed in the oXygen HTML5 output so that our CSS isn't rendering the menu arrows correctly. I'm wondering if someone can point me in the right direction as to what might need to be updated in template/CSS files so that these will render correctly. (This is a side menu for the document for parent/child .dita topics.)

Thanks!

currentoutput.jpg

correct.jpg

[Costin]

Hello,

Could you please let us know which specific transformation scenario are you using?
Is it the DITA Map WebHelp Responsive, or the DITA Map HTML5?

Also, we need to know which specific version of the software are you using.

Best Regards,
Costin

[Stacey]

Hi Costin:

I'm using XML Editor 24.1, build 2022041507 and it looks like it's based on WebHelp Responsive. I think the person who created it originally leveraged/adapted the Aquamarine templates (about 5 or 6 years ago) to our purposes, and they were more recently applying an overriding CSS on our website (which uses WordPress) to the output we create from oXygen.
A colleague using 23.1 said that they weren't seeing this issue with their output.

[beniamin_savu]

Hi,

In version 24 the WebHelp Responsive HTML structure has been updated and some of the CSS rules have also been updated. It is possible that the CCS rules you currently use in your WebHelp output to not match the desired nodes anymore. We suggest to verify and update the CSS rules from you publishing template according to the new HTML structure.

Please verify the CSS rules for the nodes used to display the expand/collapse widget in the publication toc.

Best regards,
Beniamin Savu
Oxygen WebHelp Team
http://www.oxygenxml.com

[chrispitude]

Hi Stacey,

If you temporarily unset your custom CSS parameter and publish, do the arrows come back?

If so, then something in your CSS might need to be updated, as Benjamin suggests. In this case, you could try using a "binary search" to narrow down the cause:

1. Publish your output (with CSS applied).
2. Open your help in a browser and confirm the problem exists..
3. Open the CSS file used by the browser in a text editor. (It is probably in your transformation output directory.)
4. Delete half of your CSS file and refresh your browser.
5. If the problem still exists, then go to step 4 and repeat.
6. If the problem disappeared, then restore the deleted half and delete the other half, refresh your browser, confirm that the problem has returned, and go to step 4.

The idea is to keep successively deleting parts of your CSS file, refreshing your browser along the way, and delete as much of it as you can while still reproducing the problem. Whatever minimal CSS you're left with at the end should point you at the problematic setting.

Also, note that we now have dedicated areas for WebHelp discussions!

Oxygen XML WebHelp - Feature Request - forum42/
Oxygen XML WebHelp - Common Problems - forum43/