RESOLVED: HTML5 Skin Editor: Can't apply changes to buttons?

[Phlawm53]

For Flare 8.1.2: In the HTML5 Skin Editor I can apply changes to the top-level toolbar settings, but I cannot apply changes to individual toolbar buttons.

Per the following screenshot, in the Flare 8 HTML5 Skin Editor I've successfully added a toolbar button (and gotten it to download a PDF file when clicked), then tried to specify an image file to use as the button background:

Flare080102HTML5SkinEditor01.PNG

The screenshot shows the image in the Preview area. Note, too, that the screenshot is located in my Project resources ala \Content\Resources\Images\. Does it need to be somewhere else?

The next screenshot shows that I've applied borders to the user-defined button:

Flare080102HTML5SkinEditor02.PNG

The screenshot also uses green to illustrate that I can apply border changes to the top-level Toolbar Buttons. So I appear to be in the "right place" with regard to configuring the toolbar, but changes to individual toolbar buttons aren't appearing in the gen'ed HTML5 Help system.

Flare080102HTML5SkinEditor03.PNG

Any ideas? I've tried a few experiments but can't figure out how to apply customization to my user-defined toolbar button even though the button does download a PDF file when clicked (which I think means that overall the HTML5 Skin Editor is the "right place" to be configuring things?)

Cheers & thanks for your help,
Riley

[kwag_myers]

I'm a little confused by your screen shots because I don't have a Background section in the Properties window. As for button images, mine are set in the General > Icon property.

[Phlawm53]

I'm a little confused by your screen shots because I don't have a Background section in the Properties window. As for button images, mine are set in the General > Icon property.

I am in turn confused by General —> Icon. Here's what I have for HTML5 Skin Editor —> General:

Flare080102HTML5SkinEditorGeneralTab.png

No Icon settings there, so I'm not sure where I should look(?)

Long story short, I can apply button setting such as borders at the topmost level, but I'm still not able to customize individual buttons in the toolbar.

Cheers & thanks,
Riley
SFO

[kwag_myers]

Sorry, I wasn't clear. I'm referring to the General section of the Styles Properties:

buttonIconScreen.png

[Phlawm53]

Sorry, I wasn't clear. I'm referring to the General section of the Styles Properties:

Thanks. Alas, that screenshot is of the Skin Editor. My screenshots are of the HTML5 Skin Editor.

• In the Skin Editor shown in your screenshot, we have Styles —> ToolbarItem —> [button name]
• In the HTML5 Skin Editor shown in my screenshot, we have Styles —> Toolbar Button —> [button name]

I suspect that the Skin Editor and its associated Targets (DotNetHelp, WebHelp, and HTML Help being the ones listed in the top of the Skin Editor screenshot), by virtue of being more mature, have all been more fully debugged.

The HTML5 Skin Editor, along with the HTML5 Target type, still seem to be experiencing growing pains…

Cheers & thanks 'gain,
Riley
SFO

[kwag_myers]

Ah, I see. Now that we have that (or should I say, "me") straightened out, let me ask, what size is the image you're trying to apply? I remember my first project where I had to play with image and toolbar sizes quite a bit.

[Phlawm53]

…let me ask, what size is the image you're trying to apply? I remember my first project where I had to play with image and toolbar sizes quite a bit.

The two things I've tried to do are as follows:

1. Attempted to apply unique borders to one button that I've successfully added to the toolbar ("successfully" meaning it appears AND downloads a PDF file when clicked).
2. Attempted to use a 22x22 px image as the background for that 22x22 px button.

In Step 1, above, I've used HTML5 Skin Editor —> Styles —> Toolbar Button to specify a default dark blue border for buttons. Then I've tried (ala CSS behavior) to override those default borders with unique red borders for one button that when clicked downloads the help system's content as a PDF. NOTE that my Download as PDF button does work: Clicking it opens a browser tab and downloads the PDF into that tab.

In Step 2, and as shown in one of my initial screenshots, the 22x22 image I'm trying to insert into the button shows up in the HTML5 Skin Editor's Preview area, but does not appear in a gen'ed Preview OR the gen'ed HTML5 help system. Maybe I'll try a 21x21 image…(?)

As I type this, I'm wondering if what I'll need to do is abandon the top-level default setting and instead individually configure each button. That's counter-intuitive CSS-wise (i.e., no Cascade), but then again who said Flare was always logical?

Cheers & thanks,
Riley
SFO

[Mike Hamilton]

Hi Riley,

It looks like you are doing all of the proper steps. As an attempt to help at least replicate the situation, is there any chance you could send me a copy of the graphic that you are using? Then I can try and create a custom button using the same components on a different machine. That should at least help to narrow down the problematic area.

Mike Hamilton
V.P. Product Evangelism
MadCap Software
mhamilton@madcapsoftware.com

[Phlawm53]

…is there any chance you could send me a copy of the graphic that you are using? Then I can try and create a custom button using the same components on a different machine. That should at least help to narrow down the problematic area.

Mike: Thanks so much for offering to take a look at the problem!

I sent both the 22x22 pixel PNG and the project's HTML5 Skin file (.flskn filename extension) as attachments to a separate email message. And now that I think about it, I've attached them to this Forum post, too. (The .flskn file is packaged as a 7Z to make the Forum's upload filters happy…)

Cheers & THANKS! again,
Riley
SFO

[Mike Hamilton]

Good news, I do believe that I've found it.

Custom buttons are sensitive to having spaces in their names (like a lot of XHTML and/or CSS content) so I removed the custom button labled "Download as PDF" and added a new custom button labled "DownloadAsPdf" and all now seems to be working.

I updated my new button without spaces to include your style and graphic settings and it is attached. Please give it a try and let me know if it is now working for you.

I have submitted this to R&D with a request to add some text in the skin editor dialog warning to not use spaces in custom button names.

Mike

[Phlawm53]

Please give [removing spaces from the button name] a try and let me know if it is now working for you.

Yep, removing spaces from the button name fixed the problem.

As you said, the UI didn't let me know that spaces were invalid. Having said that, and benefiting from 20-20 hindsight, it's now completely obvious that none of the other buttons have spaces in their names.

Thanks, Mike, for taking a look at this. It's a great example of why I've become such a fan of Madcap the company and Flare the product…

Cheers, thanks 'gain, & take care,
Riley
SFO

[jay6678]

I have a follow up question to this:
How do you add a hover over label to a custom button? If you hover over all the default Madcap buttons (such as Print, Next topic, etc) they all have hover over labels when viewed in the browser. However, I cannot seem to find out how to add a hover over label to a custom button. Any suggestions?

[Phlawm53]

How do you add a hover over label to a custom button?

ANS: In HTML5 Skin Editor —> UI Text —> Toolbar Button.[button name]

Flare080102HTML5SkinEditorUIText.png

The screenshot shows how I added roll-over text to my Download as PDF button.

Note also the Language dropdown at the top of the UI Text panel…

Cheers & hope this helps,
Riley
SFO

[jay6678]

Riley,
Thank you! I don't know how I overlooked something so obvious - but that certainly solved my issue.