Styling the default concepts link popup in Flare

Some of the items on the Flare user interface can be tricky to style. While pretty much everything can be styled with css in Flare, it sometimes takes some digging to understand exactly what properties in the Flare stylesheet need to be edited in order to show up like you want in your output.

The reason these elements can be hard to style is because there isn’t a clean mapping from the styles in the output to the stylesheet elements in Flare, so using a browser’s developer tools doesn’t help much.

The concepts links popup window in Flare HTML5 help is one of those elements. By default, here is what the popup window looks like:

Default concepts link list in Flare

Default concepts link list in Flare

I read a post in the Flare forums where someone wanted to style this popup window to look more like a standard windows popup, but he was stuck in trying to find the styles he needed to edit in Flare. I decided I’d jump in a give him a hand.

The styles that drive the concepts link popup in Flare are MadCap | helpControlMenu and MadCap | helpControlMenuItem. I tinkered around with those styles a bit, and by adding the following to my stylesheet, I was a able to reproduce a style that looks much more like a standard Microsoft interface:

MadCap|helpControlMenu
{
 background-color: #ffffff;
 -webkit-border-radius: 0px;
 -moz-border-radius: 0px;
 border-radius: 0px;
 border: solid 1px #f7f7f7;
 border-left-width: 20px;
}

MadCap|helpControlMenuItem
{
 font-size: 9pt;
 line-height: 10pt;
}

MadCap|helpControlMenuItem.Highlighted
{
 color: #000000;
 font-size: 9pt;
 padding: 4px;
 background-color: #c4e1ff;
 border: solid 1px #3399ff;
}

Here is an image of what the end result looked like in my output:

Updated concepts links

Updated concepts links

Leave a Reply

Your email address will not be published. Required fields are marked *