Styles set here apply to the active and inactive headers of accordion controls. You can set styles for the Standard and Sub accordion formats, as well as create custom accordion formats.
A preview of the currently selected format displays to the right. You can also preview formats by selecting Actions > Launch in the toolbar and then choosing one of the following preview options: Run Process, Open Portal, Harness Preview, UI Gallery Preview, Skin Preview.
To preview changes, save the rule and click Run (. In the Skin Preview, click the Accordions tab.
|Use the same formatting for Active and Inactive headers||Applies the same settings to active and inactive headers. Clear this check box if you want define different styles for active and inactive headers. Additional fields appear.|
Applies to the text of accordion headers. If you cleared the Use the same formatting for Active and Inactive headers check box, define styles for Active Text and Inactive Text.
Select this check box to define a custom text format:
Applies to the border of accordion headers. If you cleared the Use the same formatting for Active and Inactive headers check box, define styles for Active Border and Inactive Border.
If desired, you can specify the Top , Left , Right , or Bottom border as none, solid, dashed, or dotted, rather than inheriting the style from the selected mixin.
You can specify a custom border by selecting or clearing the Apply to all sides check box:
The following border styles are available:
Applies to the background of accordion headers. If you cleared the Use the same formatting for Active and Inactive headers check box, define styles for Active Background and Inactive Background.
Select this check box to define a custom background:
Select the background Type:
|Height||Specify the height of the accordion header by entering a value in pixels.|
Creating a new accordion format
Do one of the following to create a custom format:
- Click Add to add a copy of the first format in the list.
- Right-click the format that you want to copy and then select Clone .
The new format displays at the bottom of the list, with a unique number appended to the format name.
- Modify the name, if desired, using only alphanumeric characters ( a-z and 0-9 ) and spaces. The name cannot begin with a number. The style name that you enter is converted into the name CSS class/classes.
- Specify the values and then save the skin.
Applying a custom accordion format
- Add an accordion layout. See Adding an accordion.
- Click the View properties icon to open the Layout Properties.
- In the Layout Properties panel, select Other in the Container format drop-down.
- In the field that displays, select the format that you want to apply to the accordion layout.
- Configuring a text label in a layout cell or header
A cell on the layout can present formatted text, which may include the results of JSP tags or directives. Follow these instructions to control the presentation of the label. Labels can also appear in headers.
- Section forms — Adding an Accordion layout
- Component styles (custom style formats)
Use the Component styles tab to define the presentation of components by creating custom style formats. After you define style formats, reference them on property panes for sections, harnesses, and controls.