Dave Lee wrote:Just to check, when you change the image, you are adding/updating the new image in the skin editor too?
When you add a new image to the skin, it is actually embedded in the skin file (*.flskn). When you build the target, that embedded image is extracted from the skin, so it recreates the PNG/JPG file (in Skins/Fluid/Stylesheets/Images). If you check the generated image in the output, is there anything wrong with that?
By "too" do you mean there is another place to edit the logo settings besides the TopNav skin? The only "logo" entries I could find in my
Main.css was for the footer.
Code: Select all
p.FooterLogoLeft
{
text-align: left;
display: table-cell;
}
p.FooterLogoRight
{
text-align: right;
display: table-cell;
}
And this was all I could find in
StylesForHomePage.css:
As for twiddling with the company logo, I've only ever used the HTML5 Top Navigation skin editor. (I didn't realize I needed to look in other files.) I believe I changed the logo once only—when I changed the Flare-provided "Your Logo Goes Here" placeholder to my company logo. I did, however, paste over the existing png in Windows Explorer when I was experimenting with resizing. Maybe I introduced a problem then, but I have never had issues editing other images that way (e.g., save updated images from SnagIt or Capture directly over the file on Explorer). Flare renders the change without issue, and I commit/push the change to Git via the Flare interface.
Also, I had previously used only the Top Nav skin's WYSIWYG editor ... but I just opened the skin via internal editor and yikes. Inside the <Resource Name="CompanyLogoWhite.png"> tag was an
11,944 character hash string. (I can't paste it because it likely exceeded the character limit for a post.)
Code: Select all
<Resources>
<Resource Name="CompanyLogoWhite.png"> H4sIAAAAAAAEAO2cdzScW9v/h4jeieg9SGKM0Q2G6G10URMZY5Qoo0z0muhEiYguRLRE76IGUa5+ ... AND SO ON ...
</Resource>
</Resources>
I have no idea if this huge block is normal, because I never looked at the original.
In the TopNav skin, I found this:
Code: Select all
<Style
Name="Logo">
<Properties>
<Property
Name="BackgroundImage">url('CompanyLogoWhite.png')</Property>
</Properties>
</Style>
Which is the correct file name.
And this, with the same giant character block:
Code: Select all
<Stylesheet
lang="en-us">
<Stylesheet>
<Resources>
<Resource Name="CompanyLogo.png">H4sIAAAAAAAEAO2cdzScW9v/(snip out almost 12K of characters)
</Resource>
</Resources>
And finally there is this at the end of the file, which is
not pointing to the correct file name (should be CompanyLogoWhite.png):
Code: Select all
<Style
Name="Logo">
<Properties>
<Property
Name="BackgroundImage">url('CompanyLogo.png')</Property>
</Properties>
</Style>
I'm sorry to throw this over the wall. I always try to do my own research (I learn better when it's painful), but I suspect I don't know the terms to look for in Flare help, let alone which guides to open. In the Top Nav tutorial, they made it seems so simple--just point the field selector to the new logo to use.
Also, this isn't a new issue. My company logo has been supersized since the first day I pointed Flare at it—I'm just finally trying to do something about it.
ETA: The CompanyLogoWhite.png size is 71 x 19 px, DPI 96, which should take up only ~1 inch of screen real estate.
