Did you know that there is a way to convert the TOC in Flare into a regular HTML list? It is something I discovered on the MadCap Flare forums, in a post by Dave Lee. There, he explained that you can use an XML transformation to turn Flare’s regular TOC file into a bog-standard HTML UL list. If you are thinking “So what?” or “Why would I want to do that?”, let me tell you why converting the TOC is good news – once you have your TOC in a list form, you can easily make it into a cool, modern-looking CSS menu. Don’t believe me? Take a look at the screenshot below. It is from a project I have as a work-in progress, and it uses a converted TOC in place of the regular TOC. It looks and works great, and it doesn’t need any post-build modifications. Once you have converted the TOC, you just set up your master page and CSS, build the help, and your sexy menu is right there.

Flare TOC converted into CSS Menu

 

In the project above, the black menu bar replaces the TOC, and level 2 and 3 TOC links appear as pop-up boxes that appear to the right of the menus, over the top of the topic. There are many other CSS menu styles you can create, including ones with drop-down sections for level 2 and level 3 toc entries.

There are a couple of issues I have not solved just yet, but they don’t affect how the menu works. The first is that the menu ‘side bar’ does not automatically fill the full height of the window. I think the way around this is to add an oversized background – it is on my ‘To Do’ list. The other issue is how to format the header and search bar better (I’ve cut them off post-build for the screenshot). This can be done using JQuery and Javascript, I believe, which is something else I need to look into. If you already know how to do it, please share your wisdom in the comments at the bottom of the page. Or just post share-selling spam messages and links to get-rich-quick schemes, like my other visitors (you know who you are).

 

Converting the Flare TOC into HTML

I’m not going to get into the nitty-gritty of converting the TOC into HTML, because Dave Lee’s blog covers that very well and I don’t want to steal any of his thunder…I’m just making it a bit easier for people. Instead, I’m presenting a little application that a friend of mine created. It is available to download below, and it makes all of the complicated-sounding command line entry stuff that Dave Lee mentions a lot easier to deal with.

What you need to do:

  1. Go over to Dave Lee’s Flare blog and download the Flare project .
  2. Once you have done that, you need to take the msxml.exe file and Dave’s XSLT file from his project and put them somewhere safe.
  3. Download the Flare TOC Converter tool my mate created using the link below (Windows only).

    http://www.straygoat-technicalauthor.co.uk/FlareTesting/TOC_Converter.exe 

    CAUTION!!! This is untested software created and shared for free, with no support. If you use it, it is at your own risk and StrayGoat Writing Services Ltd. accepts no liability. I’ve used it and had no problems, but you have been warned.

  4. Run the Flare TOC Converter.
  5. Set the MSXML Directory field to point at the msxml.exe file from Dave’s site.
  6. Set the XSLT File field to point at the xslt file from Dave’s site.
  7. Set the TOC File to point at the Flare TOC file from your Flare project.
  8. Set the Output File to the location where your HTML list will be saved. This can be anywhere you like, but remember where it is!
  9. Select the Transform TOC to HTML button.
  10. In Flare, create a snippet file and add the content of your HTML list file to it.
  11. Add a DIV to your master page and then insert the snippet file into the DIV. The menu will appear in the DIV, so use CSS to define the position etc.
  12. Use a CSS style sheet to define the formatting for your menu/toc navigation. I generally use a free, pure CSS menu creator from the ‘net (there are loads to choose from). I tend to call my styles ‘CSSMenu’ and I add them to the bottom of the stylesheet for the project (although you could add them in separate style sheets and reference them if you wanted). I will include the styles I have used in the screenshot at the bottom of this page.
  13. Open your menu snippet in Flare’s text editor and make sure the DIV above the list has id=”the name of your CSS style for the div”. For example, in my project, it is div id=”CSSMenu”.
  14. Edit the skin file in Flare and disable all of the Features on the General tab. You’re trying to ditch the old TOC, so you don’t want that part of the skin to be included.
  15. Build your project and you should see a help that uses a css menu instead of the toc.

The styles I used for the menus are below:

#cssmenu
{
width: 100%;
background: #333333;
font-family: Arial, sans-serif;
zoom: 1;
font-size: 12px;
float: left;
min-height: 100%;
}

#cssmenu:before
{
content: ”;
display: block;
}

#cssmenu:after
{
content: ”;
display: table;
clear: both;
}

#cssmenu a
{
display: block;
padding: 15px 20px;
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
}

#cssmenu > ul
{
width: 100%;
height: 100%;
}

#cssmenu ul ul
{
width: 100%;
}

#cssmenu > ul > li > a
{
border-right: 4px solid #ce0214;
color: #ffffff;
}

#cssmenu > ul > li.active a
{
background: #ce0214;
}

#cssmenu > ul > li a:hover,
#cssmenu > ul > li:hover a
{
background: #ce0214;
}

#cssmenu li
{
position: relative;
}

#cssmenu ul li.has-sub > a:after
{
content: ‘+’;
position: absolute;
top: 50%;
right: 15px;
margin-top: -6px;
}

#cssmenu ul ul li.first
{
-webkit-border-radius: 0 3px 0 0;
-moz-border-radius: 0 3px 0 0;
border-radius: 0 3px 0 0;
}

#cssmenu ul ul li.last
{
-webkit-border-radius: 0 0 3px 0;
-moz-border-radius: 0 0 3px 0;
border-radius: 0 0 3px 0;
border-bottom: 0;
}

#cssmenu ul ul
{
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}

#cssmenu ul ul
{
border: 1px solid #9b020f;
}

#cssmenu ul ul a
{
font-size: 12px;
color: #ffffff;
}

#cssmenu ul ul li
{
border-bottom: 1px solid #9b020f;
}

#cssmenu ul ul li:hover > a
{
background: #fd061c;
color: #ffffff;
}

#cssmenu.align-right > ul > li > a
{
border-left: 4px solid #ce0214;
border-right: none;
}

#cssmenu.align-right
{
float: right;
}

#cssmenu.align-right li
{
text-align: right;
}

#cssmenu.align-right ul li.has-sub > a:before
{
content: ‘+’;
position: absolute;
top: 50%;
left: 15px;
margin-top: -6px;
}

#cssmenu.align-right ul li.has-sub > a:after
{
content: none;
}

#cssmenu.align-right ul ul
{
visibility: hidden;
position: absolute;
top: 0;
left: -100%;
z-index: 598;
width: 100%;
}

#cssmenu.align-right ul ul li.first
{
-webkit-border-radius: 3px 0 0 0;
-moz-border-radius: 3px 0 0 0;
border-radius: 3px 0 0 0;
}

#cssmenu.align-right ul ul li.last
{
-webkit-border-radius: 0 0 0 3px;
-moz-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
}

#cssmenu.align-right ul ul
{
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}