Adding a custom logo to HTML 5 output

Longtime Flare users may not find this post terribly interesting, but occasionally I get asked for help on adding a custom logo to HTML 5 output, so I decided to write a post on it to make it easier to reference in the future.

How do I add custom text or a custom logo to Flare’s HTML 5 webhelp output?

Adding custom text in the upper-left corner of Flare’s HTML 5 webhelp output isn’t easy. In fact, it isn’t supported (but it can be done). Instead of focusing on how to hack Flare to do this, I’ll suggest that you do this using a custom logo. This is pretty simple, if you have access to a semi-decent graphics program.

Step 1: Create the logo.

Instead of using regular text, go ahead and create a logo using your standard graphics program. Keep in mind the following considerations:

• If any of your customers are using IE 6 or older, you want to save the image as a GIF file with a transparent background. If you try to use a PNG image, the “transparent” portion of your image will be rendered as black, which probably isn’t what you wanted.
• If your customers are using IE 7 or newer, you can go ahead and save the image as a PNG file with a transparent background. Depending on your industry, you may be able to look at your software requirements to give you guidance here. If you sell some cloud or web-based software and your app requires IE 7 or newer, it’s safe to say your users will be using IE 7 or newer. (Some estimates say that about 10% of web traffic in 2011 was by users of IE6.)
• If you want to use the standard HTML 5 skin, you’ll want your image to be about 60 pixels high. The width can be whatever you need.
• If you use the HTML 5 DARK skin, you probably want to use white (or another light color) for the text, as it will display better against the dark background. If you use the HTML 5 LIGHT skin, you probably want to use black (or another dark color) for the text.
• Save the image to a location in your project, generally in your Content/Images (or similar) folder. This makes it easy to find the image later, should you need it for something else.

Step 2: Edit the Skin file.

Now that you have an image created and in your project, you’re ready to actually add it to the skin file. The skin file is what determines the layout, colors, and functions of your HTML 5 output. If you want your help to look different than the standard HTML 5 output, the Skin Editor is where you want to spend some time.

In Flare*, open you project, and open the Project Organizer.

1. In the Project > Skins folder, double-click the skin you want to edit.
2. On the Styles tab, Select the Logo category, and in the Properties panel, expand the Background group.
3. In the BackgroundImage property drop-down, select [Browse for Image].
   
   
4. In the Open dialog, browse to the logo image you want to use, and double-click it.
5. Save the Skin.

Did this post leave you with questions? Did you get the effect you wanted? Let me know in the comments, below.

—

* Steps in this blog post assume you are using Flare V8. You may need to adapt these steps if you are using a different version of MadCap Flare.