About button logo image looks awful

[dsch_tw]

Hi everyone,

I'm trying to place our company logo, as the "About button", inside the toolbar. After generating the WebHelp output, the image in the toolbar is awful quality, yet the logo that I receive when I press that image is passable. How could this be - they reference the same file? How can I receive a decent quality bitmap also in the toolbar? I can't find a setting which controls the height and width of the bitmap in the toolbar, or explains why its quality is so inferior to the other.

I'm attaching a screen cap. The passable logo is at the bottom left, the unacceptable one in the toolbar at upper right.

I've been spending several hours trying to adjust the skin, and I'm finding Flare to be quite unfriendly here.

Flare 4.21, Win XP Professional SP3, Output WebHelp

Thanks so much for any advice on getting this right.

Thanks,
David

[bobmoon]

How can I receive a decent quality bitmap also in the toolbar? I can't find a setting which controls the height and width of the bitmap in the toolbar, or explains why its quality is so inferior to the other.

I think the problem is that your toolbar image is being scaled down to fit within the height of your toolbar. The default height of the toolbar is 24 pixels high. You can try resizing your bitmap to 24 px high, and it should display better. Or, you can increase the height of the toolbar. You can see this topic for a similar discusison.

Bob

[dsch_tw]

Hi Bob,

Thank you very much for answering. I've been pulling my hair out the last couple of days trying to tweak the skin.
I saw that thread that you referred to, but I increased the height of my toolbar yesterday to 45 px but that didn't solve the problem.
I HAVE noticed, however, that it seems like the logo file that's created in the output is stored in the folder, \...\Output\DavidS\MyWebHelp\Data\SkinAfconPulseHelp . However, the logo file there is reduced from 3 KB to 2KB. As a workaround, I took the sharper version of the file and overwrote the "smaller" file. That improved the quality of the logo in the toolbar somewhat, but still not to the level of the file seen when clicked on it (visible in the attachment in my previous post).
It seems that while producing the output, Flare performs rendering to the image which degrades its quality (this has been my same gripe during the Import from FrameMaker source process, why can't Flare leave images alone?).
Is there a better solution than my workaround, which is a pain in the neck to do all the time?
So if anyone from Madcap is reading this, why do I have to keep replacing the produced logo image every time I build my output?

Thanks all,
David

[bobmoon]

What are the overall pixel dimensions for the good graphic and the bad graphic? Also, which file format are you using? Are they BMP files or JPGs? I seem to remember that Flare v4 had some issues with compressing JPGs and getting unsatisfactory results. Maybe you could try making a PNG out of your graphic.

[dsch_tw]

What are the overall pixel dimensions for the good graphic and the bad graphic? Also, which file format are you using? Are they BMP files or JPGs? I seem to remember that Flare v4 had some issues with compressing JPGs and getting unsatisfactory results. Maybe you could try making a PNG out of your graphic.

Hi Bob,

1. The dimensions for both are the same. I copied the good graphic file into the "\...\Output\DavidS\MyWebHelp\Data\SkinAfconPulseHelp" folder.
2. GIF format

Thanks,

David

[bobmoon]

When I look at your screen shot, it seems that the toolbar version is smaller than the version that's displayed when you click on it. That makes me think that Flare is trying to squeeze your logo that is say 40 pixels tall into your toolbar, which is 35 pixels tall. If that's the case, then the GIF is going to look grainy or pixelated.

As a test, you may want to increase the size of the toolbar in the skin to something that is much larger than the height of your image. Then see if it looks okay. If so, then you'll know that you need a large toolbar area or a smaller logo graphic.

Or, I could be completely off base. In which case, perhaps one of the smart folks in the forum will chip in with the real answer.

Bob

[dsch_tw]

When I look at your screen shot, it seems that the toolbar version is smaller than the version that's displayed when you click on it. That makes me think that Flare is trying to squeeze your logo that is say 40 pixels tall into your toolbar, which is 35 pixels tall. If that's the case, then the GIF is going to look grainy or pixelated.

As a test, you may want to increase the size of the toolbar in the skin to something that is much larger than the height of your image. Then see if it looks okay. If so, then you'll know that you need a large toolbar area or a smaller logo graphic.....Bob

Thanks very much Bob, but I tried that. I mentioned above that I increased the toolbar height to 45 px. Despite the bigger toolbar, the graphic still appears squeezed. So I don't know if there's another setting that I missed or a setting that's not in the Flare interface but present in one of the produced files like the toolbar.htm or a javascript file.

So I'm still looking for a solution.

Thank you,
David

[LTinker68]

There is a little quirky behavior about the skin that may be affecting what you're doing. When you open the skin and select the image to use for the logo, Flare loads the logo into a specific folder somewhere in the project (I've never looked where), even if you had the logo in the resources\images folder. If you make a change to the logo, you can't just overwrite the copy in the resources\images folder, or whatever location you used as the source of the image. Instead, you have to go back into the skin and reselect the (modified) image file, even if it shows the same image file as being selected. This forces Flare to load the (modified) file into wherever it stores skin images until you build the output. Once you build the output, it's placed in the SkinSupport folder, I think.

Anyway, if you've been making modifications to your original image file and haven't been reselecting the file in the skin, then you haven't really been changing the skin at all. You need to reselect the file in the skin, just as you did when you first specified the image file to use. Which is just weird in my opinion -- if you're using an image in the output then the image should be stored in the resources\images folder with all the other images that are used in the project.

[dsch_tw]

Thank you, Lisa. Unfortunately, the solution is not there either. It doesn't matter from where the Build Output process takes the file, the final output always includes a smaller version of it in the "\...\Output\DavidS\MyWebHelp\Data\SkinAfconPulseHelp" folder (width/height are only 89+ percent of the original), and therefore appears poorly on the toolbar. The toolbar is set to 45 px height and the good file is only 39 px height. Why is this degradation happening?

Thank you,
David

David Schor
Technical Writer
Afcon Software and Electronics
Mobile: 054 478 8253
davids@afcon-inc.com
dsch.tw@gmail.com
http://www.linkedin.com/in/davidschortw

[LTinker68]

Did you modify the <img> style in the topic stylesheet? Do you have it set to a min-width or min-height or increase the size to 110%, for instance? I don't have Flare running at the moment, so I don't remember if it uses the base img style, but if it is pulling from that tag and you've modified it, then that could be the problem.

Also, what's the resolution of the logo image?

[dsch_tw]

Hi Lisa,

No, I didn't modify the img setting at all. The logo resolution is 72 px/in.

Thanks,
David

[LTinker68]

It might be a width thing. It was mentioned earlier that the height of the toolbar may be too low so you sized it, but I wonder if Flare has a width limit for that logo space because it leaves room for the other items in the toolbar. Our logo is somewhat square so I've never run into the width issue, but yours is a lot longer.

Try this, after generating the output, right-click in the toolbar area and select This Frame > View Frame Source (text may vary slightly depending on the browser you're using). Scroll down to where the logo is in the code, and see what style classes it references or if there are any inline styles. Flare often puts inline styles that it adds at build-time. If there is something there that is limiting the width, or if there is a style class being called from one of the Flare stylesheets, then you might have to resort to doing an after-build modification. That is, after you build the help, you'd have to modify the appropriate file every time. Or do what I do and keep a copy of the modified file elsewhere then just paste it over the generated file.

Hopefully you won't have to do that, but check the source code to see if you can tell if there's a width limit being placed somewhere other than the img tag in the topic stylesheet.

[dsch_tw]

Lisa,

Do you mean the following?

</style>
</head>
<body>
<table style="table-layout: fixed; height: 28px;">
<tr>
<td id="ToolbarButtons">
<!-- Toolbar buttons and logo are inserted here -->
</td>
</tr>
</table>
</body>
</html>.

Thanks,
David

[dsch_tw]

Here's another possibility from the \Output\DavidS\MyWebHelp\Data\skin.xml file:

<StyleClass Name="IconTray">
<Properties>
<Property Name="ItemHeight">39px</Property>
</Properties>
</StyleClass>

David

[LTinker68]

Yes. The first one says the toolbar is set to a height of 28px (the default height). The second one says the icon tray is set to 39px, so I think you set the wrong thing. The icon try is the thing beneath the accordion buttons. The toolbar is what you need to change in the skin to be taller than the logo.

[dsch_tw]

Lisa,
Changed the toolbar height to 45px. There's a small amount of improvement in the graphic but not 100%. I guess that's the best I can hope for now. I don't want to increase the toolbar anymore - I prefer to leave more room for the content .

Unfortunately, as you mentioned earlier, I'll have to keep replacing the relevant generated files every time I create a build - Why, Madcap, why do you do this to us?
I recall having to do similar file replacement back in 2003 when I started making WebHelp output in RoboHelp. At the time, output generation kept placing the "Powered by RoboHelp" logo in the toolbar when I wanted to place my employer's logo instead. Seems like this same crew hasn't changed that concept in the last 6 years.

Thanks for your time, patience, and good advice!

All the best,
David

[LTinker68]

If you've set the toolbar height to 45px and the image file you're referencing in the skin is only 39px, then it shouldn't be distorting it and then you shouldn't have to modify anything after the build. Unless there is a width setting somewhere that we're not seeing. I forgot to have you check the Javascript file for the toolbar and the toolbar HTML page in the generated output. Open those two in Notepad and see if there's a width setting somewhere. It might not just be on the img tag -- the logo is inside a table, I think, so there could be a width setting on the table cell. If there is, then yes, you might have to modify the .js or .htm file after every build.

[dsch_tw]

Hi Lisa and everyone else,

Lisa, you were on the mark here. Modifying the toolbar js file was the last piece of the puzzle.

IN CONCLUSION:
The process required the following changes; some in the Flare GUI and some external tweaking:

1. [Your skin]>Styles>ToolbarItem>Logo>Basic>Icon.
Choose the icon file here.
POSSIBLE BUG - I had a different file selected previously. Even though I would make sure that a better

quality image was located in the path that I specified in this setting, the Build process always

generated an image file that I believe was the dimensions of the file when I initially selected it

(always coming out 136x35 instead of 152x39; hence, the visible degradation). Now, I get a passable

version of the new file I selected.

2. [Your skin]>Styles>Frame>Toolbar>Basic>Height and [Your skin]

>Styles>Frame>Toolbar>Basic>BackgroundGradient .
Default is 28px. Increase this value so that the logo's height fits inside it. In my case, I changed it

to 45px. Don't make it too large!!
Also, make sure the background gradient is solid or a pattern which does not visibly repeat itself.
These changes, by the way, are made to the Output\MyWebHelp\Data\skin.xml file.

NOW, we have to tweak generated files

3. Output\MyWebHelp\Content\SkinSupport\MadCapToolbar.js.
Open this file in an editor. Go to lines 648-656:

td.id = "logoIcon";
td.style.width = "111px";
td.style.textAlign = "right";

img.src = "Images/LogoIcon.gif";
img.alt = "Logo Icon";
img.style.width = "111px";
img.style.height = "24px";
img.onclick = DisplayAbout;

Increase td.style.width to the logo file width PLUS a small amount more in order to fit the logo snuggly.
Change img.src to your logo file (The default is the Madcap logo!)
Change img.alt if you want to change the Alternate text.
Change img.style.width and img.style.height accordingly.

Save a copy of this changed file in another location because the default Build operations will overwrite it!

4. [Your skin]>WebHelp Toolbar>Custom JavaScript to include in Toolbar page>Edit>Load File.
Select the javascript file that you saved in step 3. Click OK.

5. Run Build WebHelp.

6. Open your WebHelp in the browser. Eureka!
I will add that this just worked for me here. YMMV!!

To any Madcap personnel, please note this ridiculous procedure every time I build output! Please make it easier to accomplish these tasks in the Flare GUI, without having defaults overwrite them each time!

All the best,
David
David Schor
Technical Writer
Afcon Software and Electronics
Mobile: 054 478 8253
davids@afcon-inc.com
dsch.tw@gmail.com
http://www.linkedin.com/in/davidschortw

[forfear]

best to post a formal bug report.

A good and valid post.

[dsch_tw]

I just submitted a bug report/enhancement request to provide friendlier control in the GUI for customizing the WebHelp skin, and for preventing the Madcap defaults from overwriting the modifications that I was forced to make outside the program.

If I receive feedback, I'll update this forum.

Thanks to everyone who chipped in to the solution, and all the best to everyone,

David

[dsch_tw]

Madcap Tech support wrote me that what I encountered was indeed a bug in v4.2 and has been fixed in v5.

In the "About Box still making my life miserable" thread, I chronicled about my problems with the About box showing an empty box instead of the logo, which I had planned to substitute info about the product a little later on.
It turns out the enabling of the customized javascript that I mentioned above clashes with the appearance of that box. When I disabled the customized javascript, my logos appeared fine.
So why did it cause me so much grief last week, and this week, things are fine? Mystery, mystery.

Back to productive work again, for now.

All the best,
David

[kkelleher]

I've got a problem with my about box image that isn;t rleated, but figured the polite thing would be to reuse this existing thread.

The image looks fine as displayed in the Webhelp Setup preview, when opened in an image editor, or when included in a dummy HTML document, but when it appears in webhelp, it looks really terrible - it's exhibits a Moiré pattern. This is the case if I preview or if I build the webhelp target. Even if I change the image file type (to JPG or GIF for example) it still looks terrible.

Here's the source:

jaspersoft.png

And here's the (ugly) result):

FlareAboutBoxImageProblem.png

As may be obvious, our Marketing department would kill me if allowed this to happen to our brand. Has anyone seen something similar or have any advice?

Thanks,

Kristen

[dsch_tw]

Kristen,

Your output probably contains a folder like: Output\MyWebHelp\Data\Skin[name of skin].
That folder contains miscellaneous resource files that the Build process regenerates, including your About file bitmap. The file version currently in there is probably the 27KB one. Copy the 53 KB one over there, overwriting the smaller file.
You have to do this each time you build, which is a royal pain in the you-know-where, but at least it will keep the marketing people away .

All the best,
David

David Schor
Technical Writer
Afcon Software and Electronics
Mobile: 054 478 8253
davids@afcon-inc.com
dsch.tw@gmail.com
http://www.linkedin.com/in/davidschortw

[kkelleher]

That folder contains miscellaneous resource files that the Build process regenerates, including your About file bitmap.

How very strange. I couldn't find my image in that location until I deleted all the old output and re-published the webhelp. I see it now, and sure enough, it's about half the size of the source image. Replacing it with a decent-looking GIF does fix it, but as you say, that shouldn't be necessary with every build.

Did you happen to report this issue?

You also wrote:

why can't Flare leave images alone?

You said a mouthful there. I'm disappointed by the way Flare deals with images. If I wanted to use a smaller image file, I'd make it myself.

Thanks for your help, David.

-Kristen

EDIT: Here's the info I got from Flare Tech Support:

It is a Png vs Gif.. Flare converts the image to a .gif file and gif are limited to the number of colors they can have where a png has much higher limits. This will downsample the image and the results as you can see are not good. For best results - use a good .gif file and the image in the output will be exactly the same.

I suppose I should have guessed that all I needed to do was covert the file to GIF myself before uploading it. It just wasn't terribly obvious.