Questions about customizing the TopNav skin

[sdcinvan]

Hello all,

Still experimenting with the TopNav skin for an eventual release.

Forgive me if these questions have been previously asked and answered, I did make an effort to find these answers.

1. Breadcrumbs proxy
Unlike MadCap Flare's example: http://webhelp.madcapsoftware.com/flare ... _Pages.htm my breadcrumb proxy is plain text (sans links). So... just, "You are here:" and the topic title. Any idea why the topics are missing links?

2. Index proxy
The Index proxy works perfectly with the PDF target but the HTML target is just a blank page. Ideally, I wish to include an alphabetic list of all key topics. Yes, I understand that the search function may appear to make the index moot, however, sometimes a reader may find a list of topics useful when they are unsure what they are looking for.

3. Menu Proxy
I wish to display a menu proxy similar to the MadCap Flare example (the gray box to the right of each page. Are there any instructions on how to work with this?
I am encountering a few problems...the primary issue is placing it on the right side of the page and having topic content flow around it *AND* having it disappear when the screen width diminishes.
Additionally, certain topics are missing altogether. I suspect this is happening because I am using unlinked items in the HTML TOC.

HTML-Unlinked topics.png

Question: How do I create a non-page title menu (like Performance Charts) so that it will also show up in the Menu Proxy?

HTML-Unlinked topics2-html_topmenu.png

4. Hover over drop-down menu
How do I move this gray menu (seen in the above capture) down so that it doesn't partially cover the top menu?


Thanks again for your kind assistance!
Shawn

[kwag_myers]

1. Breadcrumbs proxy
...my breadcrumb proxy is plain text (sans links). So... just, "You are here:" and the topic title. Any idea why the topics are missing links?

The properties for the Breadcrumb Proxy are under MadCap|breadcrumbsProxy in the stylesheet. "You are here:" is the mc-breadcrumbs-prefix property and the number of levels (parent topics) is mc-breadcrumbs-count.

2. Index proxy
The Index proxy works perfectly with the PDF target but the HTML target is just a blank page. Ideally, I wish to include an alphabetic list of all key topics. Yes, I understand that the search function may appear to make the index moot, however, sometimes a reader may find a list of topics useful when they are unsure what they are looking for.

When you use Flare's StyleSheet Editor, make sure the Medium is set to Default. My guess is that when you set the style properties, the Medium was set to Print. The easiest way to fix this (in my opinion) is to open the CSS in NotePad (from the context menu), find the section @media print, copy the style that's working, and paste it over the style outside the @media print section (check to see if the style is already there and, if so, paste over it).

3. Menu Proxy
Question: How do I create a non-page title menu (like Performance Charts) so that it will also show up in the Menu Proxy?

The easiest way to do this is to add a blank topic and put the Mini-TOC Proxy in it. When the user clicks the Performance Charts in the TOC, they go to a page that has the subtopics listed. Not really ideal for print, but the only other way I can think of is to replace the Menu Proxy with your own menu code.

4. Hover over drop-down menu
How do I move this gray menu (seen in the above capture) down so that it doesn't partially cover the top menu?

Try the Margin properties for Menu Item in the Styles tab of the Skin Editor.

[sdcinvan]

Thank you for your great tips!

2. Index proxy
The Index proxy works perfectly with the PDF target but the HTML target is just a blank page. Ideally, I wish to include an alphabetic list of all key topics. Yes, I understand that the search function may appear to make the index moot, however, sometimes a reader may find a list of topics useful when they are unsure what they are looking for.

When you use Flare's StyleSheet Editor, make sure the Medium is set to Default. My guess is that when you set the style properties, the Medium was set to Print. The easiest way to fix this (in my opinion) is to open the CSS in NotePad (from the context menu), find the section @media print, copy the style that's working, and paste it over the style outside the @media print section (check to see if the style is already there and, if so, paste over it).

Unfortunately, anything to do with the Index proxy is located outside of any medium. So, I am still not certain about when is causing the Index proxy to appear blank with the HTML target.

3. Menu Proxy
Question: How do I create a non-page title menu (like Performance Charts) so that it will also show up in the Menu Proxy?

The easiest way to do this is to add a blank topic and put the Mini-TOC Proxy in it. When the user clicks the Performance Charts in the TOC, they go to a page that has the subtopics listed. Not really ideal for print, but the only other way I can think of is to replace the Menu Proxy with your own menu code.

Just as you suggested, I created default page (called minitocproxypage.htm) and linked those TOC headers to that page.

The page contains the following:

Code: Select all

 <body>
        <div class="minitoc" style="width: 650px;height: auto; " >
            <p class="Title_name">Chapter Content</p>
            <MadCap:miniTocProxy style="mc-toc-depth: 3;" />
            <p> </p>
        </div>
    </body>

How does the miniTocProxy determine which chapter headings to display? Now, I just see the same TOC entries for each chapter and oddly, it is showing the last pages of my document.

[UPDATE]

I ended up creating a separate page for each of the chapters. This page is exclusive to the HTML Target and includes a minitoc proxy inside a div. Like this:

Code: Select all

        <div class="minitoc" style="width: 650px;height: auto;">
            <p class="Title_name">Snapshots and Replication</p>
            <table style="width: 100%;">
                <col style="width: 75px;" />
                <col />
                <tbody>
                    <tr>
                        <td style="vertical-align: top;text-align: left;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;">
                            <p class="splash_text"><b>Topics</b>
                            </p>
                        </td>
                        <td style="vertical-align: top;mc-hyphenate: never;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;">
                            <p class="splash_text">
                                <MadCap:miniTocProxy style="mc-toc-depth: 3;" />
                            </p>
                            <p> </p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

This page is linked to the top of each chapter.

Now, how do I get the mouse display a hover-over bar over each selection in the minitoc?

4. Hover over drop-down menu
How do I move this gray menu (seen in the above capture) down so that it doesn't partially cover the top menu?

Try the Margin properties for Menu Item in the Styles tab of the Skin Editor.

It was Menu > Menu Item > Margin > Bottom = 10 px. That did the trick. Thank you.

[kwag_myers]

Index Proxy: Just to be clear, you have a page with heading and no content, correct? If so, I'm afraid I have no suggestions.

MiniTOC Proxy: The proxy adds any child topics, so if you have a chapter topic at level 1 and child topics at level 2, those child topics are included along with any level 3 topics.

As for adding hover text (tooltips), the only way I know is to use the stylesheet (and it's complicated). See if this helps: http://www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/. You should be able to use content: attr(title); if you don't want the same content for all (although I'm not sure why people do that - put the same text in the tooltip that's being hovered).