As many of you will know, MadCap Flare's HTML5 skin editor only supports the specification of images in PNG, JPG, JPEG or GIF format for the header logo's background image. This has frustrated me for some time now, so I've settled for a transparent PNG version of my application logo. But no more! Now, through a little jQuery magic, I've got the full-blown SVG logo out there, in all its glory.
Here's how you can do it, too:
- Place the SVG logo in your project's media directory (I keep mine a directory named "Media", beneath the standard "Resources" directory).
- Open your project's skin in the HTML5 Skin Editor and select the "Styles" tab.
- Under the "Header" section, expand "Logo > Background", and then specify "(default)" for the "Image" setting (the path displayed points to the default MadCap logo in the "Resources" subdirectory of the Flare installation directory, but that's okay; we're going to override it!).
- Select the "Toolbar" tab of the Skin Editor.
- Click the "Edit..." button beneath the "Custom JavaScript to include in Toolbar page" text box, and then enter the following code in the "Toolbar JavaScript" dialogue that displays:
Code: Select all
$(document).ready(function(){ $("div#header .logo").attr({style: "background-image: url('Content/Resources/Media/ApplicationLogo_UI.svg');background-position: left center;background-size: contain;width: 300px;"}); });
- Replace the "background-image" property's path and name with what's appropriate for your project.
- Adjust the "background-position" property value as needed, or omit it (the default value for this property is "center center").
- Adjust the "background-size" property value as needed, or omit it if your SVG is of the exact dimensions you require for output (the default value for this property is "auto").
- Adjust the "width" property value as needed (this controls how wide the "<h1.logo>" element is; the default value for this property is "126px", to accommodate the MadCap default logo).
- Click the "OK" button on the dialogue to close it. Your code will be displayed in the "Custom JavaScript to include in Toolbar page" text box.
- Save changes to the skin and generate output!