HTML5 TopNav - Index Appearance - Search Filter [SOLVED!]

[sdcinvan]

Hello all,

I am finally getting back to creating an HTML5 version of my documentation and I am having difficulties with Search filter and making the Index page work.

Search filter Icon

What is the secret to getting the search filter icon to appear in the published version of my HTML5 docs? It appears in the global glb_HTML5-TOPNAV skin editor.

2017-Search filter icon missing.png

But the filter button is missing in the published version.

Index Page

In my published PDF copy, at the end of the document, I index the index pages which are generated using the output index proxy. This works as expected in the published PDF version but when I publish the HTML5 version, this index page is blank.

Any ideas about what might be wrong?

Thank you

[Nita Beck]

Apologies in advance for being very brief.

For the search filters to work, have you added a search filter set to the project and have you added concept markers to topics? If those things are not done, the search filter icon won't appear in output, even though it is in the skin.

Re the index, I could be wrong on this, but I'm pretty sure that the output index proxy is for print targets only. I think, though, there others here on the forums have found CSS workarounds for getting it to show up in HTML5 output, and I think I even once did so(!) but I was not happy with the results. Whereas in print output, the index will show an index entry and the page locators to the pages where that term appears, in online output, the index will show an index entry and then full-text xrefs/links to topics where that term appears, which doesn't look anything like an index!

[NorthEast]

For the search filter, as Nita said you need to have a search filter set defined in the project (with at least one associated concept), and you also need to select the search Filter File on the target Advanced tab.
This is all in the help: http://webhelp.madcapsoftware.com/flare ... ilters.htm

For the index, by default MadCap|indexProxy is set to work for print targets only (mc-output-supprt: all-print; ).
So you need to change mc-output-support to all.

Code: Select all

MadCap|indexProxy
{
	mc-output-support: all;
}

[sdcinvan]

You folks are awesome!

Thank you so much!

[sdcinvan]

Hoping to avoid a lot of time experimenting... can anyone tell me how to increase the index link column width?

I did some experimenting using Firefox's Firebug and found part of the clue...
It's generated as... <td class="GenIndexPageText1"> but in the attached example (I changed only the first index entry), I just needed to add <td class="GenIndexPageText1" style="width: 200px; height: 20px;"> and that solved the issue.

2017-03-HTML Index.png

But I am uncertain about how to translate this find into a Flare's CSS edit.

Anyone?

Thank you.

[sdcinvan]

I think I have exhausted all the possible stylesheet options under MadCap|indexProxy. If changing the column width is actually possible, I suspect the edits will happen in a table class. :]

I submitted a support request. Hopefully there is a solution to this.

[Psider]

Can you manually add td.GenIndexPageText1 to your stylesheet and set the width on that?

I seem to remember I did something similar for the table of contents for a printed output a number of years ago, but I'm not using Flare at the moment.

[sdcinvan]

Can you manually add td.GenIndexPageText1 to your stylesheet and set the width on that?

I seem to remember I did something similar for the table of contents for a printed output a number of years ago, but I'm not using Flare at the moment.

Thanks for the tip but td.GenIndexPageText1 needs to be edited from another location. CORRECTION! You were right! See next message after Nita's.

Since I had not heard back from MadCap support yet, I decided to experiment some more last night and it paid off... I found the solution!

The solution is to edit, C:\Program Files\MadCap Software\MadCap Flare 13\Flare.app\Resources\WebHelp2\Desktop\Skins\Default\Stylesheets\Topic.css

And then at the end of this stylesheet, add the class:
td.GenIndexPageText1
{
width: 300px;
}

Presto... fixed.

[Nita Beck]

The solution is to edit, C:\Program Files\MadCap Software\MadCap Flare 13\Flare.app\Resources\WebHelp2\Desktop\Skins\Default\Stylesheets\Topic.css

And then at the end of this stylesheet, add the class:
td.GenIndexPageText1
{
width: 300px;
}

Presto... fixed.

My usual caveat of "I may be wrong but..." or "Perhaps I misunderstand you but...", I wouldn't advocate editing the stylesheet that is installed with Flare. Rather, I would add your bit of CSS to the stylesheet in your project. It will result in the same effect, but you won't lose it when you install an update to Flare.

[sdcinvan]

The solution is to edit, C:\Program Files\MadCap Software\MadCap Flare 13\Flare.app\Resources\WebHelp2\Desktop\Skins\Default\Stylesheets\Topic.css

And then at the end of this stylesheet, add the class:
td.GenIndexPageText1
{
width: 300px;
}

Presto... fixed.

My usual caveat of "I may be wrong but..." or "Perhaps I misunderstand you but...", I wouldn't advocate editing the stylesheet that is installed with Flare. Rather, I would add your bit of CSS to the stylesheet in your project. It will result in the same effect, but you won't lose it when you install an update to Flare.

Thanks for the suggestion Nita. That was the original approach that I attempted but applying that class to my stylesheet had absolutely no affect on the HTML output.

Okay... let me try again. I will move the edits from Topic.css into my main stylesheet. I've been experiencing a some wacky problems with Flare (and/or my brain) today... so who knows, maybe it will work.

Result: It worked! I don't understand. I swear that I tested this multiple times and each time it failed (no affect on output). I'm both and . Thanks Nita.

[Psider]

Oh. And sometimes the madcap styling overrides the project styling (something to do with the cascade, but I forget the details)*. So if it doesn't work the first time, add !important after the property that didn't 'stick' and see how that goes.

* working in an older version, so your mileage may vary

[sdcinvan]

Oh. And sometimes the madcap styling overrides the project styling (something to do with the cascade, but I forget the details)*. So if it doesn't work the first time, add !important after the property that didn't 'stick' and see how that goes.

* working in an older version, so your mileage may vary

That is an awesome tip that I had forgotten about from my web dev days. I never considered that MadCap Flare would allow the !important flag.

Thank you so much for that!

[sdcinvan]

FYI, for those not familiar with this flag, here is an example of how this flag is used:

Code: Select all

td.GenIndexPageText1
{
	font-size: 80% !important;
	color: #0543a8 !important;
	width: 400px !important;
	text-align: left !important;
	padding-left: 10px !important;
}