Formatting TOC, Index, and Search

[phanna]

Hi there,

I'm trying to format the look of TOC, Index, and Search results in my web help output. The only part I can't figure out how to do is get rid of the stylesheet that seems to get generated when I build the ouput. I want everything to default back to my main stylesheet. Ther eason I think there is another stylesheet somewhere is that when I view source on the side Frame, the styles are different than in my project stylesheet for the same styles.

If anyone has any ideas I'd really appreciate it.

Cheers,
P

[LTinker68]

Your main stylesheet (Styles.css by default) is used to control the styles in the topics only. When you generate WebHelp output, Flare creates a supporting stylesheet called MadCap.css, and it's stored in the \Content\SkinSupport folder of the output. When you look at the code for a topic in the output, you'll see the MadCap.css stylesheet is being called before your stylesheet (unless you have v4, where they inexplicably changed the order).

The MadCap.css stylesheet contains all the styles for the advanced topic effects (drop-downs, togglers, etc.), if you haven't specified something for them in your own stylesheet. I believe it also contains the styles for the skin, or else those changes are reflected in the generated Javascript files. And you may add a style to your stylesheet thinking it will change the skin, but when you view the generated output, there may be a DIV or other container tag placed around what you're trying to control and styles in the DIV are controlling the output, so you need to add styles for that DIV to your stylesheet.

It's kind of complex, or perhaps scattered would be a better description. What exactly are you trying to do? It could be that you have to modify a Javascript file directly and not go through the CSS at all. If you write what you're trying to do, we may be able to direct you to what you have to modify.

[NorthEast]

That's true for topics, but the contents/index/search panes do not use your stylesheet (or MadCap.css).

To change styles used in the contents/index/search panes you need to use the skin editor; although that still doesn't let you change everything.

[phanna]

Hi Lisa,

Thanks for your explanation - it's helpful for me to understand what happens when I publish.

Okay, what I am trying to do is change the formatting of the items I have circles in the attached screenshots. the skin editor doesn't seem to have options for these items. When I view the source on that frame it shows that the formatting is being set to something different than my styelsheet for the project.

sourceview.jpg

indexformat.jpg

[phanna]

Oh, I realizerd I didn't tell you what I'm trying to edit.

For the TOC, I'm trying to do the following:
• increase the space between the chevron and the text
• Have the green entries be underlined
• Change the hover colour so it's not red

For the Index, I'm trying to change the colour of the text and the hover colour.

Thanks!
Paula

[NorthEast]

Just to be clear on this, Lisa's description is applicable only to topics - your stylesheet has no effect whatsoever on the styles used in the TOC, index or search panes.

For styles that you can't change in the skin, there are some published workarounds, but it'll mean manually editing of one of Flare's files.
For example, to change the hover colour see:
http://kb.madcapsoftware.com/Default_CSH.htm#OUTW1018F (think this method also applies to the index js file)

[phanna]

Oh I see, darn...Okay thanks David I'll have a look at the kbase for workarounds.

Cheers!
Paula

[phanna]

hi David,

I followed the instructions in that kbase and nothingchanged. My hover colour is still red and when I view source on that frame it says that it's still red:
a:hover
{
color: #ff0000;
text-decoration: none;
}
But the colour in MadCaptoc.js is now #FF8C00 (dark orange)
Any ideas?
Cheers,
Paula

[NorthEast]

Actually, for the chevron; if you can't change the spacing, you could just add some transparent space on the right of the image(s).

[NorthEast]

hi David,

I followed the instructions in that kbase and nothingchanged. My hover colour is still red and when I view source on that frame it says that it's still red:
a:hover
{
color: #ff0000;
text-decoration: none;
}
But the colour in MadCaptoc.js is now #FF8C00 (dark orange)
Any ideas?
Cheers,
Paula

Off home now, but think this may be because the JS files changed in v5 (depending on whether you have them combined or not).
This may help: http://forums.madcapsoftware.com/viewto ... f=6&t=9298

[phanna]

Ah yes the new file worked. Thanks!!!!

[phanna]

I spoke a tad too soon. It did work however, when I upload the published files to our website, the red colour comes back! Any ideas on that?

Thanks,
Paula

[NorthEast]

I spoke a tad too soon. It did work however, when I upload the published files to our website, the red colour comes back! Any ideas on that?

Thanks,
Paula

If it works locally but not on your website, that suggests the online file wasn't updated, or you just need to clear your browser cache.

[phanna]

Ah yes you were correct. The file didn't upload but once it did my TOC looked as I wanted it too. The index however, remains an issue. It seems that the MadCapAll.js file only changes the TOC settings. Is there possibly another file for the Index?

Many thanks!
Paula