SVG logo in header of HTML5 output!

This forum is for all Flare related Tips and Tricks.
Have a tip or trick you use while working in Flare? Share it here.
Post Reply
TheGreatAndPowerfulOz
Sr. Propeller Head
Posts: 130
Joined: Mon Apr 24, 2006 12:52 pm
Location: Glen Mills, PA

SVG logo in header of HTML5 output!

Post by TheGreatAndPowerfulOz »

Okay, MadCappers... I'm really excited to report that I've discovered a pretty easy way to insert an SVG logo in my tripane HTML5 output!

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:
  1. Place the SVG logo in your project's media directory (I keep mine a directory named "Media", beneath the standard "Resources" directory).
  2. Open your project's skin in the HTML5 Skin Editor and select the "Styles" tab.
  3. 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!).
    SkinStylesHeaderLogoBackgroundImage.png
  4. Select the "Toolbar" tab of the Skin Editor.
  5. 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;"});
    });
    1. Replace the "background-image" property's path and name with what's appropriate for your project.
    2. Adjust the "background-position" property value as needed, or omit it (the default value for this property is "center center").
    3. 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").
    4. 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).
  6. 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.
    SkinToolbarCustomJavaScript.png
  7. Save changes to the skin and generate output!
Without custom code:
DefaultLogo.png
With custom code:
SVGLogo.png
Enjoy! :P
You do not have the required permissions to view the files attached to this post.
Austin Wright

Flare 2022 r3 (18.2.8431.26678) :: TopNav HTML5 / PDF output
TheGreatAndPowerfulOz
Sr. Propeller Head
Posts: 130
Joined: Mon Apr 24, 2006 12:52 pm
Location: Glen Mills, PA

Re: SVG logo in header of HTML5 output!

Post by TheGreatAndPowerfulOz »

I've just figured out how to do this for HTML5 top navigation output, as well (which doesn't have a "Toolbar" tab in the Skin Editor).

All the same settings apply to the logo background, under the "Styles" tab of the Skin Editor, as described in my previous post about HTML5 tripane output. For top navigation output, we can just add some properties/values to a ".title-bar-section a.logo" selector in the main style sheet of the project, as follows:

Code: Select all

.title-bar-section a.logo
{
	background-color: transparent;
	background-image: url('../Images/ApplicationLogo_UI.svg');
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 250px;
}
  1. Replace the "background-image" property's path and name with what's appropriate for your project.
  2. Adjust the "background-position" property value as needed, or omit it (the default value for this property is "center center").
  3. Adjust the "background-size" property value as needed, or omit it if your SVG is of the exact dimensions you require for output.
  4. Adjust the "width" property value as needed (this controls how wide the "<a.logo>" element is.
The result in your output: Your awesome SVG logo, rather than a PNG, JPG or GIF! :D
Austin Wright

Flare 2022 r3 (18.2.8431.26678) :: TopNav HTML5 / PDF output
GerardFalla
Propeller Head
Posts: 21
Joined: Thu Aug 24, 2017 9:05 am
Location: Los Angeles, CA
Contact:

Re: SVG logo in header of HTML5 output!

Post by GerardFalla »

Thank you so much for posting this!
Gerard Falla
Tech Whirler & 3D Generalist: I do occasionally write. Really.
Flare Newbie
CADDmin Consulting
https://www.linkedin.com/in/gerard-falla-2017
https://www.behance.net/GerardFalla
djohnson
Propeller Head
Posts: 38
Joined: Tue May 24, 2011 4:23 pm

Re: SVG logo in header of HTML5 output!

Post by djohnson »

My logo just wasn't displaying in the header.

I couldn't figure out for the life of me what I was doing wrong. I was using SVGs elsewhere in my project, and my logo SVG displayed just fine in a browser. Using the Inspect tool I was able to replace the call for my header logo to use another SVG in the project.

I was ready to give up when I noticed a small red 1 with an exclamation point at the top of the inspector window. "Resource not found: header-logo.svg"

My target (Advanced tab) is set to "Exclude content not linked directly or indirectly from the target." That was the culprit.

I added this to the bottom of my master page in the code editor:

Code: Select all

<!-- The following content is never displayed, but this ensures that linked files are included in the build project -->

<div style="display: none;">
    <p><img src="../Images/header-logo.svg" /></p>
</div>
This forces the otherwise-unreferenced logo graphic to be "included" in the project, since it is linked from the target.

I could have unchecked the "Exclude content..." option, but this is an inherited project, so I'm not quite sure if that would break something else.

Nice to have our logo look good on high dpi displays!
Don Johnson
Flare 2020r3, Windows 10 in a Parallels VM on a 16" MacBook Pro [as of March 2021]
TheGreatAndPowerfulOz
Sr. Propeller Head
Posts: 130
Joined: Mon Apr 24, 2006 12:52 pm
Location: Glen Mills, PA

Re: SVG logo in header of HTML5 output!

Post by TheGreatAndPowerfulOz »

TheGreatAndPowerfulOz wrote:For top navigation output, we can just add some properties/values to a ".title-bar-section a.logo" selector in the main style sheet of the project
As with any one-off customization to a given bit of application functionality, we ought to expect that new application releases may "break" the magic we've tried to create. Such is the case with the release of Flare 2018!

It seems that structure of the "<nav>" element in top navigation output has been changed a little, such that the CSS selector we now need to target for a custom SVG logo is ".title-bar a.logo" (as opposed to ".title-bar-section a.logo"). So, our custom CSS rule set would now look something like:

Code: Select all

.title-bar a.logo
{
   background-color: transparent;
   background-image: url('../Images/ApplicationLogo_UI.svg');
   background-position: left center;
   background-repeat: no-repeat;
   background-size: contain;
   width: 250px;
}
Austin Wright

Flare 2022 r3 (18.2.8431.26678) :: TopNav HTML5 / PDF output
WDClark
Jr. Propeller Head
Posts: 8
Joined: Fri Feb 10, 2012 12:45 pm

Re: SVG logo in header of HTML5 output!

Post by WDClark »

Thanks for this - just used the snippet above to insert an SVG logo in the top toolbar.
Post Reply