Specifying Style Settings for Accordion Items

1. Open a Standard skin.
2. Select the Styles tab.

3. In the Styles section, expand the AccordionItem node.

   

4. Select the item that you want to edit. If you want the setting(s) to be applied to all of the items, select the AccordionItem node itself.

   The items under this node represent the different accordions that can be added to your output.

   

   The IconTray item represents the rectangle at the bottom of these items. If the area is resized so that only a certain number of accordions can be shown, the other items are represented by small icons and contained within the icon tray. In the following example, we've added a thick red border around the icon tray.

   

5. Select the Property Groups or Alphabetical List option to display the properties for the style item.

6. In the Properties section, set the values for the properties that you want modify.

   Click here to see descriptions of the properties that you might use for accordion items.

   Background gradient To change the background color of the accordion area:

   • Expand the Font property group on the right and change the value in the BackgroundGradient field to apply a color progression effect. The background changes from one color to another. Click the down arrow to open a small window. In this window, click the down arrow next to the Start field and select a color to use at the beginning of the gradient. Then click the down arrow next to the End field and select the color to use at the end of the gradient. Finally, click the down arrow next to the Style field and select a direction for the gradient effect or choose "solid." Click OK to accept the settings. When you click off the properties field, a small icon is displayed in the field, showing how the effect will look.

   Background gradient hover To change the background color of the accordion area when the end user hovers the mouse over it:

   • Expand the Font property group on the right and change the value in the BackgroundGradientHover field to apply a color progression effect. The background changes from one color to another. Click the down arrow to open a small window. In this window, click the down arrow next to the Start field and select a color to use at the beginning of the gradient. Then click the down arrow next to the End field and select the color to use at the end of the gradient. Finally, click the down arrow next to the Style field and select a direction for the gradient effect or choose "solid." Click OK to accept the settings. When you click off the properties field, a small icon is displayed in the field, showing how the effect will look.

   Background image To add a background image to the accordion area:

   • Expand the Font property group on the right and select an image in the BackgroundImage field. Click the down arrow in this field and then select Browse for Image to find and select an image file.

   Background image hover To add a background image to the accordion area when the end user hovers the mouse over it:

   • Expand the Font property group on the right and select an image in the BackgroundImageHover field. Click the down arrow in this field and then select Browse for Image to find and select an image file.

   Borders To add or change borders for the item:

   • Expand the Borders property group on the right and change the value in any of the fields. Click the down arrow to open a small window. In this window, you can enter the width of the border in the lower-left field. You can select the unit of measurement (e.g., pixels, points, centimeters) using the lower-left drop-down arrow. See About Units of Measurement. You can select a color for the border using the upper-right drop-down arrow. And you can select the type of line for the border (e.g., solid, dashed, dotted) using the lower-right drop-down arrow.

   Font color To change the color of the font:

   • Expand the Font property group on the right and change the value in the Color field. Click the down arrow to open a color palette window. You can click a color shown, or you can click More colors and select a different color or create a custom color.

   Font family To select a specific font family (e.g., Arial, Tahoma, Verdana):

   • Expand the Font property group on the right and change the value in the FontFamily field. After you click in the field, the Font Family Picker dialog opens. Use this dialog to select the font family and click OK.

   Font size To change the size of the font:

   • Expand the Font property group on the right and change the value in the FontSize field. Click the down arrow to open a small window. In this window, you can enter the size of the font in the lower-left field (either type a number or use the up and down arrows). You can select the unit of measurement (e.g., pixels, points, centimeters) using the lower-right drop-down arrow. See About Units of Measurement. You can return to the default setting by using the upper-right drop-down arrow.

   Font style To change the style of the font (e.g., make it italic):

   • Expand the Font property group on the right and change the value in the FontStyle field. Click the down arrow and select either italic or normal.

   Font weight To change the weight of the font (e.g., make it bold):

   • Expand the Font property group on the right and change the value in the FontWeight field. Click the down arrow and select either bold or normal.

   Icon To select a different icon image:

   • Expand the General property group on the right side of the editor and select an image from the Icon field. Click the down arrow in this field and then select Browse for Image to find and select an image file.

   Item height To change the height of the item:

   • Expand the Font property group on the right and change the value in the ItemHeight field. Click the down arrow to open a small window. In this window, you can enter the item height in the lower-left field (either type a number or use the up and down arrows). You can select the unit of measurement (e.g., pixels, points, centimeters) using the lower-right drop-down arrow. You can return to the default setting by using the upper-right drop-down arrow.

   Label To change the text that appears on the item:

   • Expand the General property group on the right side of the editor and enter new text in the Label field.
7. Press CTRL+S or click to save your work.

example - accordion bars (font, background color)

Let's say that you want to change the font used for the text in the Search accordion bar to Baskerville Old Face. In addition, you want to set the background color for the accordion bar to green.

In that case, you would do the following:

1. Expand the AccordionItem node.
2. Select Search.
3. On the right side, make sure Property Groups is selected.
4. Expand the Font group.
5. Click in the cell to the right of FontFamily.
6. In the Font Family Picker dialog, select Installed Families.
7. Find and select Baskerville Old Face.
8. Click OK.
9. Click in the cell to the right of BackgroundGradient.
10. In the small popup, click on the down arrow next to Start.
11. Select a green color.
12. Since we only want a solid background color, click OK.
13. Press CTRL+S or click to save your work.

When you are finished in the Skin Editor, it will look something like this: