Drop-Down Image is Ruining My Life & Tearing My Family Apart

[erinep23]

Flare Version 11.

I can't seem to make an image attached to a toggler or drop-down stick. Every time I try, it goes back to this creepy, zombie arrow. Ugh what is this thing and how can I get rid of it?

[cubreporter51]

The best place to start would be to view your output in your browser with both the normal and creepy zombies on the page, then highlight one of them, right-click and select "Inspect Element". Look at the HTML for the right one and the wrong one, you may get a better sense of where the image source (src="xxx") and whether any styling is being applied (class="xxx").

Sorry I couldn't be more help, but I hope this points you toward an answer.

[Robotman]

From memory, the creepy zombie image is the original Madcap template one.

I imagine you created a new drop-down class at some point with the new image. There may be a difference between. It could also be that the creepy one was created in an earlier version of Flare and, thus, the code for it may be a little different to the current drop-downs.

[mikey_mack]

I BELIEVE that is part of the Madcap | toggler class in your stylesheet. Changing this will change all togglers to whatever you want, if that's the intended goal. If there are some togglers you don't want to change, you should be able to create a separate selector for that class. I hope that helps.

[Cwestpha]

Not all classes that exist in the default style sheets appear in the style sheet editor. Inspect the output as suggested here and make sure you are using the same class name in your style sheet so that it overrides the defaults.

[cfield]

This is indeed the default "creepy" image used by Flare, and it can be replaced with non-creepy images. For a dropdown you will want to edit the MadCap | dropDownHead in the stylesheet. If you open / edit it in a program like Notepad ++, it will look something like this:

MadCap|dropDownHead
{
font-weight: bold;
font-style: italic;
font-family: Calibri;
color: #0000cd;
font-size: 14pt;
padding-top: 1px;
mc-closed-image: url('../Images/DropDownClosed-Circle.png');
mc-open-image: url('../Images/DropDownOpen-Circle.png');
padding-bottom: 5px;
}

Of course you would link to your own images and set your own preferences, but you get the idea. Note you can (and really should) use different images for when it's condensed ("closed-image") as opposed to expanded ("open-image").

As noted in a previous reply, not all classes display in the stylesheet by default, so it may be easier to make the change in Flare to start. For that, the image links are located under the "Unclassified" dropdown option of MadCap | dropDownHead.

Same thing for togglers, except that the style needed is Madcap | toggler. Again from Notepad ++:

MadCap|toggler
{
mc-closed-image: url('../Images/DetailsClosed.png');
mc-open-image: url('../Images/DetailsOpened.png');
}

Hope that helps!