Skip to main content
Inspiring
April 9, 2015
Question

How Do I Use a SINGLE Custom CSS for My Project?

  • April 9, 2015
  • 1 reply
  • 715 views

How do I set a single CSS for a project?

Currently, I have linked (I checked, they are actually linked) FM files. The project is Responsive HTML 5 Single Source Layout. It is set up this way:

Project Files

Each FM file has a folder that contains a CSS, an FPJ, any baggage (PNG, for example) and an HTM.

So, for my project, I have 31 such folders.

Above them is RHStyleMapping.css.

That's it

To map my project to a custom CSS, I did this:

1) Created the custom CSS (let's call it TheSingleCSS-sb01.css) and put it in the same location as RHStyleMapping.css.

2) Right-clicked Responsive HTML5 (Primary Layout) in the Single Source Layouts pane.

3) Selected Properties. The Responsive HTML5 Properties dialog box opens.

4) Click Content, select  the Apply to all Topics check box, select CSS, and choose my CSS, TheSingleCSS-sb01.css.

5) Click Save and Generate. Generating happens.

6) When prompted, click View Result.

7) Double-click one of the resulting topics, and choose the HTML tab.

😎 Notice the following CSS files are referenced, NOT the one I want:

<link rel="stylesheet" href="Configuration_ChangeWorkflow.css" type="text/css" />

<link rel="stylesheet" href="..\..\RHStyleMapping.css" type="text/css" />

<image>

So:

1) How can I replace 32 individual CSSes with one single custom CSS?

2) Also note that Project Manager does not display my custom CSS, even though it is in the same location as RHStyleMapping.css and referenced in the Properties dialog box.

Thanks all,

Sean

This topic has been closed for replies.

1 reply

Seanb_usAuthor
Inspiring
April 9, 2015

Am using TCS 5, RH 11, FM 12, all patched up.

Jeff_Coatsworth
Community Expert
Community Expert
April 13, 2015

Use the “Apply to All” option in the Single Source Layout definition/recipe when generating your help. That’s the easiest way to make all topics use the one CSS (that you’ve played with and made choices already on how stuff should appear)

Seanb_usAuthor
Inspiring
April 14, 2015

Hi, so as I mentioned before, I have used Apply to all and this doesn't work. The resulting HTML still uses a specific CSS for that one HTML file.

1) I put the CSS I want to use, Sean01.css, in the top level of my project using Windows Explorer.

2) I Save and Generate.

3) But, my settings for styles in the CSS are not used. For example, FM_GlossaryDefinition is defined with a 0 left indent but actually uses a 144pt indent (that mirrors the print FM document and that I do not want).

4) And, you can see from the actual HTML, that the Sean01.css file that I applied to all topics (see the first image) is not referenced. What am I doing wrong?

What am I doing wrong? Again, these are imported FM files; this is not linked.

Thanks,

Sean