XML Flash Slideshow v4 Help    |    Support Home    |    DWUser.com Home  Download Help PDF (29MB)    |    Search:

Customizing the Caption Element

When using the Caption element, two child element are created by default – the caption text and title text.  The text styles you specify in the Properties panel on the right of the Layout/Presentation section only apply to the caption text; to customize the title text, some additional edits are needed.

To explicitly specify the Caption element's child elements, right-click on the Caption element and select Quick Edit Element XML.  You'll see something like this:

<Caption x="100" y="100" ... />

Note the /> at the end of the line.  Replace /> with > and add this additional code after that:

     <DynamicScrollableText name="titleText" htmlText="{image.title}" width="100%" fontSize="12" fontFamily="Arial" fontWeight="bold" />
     <DynamicScrollableText name="captionText" maxHeight="200" htmlText="{image.caption}" width="100%" />
</Caption>

You can customize the formatting of the title text by modifying the fontFamily, fontSize and fontWeight attributes on the first line.  Here's what the final code might look like:

<Caption x="100" y="100" ... >
     <DynamicScrollableText name="titleText" htmlText="{image.title}" width="100%" fontSize="16" fontFamily="Verdana" fontWeight="bold" />
     <DynamicScrollableText name="captionText" maxHeight="200" htmlText="{image.caption}" width="100%" />
</Caption>

Keep in mind that you can also use the Plain Caption Text or Plain Title Text elements (under Special Starter Elements in the Components panel on the left) if you want to "create your own" caption element.  Usually, though, you'll want to use the Caption element since it has special functionality built in (such as fade effects and integration with the CaptionToggleButton).