HTML5 Responsive Help - Accessing the CSS used for publishing

[Suzanne354505080jq6]

I need to make some modifications to my Help file's sts file, but when I open it in Notepad it isn't readable. Any ideas how to resolve please?:

[Winfried Reng]

Hi,

The sts file is just a zip file. Rename the file name extension to zip and then open it.

Best regards, Winfried

[Suzanne354505080jq6]

Hi Winifried

Thank you so much for your suggestion, but unfortunately I couldn't get that to work. 

I compressed the .sts to zip file, but extracting the file did nothing.

[Jeff_Coatsworth]

Make a copy of it & rename the copy to .zip - then you can extract the contents to edit them.

[Suzanne354505080jq6]

Oh, I now have a lot of different files! I have a heading style I want to change, as it keeps indenting and I don't like the font. Do you happen to know which of the files I should use?
Thank you 🙂  

[Jeff_Coatsworth]

That would be in a CSS file I think - but why don't you just edit it inside FM?

[Suzanne354505080jq6]

In Framemaker, my headings are all left-aligned, but they're indented in the TOC, to make a hierarchy.  eg:

H1

  H2
     H3

When the Help is created, I have found that this means that only H1s are displayed, in the Contents and you have to expand the view to see Headings 2 and 3, which is great. However, in the body/content, those heading are indented, so it looks like this, which just looks awful!:
         H2
Body text
I was hoping there was a style I could modify in the CSS to change this, as nothing else seems to work!

[Jeff_Coatsworth]

Is the H2 indented like that in the FM content?

[Suzanne354505080jq6]

Hi Jeff
No, everything is left aligned in the FrameMaker view/content. 

[Jeff_Coatsworth]

What does your mapping show in the Publish panel for that output?

[Suzanne354505080jq6]

[Jeff_Coatsworth]

And what is set for the style if you select "Edit Style"?

and btw, what's going on with that dialog's display? It looks like all the fields are piled up on each other - are you mapping it to some HTML tag too?

[Suzanne354505080jq6]

When I click Edit Styles, I see this:

Which is not what's displayed!
Thanks for all your help, much appreciated

[Jeff_Coatsworth]

It's not using that font? What have you got set for the positioning?

[Matt-Tech Comm Tools]

Hi Suzanne,

It's hard to see what's happening, since the dialog is crowding your options, but...

It looks like you are mapping your Heading2 to an output style of Heading2, and mapping it to an HTML Tag of pre. 

Additionally, you are using the Split into topics based on this style option.

If you intend to split topics on your Heading2 paras, set your options like this

If you have subheads within your topic, set the Map to HTML Tag for them to h2, h3, etc.

If you'd like to directly edit the CSS (which I like to do as well), there's no need to mess with the STS file...just use the Manage CSS option to Export and then after editing, use the corresponding Import option.

If you have any questions, post a screenshot of your HTML source code from the published content.

[Suzanne354505080jq6]

Yay, that's sorted it, thank you so much. Would you mind telling me where I can change the font, colour and sizing please?

[Jeff_Coatsworth]

Either through the CSS (via the mechanism Matt mentioned) or through the Edit Styles button.

[Matt-Tech Comm Tools]

Use Manage CSS to export the file (by default, rhstylemapping.css) 

Then edit with a text editor or an app like Dreamweaver to format as you like.

If you're not versed in CSS, you can look up specific options via search/Google, or hire out the CSS work.

Once correct, use Manage CSS again to import the modified CSS.

That modified CSS will now be stored in your current STS file, and need to be changed again or imported if you create other STS.

[Suzanne354505080jq6]

I'm nearly there!!
For some reason, my H2 and H3s are in Times New Roman - yuck - I have changed and imported the saved css file, but the output still shows:

If I look in the settings, it shows:

and Edit H2:

So wrong font and colour.
In the css, it has completely different settings, so no idea where the 'master' settings are?

[Jeff_Coatsworth]

Have a look at the output HTML - what CSS is being used in it?

[Matt-Tech Comm Tools]

Your Heading2 is currently mapped to h1 so the p.Heading2 is not being called out in your output. 

You can confirm this by looking at the source code of your HTML output.

So in the CSS, you need to add a font call for h1, not for p.Heading2.

Sidenote: I don't believe your font statements are proper CSS syntax.

Here is a definition for h1 from a sample of mine

[Matt-Tech Comm Tools]

You haven't marked anything as Correct...are you still working on this?

[Suzanne354505080jq6]

Hi Matt
Sorry, I got pulled onto something else. I have modified the .css, but still not quite right! I've attached the .css so you can see what I've done to the styles, which I have then imported back into the project. 

Headings are still incorrect. This is how Heading 1 is displayed:

This is Heading 2:

No idea where the Times New Roman and black styles are coming from?!

[Jeff_Coatsworth]

What's the HTML actually referencing? Post the header of your offending topic.

[Suzanne354505080jq6]

Sorry Jeff, I don't quite understand what you mean or where to look to answer your question? All I want is my Headings 1, 2 & 3 to be in a Sans Serif font and preferrably use my corporate colour scheme, although right now, I'd settle for a decent font. I have made changes to the .css file, as per Matt's instructions (.css is attached to my response to Matt), but fonts still wrong and H2 colour is incorrect.