Can't change Dropdown icons

[Oda]

Hi

I recently moved to Flare 11 and my custom dropdown icons won't display. I used to set them in the dropDown style, by changing mc-closed-image and mc-open-image.
Now, if I want the same behavior, I have to change the default DropDownClosed.gif and DropDownOpen.gif which are located in MadCap Flare V11\Flare.app\Resources\Images\WebHelp. This is not the normal way of doing and those settings are likely to disappear in case of reinstallation of Flare.
Can anyone help in setting those icons in a simpler way and not make Flare call those default .gif images ?

Thanks a lot

[ecjoe]

Hi Oda,

I was able to successfully migrate all of my old projects from Flare 10 to 11 without having to adjust my CSS. I do remember that I had to adjust my CSS drop down style when going from Flare 9 to 10.

I would suggest that you verify that MadCap | dropDown style is properly set in your CSS file. One way of doing so is to set it through Flare's CSS editor. Also, check to see whether that CSS file is being applied to the topic in question.

Your CSS file should look similar to the following:
MadCap|dropDown
{
...
mc-closed-image: url('../Images/Icon-Closed.png');
mc-open-image: url('../Images/Icon-Open.png');
}

[chrisj]

I was starting to think I was the only one who had this strange issue! Provided that your Stylesheet is all in order (as ecjoe suggests), this IS an actual issue that could possibly be a bug as far as I can tell. I could not determine why this was happening, but I isolated the problem to a post build bug which, for some reason, defaults those icons to the original .gif images. What makes this situation even stranger is that, not only is this not an issue when running a preview in Flare, if you open the Topic.css post build, the images are correctly called in their respective styles. However, if you play around in Web Developer tools, you can see that something is overwriting the CSS - even though it indicates it is pulling the style from Topic.css. My solution was to enter the icon changes in the CSS using a text editor rather than the Flare editor.

Code: Select all

.MCDropDown_Closed .MCDropDownHotSpot_{
background-image: url('../your/file/path.extension');
}

Do this for the .MCDropDown_Open class as well and you should be fixed up. Let me know if this solution works for you, as I'm curious to know if this solution works for more than just myself.

[Oda]

Thanks a lot Chrisj ! Your workaround works just fine. I will also submit the bug to the support.

Cheers

[CSharp]

Thanks for this info, Chrisj!

One change I had to make to the workaround for Flare 12 was to make sure my image overrode the transparent.gif that's set automatically as the dropdown image:

Code: Select all

.MCDropDown_Closed .MCDropDownHotSpot_
{
   background-image: url('../your/file/path.extension') !important;
}

Maybe changing the z-index would work too, but that's not something I tried.

(Since I'm using Flare 12 I'm guessing this bug hasn't been fixed yet. Or maybe it's a different one with the same workaround!)