Add padding above and below the logo in the header ?

[TraceyYates]

My UX designer wants me to have more whitespace above and below the company logo on all the help pages, particularly between the logo and the Search bar.

I would assume this is controlled by the HTML5 - Top Navigation.flskn file, but in the WYSIWIG editor, the only vertical alignment options I see are "top," "middle," and "bottom" (no padding fields). I have tried opening the HTML5 - Top Navigation file in the text editor and adding <Property Name="PaddingTop"> with different px values, but Flare seems to ignore this.

Can anyone offer me guidance on how to get some padding/whitespace around logo in the header?

Thanks,
Tracey

[Nita Beck]

I see what you mean about the Skin Editor. Given that Flare doesn't offer any margin or padding controls for the logo itself, one option is to play around with the Search bar's settings. Another option is to make a copy of your original logo image and then edit this second logo image to have some whitepace around the logo. Then, in the Skin Editor, for the Logo settings, change the background image to the second logo image. The latter approach is probably the one I'd use. I'd also want to determine which version of the logo looks better for the tablet and mobile mediums. I might find that the original logo is better for those mediums, where space is more at a premium.

[TraceyYates]

Thanks, Nita! I will give this a try (editing the logo to add whitespace above it in the image file). I had been hoping there was some way to do it in Flare, but this will work as well.

[TraceyYates]

Update: While working on something else entirely, I tripped over the solution to the problem. I thought I would share it with the forum in case anyone else wants to move the logo graphic down a bit.

The mistake I had been making was while in the Skin Editor, I had turned on the Highlight feature and clicked on the logo image itself, which did not have any attributes for controling its position other than vertical alignment options of "top," "middle," and "bottom."

However, if you click on the entire header while in the Skin Editor, the Padding field appears, and you can set the left, right, top, and bottom attributes. I was able to add padding to get the whitespace the UX designer wanted above the logo by moving the whole header down.

In the HTML5 - Top Navigation.flskn file, the code in the <Styles> section looks like this:

<Style
Name="Header">
<Properties>
<Property
Name="Height">122px</Property>
<Property
Name="MaxWidth">70.5em</Property>
<Property
Name="BackgroundColor">#2e3f50</Property>
<Property
Name="BackgroundGradient">vertical transparent transparent</Property>
<Property
Name="PaddingTop">50px</Property>
<Property
Name="PaddingBottom">32px</Property>
<Property
Name="PaddingLeft">1em</Property>
<Property
Name="PaddingRight">1em</Property>
</Properties>
</Style>

Maybe it's a workaround to moving the logo down (by moving the entire header down), but it achieved the end I needed. Hopefully that will help someone else down the line.