December 5th, 2009
After several months away from Madcap Flare, coming back to work on it again, I’m reminded that one of the reasons I like this technical authoring tool is that it uses standard XHTML. So, if you’re using Flare to produce online help, you can modify your pages just like you could any Web page. So, for example, because I don’t like Flare’s default (text-only) glossary popups, I’ve replaced those with my own variety that allow text formatting and images, and can be dragged around the screen. And because I don’t have the budget for Madcap’s Feedback Server, I’ve hooked our help system up to a MySQL database, using AJAX and PHP, to give some of the same functionality. All good stuff and it’s great to have the freedom to do that kind of customisation.
And with formatting and styling it’s pretty much the same story. By using CSS, you have a high degree of control over the look and feel of your output. For example, I’m working on a WebHelp system right now and it’s been fairly straightforward to get most of the output looking more or less how I want it to look. The simple things like changing the background colours, the fonts, the icons, and so on are easily done from within the Flare application. And there are other things you can achieve by using Javascript to inject a CSS file dynamically on page load, if you want to override things in the Flare stylesheets that are injected into your output files at build time.
However, I’m painfully reminded, working with Flare again today, that one of the reasons I’m not 100% of a Flare fan is that Madcap fell short of making the styling of output 100% configurable via stylesheets.
Things like the Related Topics popups rely on Javascript, triggered by an onClick event, to add elements to the topic. This is perfectly standard, but whoever coded this decided in their wisdom to embed style information directly into those HTML elements, rather than giving everything a class name and controlling the styles from a stylesheet. In the hierarchical system that is CSS, nothing gets to overrule styles applied directly within the style attribute of an element in the HTML, so if the coder coded:
color="black"
then you you can have any colour you want, as long as it’s black – that is, you don’t get to modify the colour in your stylesheet to something more subtle, you’re stuck with the coder’s idea of what looks best for your output.
So my particular example today was that I was trying to beautify the Related Topics popup a little. Here’s what it looks like out of the box:

And I managed to modify most of it. But I just couldn’t get at that close button. It’s added directly by the Javascript. If it was in a Madcap CSS file – for example, as the background image on a div – then I could have overridden it with my own close button. But in the end I thought: sod it, if I can’t replace it I’ll just remove it. So here’s what I ended up with: 
I know I’m biased, but I think it’s a big improvement. A little close button would have been nice, but I think most users know, or will quickly work out, that clicking away from the popup box makes it go away.
To style this up I used the following Javascript to add an override CSS file, which allows me to get at some of those hard-to-read Madcap styles:
$(document).ready(function(){
...
//Append a link to the CSS file
var newCSSlink=document.createElement('link');
newCSSlink.setAttribute("href","Resources/StyleSheets/MCstylesOverrider.css");
newCSSlink.setAttribute("rel","stylesheet");
newCSSlink.setAttribute("type", "text/css");
headElement = document.getElementsByTagName("head")[0];
headElement.appendChild(newCSSlink);
...
});
This first line of the above code gives away that I’m using jQuery as an easy way to select and modify elements in the HTML. This just requires an extra Javascript file reference in the head of each page. If you use Javascript and you’re not familiar with jQuery, I’d strongly advise you have a look at it now!
Within my MCstylesOverrider.css file, the bit of CSS that removes the div containing the close button is:
div.MCKLinkBody div
{
display: none;
}
Flare presents you with the old 80:20 rule. To get to a state where you’d be happy with the styling and behaviour of everything, you’d spend 20% of your time and effort getting 80% there, and then you’d spend the remaining 80% of the time finishing things off. For us pernickety perfectionists, Madcap could have made life a whole lot easier by making everything accessible and easy to change.
Message to software developers: when it comes to look and feel, less of the hard coding – please!
Potentially similar posts
January 30th, 2010 at 9:25 pm (#)
Great tips, I had a crash which corrupted an HTML file...this should fix the slow mo too! (Replace the body tag with a div tag of an open file when it crashed.)
Love you articles and pod casts. Found you via Twitter on one of MadCap MIke's tweets. I'm a newbie to Flare so scouring the web for any tips.
January 30th, 2010 at 10:24 pm (#)
Thanks for the feedback Deb - especially how you found my site. My Google ranking is so low I'm sometimes amazed anyone find me! I didn't know Mike Hamilton was tweeting. I'll go follow him now.
Thanks again
All the best
Alistair