• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

HTML5 Responsive Help - Accessing the CSS used for publishing

Explorer ,
Feb 14, 2024 Feb 14, 2024

Copy link to clipboard

Copied

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?:

Suzanne354505080jq6_0-1707912638911.png

 

 

TOPICS
Responsive HTML5

Views

603

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 3 Correct answers

Community Expert , Feb 21, 2024 Feb 21, 2024

It sounds like you've moved too many levers at the same time.

The HTML holds the key...not the reference to the stylesheet, but the HTML (in the case of your headings) for the heading itself.

You've spent considerable time on this issue, but you may find that starting over with a new STS and default definitions will help you uniquely format your items, without the layers of CSS formatting that you've applied via default formatting and extra stylesheets, and HTML formatting that's worked its way

...

Votes

Translate

Translate
Community Expert , Feb 22, 2024 Feb 22, 2024

What's the issue...that the topic doesn't display? Check what the bookmark is looking for and what the file name is. I'm betting there is an issue with odd/unexpected characters in the fm filename

Votes

Translate

Translate
Explorer , Feb 22, 2024 Feb 22, 2024

It turns out you can't use brackets or dashes in the Headings. As soon as I removed it the topic displayed! You will both be very relieved to hear that the Help file now looks 100% how I want it. Thank you both so much for your patience with me and getting me to this very happy end point 🙂

 

Votes

Translate

Translate
Community Expert ,
Feb 14, 2024 Feb 14, 2024

Copy link to clipboard

Copied

Hi,

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

Best regards, Winfried

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 14, 2024 Feb 14, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 14, 2024 Feb 14, 2024

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 14, 2024 Feb 14, 2024

Copy link to clipboard

Copied

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 🙂  

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 14, 2024 Feb 14, 2024

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 14, 2024 Feb 14, 2024

Copy link to clipboard

Copied

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 14, 2024 Feb 14, 2024

Copy link to clipboard

Copied

Is the H2 indented like that in the FM content?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 15, 2024 Feb 15, 2024

Copy link to clipboard

Copied

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

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 15, 2024 Feb 15, 2024

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 15, 2024 Feb 15, 2024

Copy link to clipboard

Copied

Suzanne354505080jq6_0-1708004431987.png

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 15, 2024 Feb 15, 2024

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 15, 2024 Feb 15, 2024

Copy link to clipboard

Copied

When I click Edit Styles, I see this:

Suzanne354505080jq6_0-1708008584642.png

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

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 15, 2024 Feb 15, 2024

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 15, 2024 Feb 15, 2024

Copy link to clipboard

Copied

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 Heading2and 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

MattSTechCommTools_0-1708013252851.png

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.

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 15, 2024 Feb 15, 2024

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 15, 2024 Feb 15, 2024

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 15, 2024 Feb 15, 2024

Copy link to clipboard

Copied

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.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 16, 2024 Feb 16, 2024

Copy link to clipboard

Copied

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:

Suzanne354505080jq6_0-1708073746743.png

If I look in the settings, it shows:

Suzanne354505080jq6_1-1708073795786.png

and Edit H2:

Suzanne354505080jq6_2-1708073828470.png

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

Suzanne354505080jq6_3-1708073915168.png

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 16, 2024 Feb 16, 2024

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 16, 2024 Feb 16, 2024

Copy link to clipboard

Copied

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

MattSTechCommTools_0-1708100597301.png

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 19, 2024 Feb 19, 2024

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 20, 2024 Feb 20, 2024

Copy link to clipboard

Copied

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:

Suzanne354505080jq6_0-1708422235547.png


This is Heading 2:

Suzanne354505080jq6_1-1708422287020.png


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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 20, 2024 Feb 20, 2024

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 20, 2024 Feb 20, 2024

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines