Very strange CSS issues

[SueC2009]

Hello all,
I spent quite a lot of time this weekend trying to work out what was going on with my CSS, and I'm curious to know if anyone else has had such problems.

First off, my FM project is linked to my Robohelp project, so I need to use the "Edit conversion settings for FrameMaker documents" to map my FM styles to the styles in my stylesheet. However, I don't think my issue is a FrameMaker integration issue.

Anyway, my stylesheet was not affecting my output as expected, and I made doubly-sure that the correct stylesheet was associated with my topics, so that isn't the issue.

First thing I found strange was that when I opened the RhStyleMapping.css file for a brand new project, the first line indicates "Created with Robohelp 8" - I am using RH9, so shouldn't is say Robohelp 9? Anyway, that aside.

When I map styles using the Robohelp CSS editor, my headings in the editor are named Heading 1, Heading 2, Heading 3, Heading 4 and so on. But when I open the stylesheet in Notepad, they are called h1, h2, h3, h4 etc.

Anyway I didn't notice this at first, and I edited my CSS in Notepad to set the style for a grouping

h1,h2,h3,h4,h6 {
  color: #ff0000;
{

This is when things started to go very wrong. When I went back into the Robohelp editor, my grouping appeared, but wasn't taking effect anywhere. The reason why I set the color field in Notepad instead of the CSS is because when you create a custom colour, the stylesheet sets the color to the name you indicated, for example

color: "Company specific red"

but nowhere in the stylesheet was there a definition for this "Company specific red", so the color didn't "take" (I guess this is a separate issue, but still).

Is it not possible to use both Notepad and the Robohelp CSS editor to edit the same style sheet (Not at the same time though)? At first it seemed to be working all right, and I'm pretty sure this was shown in one of the on-demand seminars (for linking RH and FM), but when I follow the same steps, my stylesheet tends to get "corrupted" and not respond (ie the styles I set don't make it into the output).

I think I have fixed my problem by creating new styles in the RH editor called h1, h2, h3, h4, etc, and I won't use the Heading 1, Heading 2, etc styles anywhere, but I'm curious to know if anyone has run into strange problems with stylesheets getting overwritten mysteriously.

thanks.

Sue

[Willam_van_Weelden]

Hi Sue,

there's nothing mysterious happening. RoboHelp is just trying to make your life easier

The headings in RoboHelp are called Heading 1, Heading 2, etc. These are just pretty names for the html elements h1, h2, etc. RoboHelp shows the pretty names to make working easier. The headings are not even paragraphs, the're headings. But you don't need to worry about that, because RoboHelp takes care of this for you.

If you open the HTML view of the topic, you will see that the headings in your document are inside tags like <h1></h1> - <h2></h2> - etc. The style sheet uses a selector to select the correct element, in this case h1, h2, etc. Using the Heading 1 in the RoboHelp style selector will create a h1 tag in the html. The css correctly targets this.

As for colour definitions, you can simply set this in RoboHelp. In CSS, you cannot use subsitute names for colours, only the colour codes themselves. You can define the names of colours in RoboHelp to make it easier for you, but this isn't saved in the css.

Grouping definitions works fine in RoboHelp. I use lots of those myself. You however have an extra layer of complexity: FM documents. When you generate/update your linked FM documents, RoboHelp creates a new style sheet for every document you link. In that new style sheet, RoboHelp adds the styles it thinks are needed. RoboHelp will show grouped definitions, but it has trouble using them in for instance the RH css editor and probably als in identifying those styles as needed in the new css. There are two solutions I can think of:

     1. Assign the original css to all topics after you generated them.

     2. Assing the colour values to single selectors instead of grouping them. RoboHelp should then copy the needed styles in the newly generated css.

I hope this explains what is happening. Please post back if I'm not clear or if you have any further questions.

Greet,

Willam

[RoboAsh]

In addition to what Willam said, one of the CSS which is invariant on FM links updated is "RhStyleMapping.css" you can always defined these kind of groups override styles in this CSS and it should always work even after FM link updates.

On more thing to add here is that there is no issue in editing the CSS by any editor until it add any additional character in it (and notepad is the safest of all the CSS editors for RoboHelp) so you can edit the CSS directly with Notepad by Right Click->View on the CSS - just one this to add here is that CSSs are not visible directly in the Project Manager until they are associated to any topic so if you want it show it up in Project Manager then you have to associate it with some topic or else you can directly go into the Project Folder and update the physical "RhStyleMapping.css" file

Hope this helps

Ashish

[SueC2009]

Thanks for the responses. I think I have finally gotten RH to play nice with my CSS, but just to be safe, I save my CSS in a separate folder after every update, just in case it gets wonky. I still had trouble with the colour yesterday. Sometimes RH would just in the string I used in the Custom color definition name directly in my CSS. I have decided to stop using an external CSS editor and have resorted to Notepad, which is fine - I'm not doing anything too fancy anyway. As well, I am not using RH's CSS editor because I find that when I use one or the other interchangeably, things do get messed up. I don't know why, but that has been my experience.

Thanks for letting me know about the Heading 1 to h1 mapping within RH; that may have been one of my problems - I was recreating "Heading" styles and "h" styles in my CSS because I wasn't sure how RH was using these.