MiniTOC style in WebHelp output

[doc_guy]

Hey all,

I suppose this has probably been answered before, but I can't find it.

I am trying to modify how the MiniTOC appears in my WebHelp output. I found the style names I need to modify, and I set them as shown in the code block below. (I was using the Web Developer toolbar for Firefox, and I used the EDIT CSS tool to get the css styled the way I want. However, when I added these lines to my CSS file, they weren't properly applied in the output. The problem is that these settings are set in the MadCap.css file, and so my settings in the Styles.css file are being overridden by the MadCap.css file.

Any thoughts on how to either get these edits into the MadCap.css file (without forcing them into all projects)? Why can't Flare declare the MadCap.css sheet first, and let Style.css override it if I specifically tell it to???

Code: Select all

a.MiniTOC1:link
{
        color:black;
        text-decoration:underline;
}

a.MiniTOC1:visited
{
        color:black;
        text-decoration:underline;
}

a.MiniTOC2:link
{
        color:gray;
        text-decoration:underline;

}
p.MiniTOC1
{
margin-top:5px;
}
p.MiniTOC2
{

margin:0px;
margin-left:20px;
}

[LTinker68]

Specifying them in the main topic stylesheet should be fine, since the topic stylesheet is listed after the MadCap.css stylesheet when the project is compiled. Since the topic stylesheet is therefore closer to the content, its styles override any matching styles in the MadCap.css stylesheet.

Are the changes not appearing at all?

Keep in mind there is (I think) a DIV associated with the MiniTOC, too. Also, you didn't include a hover declaration for the hyperlink.

[doc_guy]

Actually, the MadCap.css file is declared AFTER Styles.css, which is my problem.

When I manually make the changes to the MadCap.css file (in the output), the MiniTOC appears fine. However, when the exact same declarations are only in the Styles.css file, they don't appear, because they are being overridden in the MadCap.css file.

[LTinker68]

That's odd. I've never had it appear the other way around. Do you have more than one topic stylesheet in your project? Did you specify the stylesheet via the target, or are you calling it through a masterpage?

[doc_guy]

That's odd. I've never had it appear the other way around. Do you have more than one topic stylesheet in your project?

Nope. Just one style sheet in my project, style.css.

Did you specify the stylesheet via the target, or are you calling it through a masterpage?

I didn't set any style sheet preferences in the master page. I just have the style in the target set to default.

This is a new project, created entirely with Flare 4.

[LTinker68]

Huh. That's a bug in v4. Or at least, in v4.1. I just realized I hadn't built a WebHelp output in v4.1 yet (can't remember if I did in v4), so I created a quick test project and lo and behold, the MadCap.css stylesheet is referenced after my topic stylesheet.

So, first, report it as a bug.

As a workaround, you can either modify the MadCap.css as an after-build modification, or you can modify the MadCap.css file in the Flare program files directory. Doing so will filter that change down to every project in v4.x, but if you use the same effect for all of them, that's not a problem. (If it is, then you'll have to do the after-build modify option).

The MadCap.css file doesn't have those MiniTOC styles listed until you add the Mini-TOC proxy to the project, so if you go with the option to modify the program files version of the file, then you'll need to manually add those styles to it.

[NorthEast]

The order in which your stylesheet and the MadCap.css stylesheet are loaded can change. Some time ago when I was using v2.5, the order in which the stylesheets were loaded changed, so that MadCap.css was loaded after my stylesheet. I've no idea why, and I played around with my master pages and various settings, but I couldn't find a way to change the order back after that.

To correct all the various style issues in MadCap.css, I stick all the fixes in an extra stylesheet that I load after MadCap.css. To get this stylesheet to load after MadCap.css, the links in my master page look like this:

Code: Select all

    <head>
        <link href="../Stylesheets/MainStylesheet.css" rel="stylesheet" type="text/css" />
    </head>
        <link href="../Stylesheets/ExtraStylesheet.css" rel="stylesheet" type="text/css" />
    <body>

You need to put the link to the extra stylesheet in between the head and body tags, and in the output it will be placed in the head section after MadCap.css. (If you include it in the head section of the master page, it will be loaded before MadCap.css in the output.) Don't ask me why, but it works.

Also, if you use this method, then don't set a master stylesheet for your target or project. If you do then it will remove the links to the extra stylesheet from the output.

Doing things this way is slightly more hassle to set up, but it does work reliably, and all your fixes are kept in one place and out of the main stylesheet. Until there's a way to change the preset styles generated in MadCap.css, having these fixes is a necessary evil.

[doc_guy]

Beautiful.

Thanks David. That is a great solution for me, since I can't get the MadCap to load first, and I have a deadline tonight.

Simple. Easy (done in the master page) and it works.

Thanks.

[doc_guy]

Brilliant. It worked. Which is exactly what I need with a deadline in 2 hours...

Plus, it helped me solve a totally unrelated problem:

I have a page layout for PDF output that has a narrower body area. My headings jut out into the side. The narrower text is easier to read and helps create white-space on the page. The headings in my print section of my style sheet have negative margins (or is it padding?) to move them left of the main document flow. This works great except when users print my help file from the WebHelp. The printer uses the @print section of the style sheet, but the printer doesn't know about my page layout that makes the body frame narrower, so it prints text across the whole page, and moves my headings off the left margin.

I pulled all my print styles into a separate style sheet and set that style sheet file to be a print-only condition. Then, in that style sheet, I used an import command to import the regular style sheet.

Now when I make changes I'll have to be careful about which style sheet I put the change in, either my print style sheet or my web style sheet (changes to web will cascade into print style sheet because of the import declaration, but will get overriden by anything in the print style sheet), but I'm okay with it because I can have my page layouts work for PDF.

I tried both builds and they both work right.

Yay!!