CSS override file doesn't link to Responsive html5 output

In addition, if I publish from .book there are other problems, for example: the "4th level child files" appear on the same level as 3rd level files. Title numering is also wrong, however, this I know I can fix manually, but it's laborous since it has to be done to each and every document/title separately. Sometimes the HTML5 output can't also find all the pages but just says "File not found" though the path and the file name are correct. If there weren't these problems with the book, the biggest one being the leveling between 3rd and 4th level child documents, the I'd probably use .books to publish.

Thank you for your answer, however, when I am working with ditamaps, the publishing settings don't show the "Style Mapping" tab next to the "Outputs" tab. Does that mean that Style mapping is only available with .book files?

Hey!

Just tried and completed a workflow that seemed to output what you were expecting from FM2019. (however, I used a book of standard.fm files)

I begin with my project.book > publish > edit the settings for the html5 output via the .sts settings file. In the Style Mapping tab I can import a CSS using the Manage CSS button. The CSS that I used as an example was:

p.body {font-family: sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family: sans-serif;color: black; font-weight: bold;}
p.level1,p.level2,p.level3,p.level4 {font-family: sans-serif;}
p.level1 {padding-left: 2em;}
p.level2 {padding-left: 4em;}
p.level3 {padding-left: 6em;}
p.level4 {padding-left: 8em;}

With the CSS imported I can then associate it to my FM paragraph styles.

Still in the Style Mapping tab > Paragraph Styles

If I select my main body style "body" I can then open the Output Style drop menu and see my body, level1 and heading 1 styles that are from my CSS, I select the body style.

Similarly, I can select my bullet1 bullet2... classes and chose my level1 level2 etc as their output styles. I can do this same process for my headers.

In my case, I can see the styles have worked so far as the source and output differ in their indentation.

 At this point, you may also find it useful to associate your FM styles with HTML element tags using the Map to HTML Tag, as an example of this in my project I link my monospaced paragraph style to the HTML tag <code> by typing "code" into the Map to HTML tag text box.

I can then save and close the settings editor, and publish my project. If I open the output HTML files I can see that my body text is within <p class="body"> tags, as opposed to <p class="FM_body"> tag that I would see if I didn't link CSS.

My headers are also within <h#> tags, not <p class="header#">.

I can also open the project.css and see my p.level1 p.level2 styles with their padding-left:2em styling.

Hope this helps you

Cheers

Hi!

This is no satisfying answer (as often when FrameMaker is involved), but if you get crazy with it, open the folder Responsive HTML5 generated, spot the .css  file, give the same name to your file with the CSS you want to end up with, and copy-paste it in the folder - manuel override.