Replacing Logo in Skin Editor

[Rona Kwestel]

I am trying to replace the default logo in the skin editor in Flare v10, but when I point to my logo file (.png format), there is no ability to resize the image and it spans the entire page.

Moreover, when I open the skin editor, I get a "Stack overflow at line 17" error, even before I've changed anything.

I would have expected replacing the logo to be a quick, simple task. The help on the skin editor is a bit unwieldy, and the Skins Guide is "coming soon".

[hornetTC]

I think the best option is to resize the logo before inserting it in the skin.

[Rona Kwestel]

Thanks, hornet, that worked, though I am surprised by the need to do that.

I'm still getting the stack overflow error, but it seems to be a harmless nuisance.

[Rona Kwestel]

In a semi-related matter, it's not clear to me where you should store image files for the skin. It seems that the ones that come with the default skin are actually embedded into the .flskn file, so if you replace one of them in your project by specifying another file for the given skin property, you inadvertently delete the old one and can only restore it by copy/pasting it from an old copy of the .flskn file. And your new file is then embedded into the skin file and no longer referenced by location.

Then, when you build the project, the files are written to the Output folder under <user>\<target>\Skins\Default\Stylesheets\Images, but those are temporary and deleted when cleaning the project output. If you wanted to edit an image file, I suppose you could just generate the output, edit the desired image file, and "re-import" it into the skin by pointing to its temporary location for the corresponding property, but it seems unwieldy, somehow.

Is there a recommended place within the project folder hierarchy to store skin image files, or are they meant to be maintained outside of Flare?

[ToddPh]

I've always just included my images in the Resources/Images folder, unless I need to keep them separate for some reason. This has worked for me when I add custom logos to my HTML5 projects or for epub output.

[Rona Kwestel]

Thanks, Todd. That's what I was doing, but just wondered about the whole way these images are handled. It was not what I expected, and I couldn't find much documentation on it. I do see now that there is a setting in the General tab of the Skin Editor for either keeping or removing unreferenced images in the skin.

[LTinker68]

Yeah, that's always bugged me that the skin doesn't use relative paths to image files that you could store in the Resources\Images folder. Instead, it stores them elsewhere, which means that if you want to change the image, you have to reload it into the skin. I keep copies of the images in a sub-folder in my Resources\Images folder, but they're for reference purposes for me. I could condition that folder out of the output, but it's not that big, so I don't bother.

[Rona Kwestel]

Thanks, Lisa. It does seem like a good idea to segregate them into their own Skin subfolder so that it's easy to find them later.

[mnowlin]

OK, then....where exactly ARE the logo image files stored?

If you open the skin file in a text editor, you see the BackgroundImage property represented thus:

<Styles>
<Style
Name="Logo">
<Properties>
<Property
Name="BackgroundImage">url('AgencyPlatform-Help.png')</Property>
</Properties>
</Style>
</Styles>


This to me implies that the images are uploaded outside of Flare somewhere, somehow, perhaps to a web server?

Help!
(thanks)

[Rona Kwestel]

mnowlin, if you search your .flskn file for AgencyPlatform-Help.png, you'll find a <Resource...> tag for that image file with the actual raw contents of the image file embedded; it will look something like "H4sIAAAAAAAEAOsM8HPn5Z...". Ultimately, in the generated Output folder, you'll see the .png file under <target name>\Skins\Default\Stylesheets\Images.

I'm not sure why they do it that way, and was initially quite confused by it myself until I dug under the covers.

Hope that helps.

Rona