Skin form — Components tab — Layouts — Layout Groups

Select Use mixin to apply the skin's standard active mixin. You can then override individual font attributes by clicking Add Mixin Overrides. Select Specify styles to define all your own font attributes independently of the mixin.

The Mixin field displays the name and a preview of the currently selected mixin. Click to select a different mixin from the list.

You can modify the following attributes:

• Font — Select the font family. The font family defaults to (use overall), which is the font you specified in the Overall Font field at the top of the Mixins tab.
• Font Size — Select the font size in pixels (px), points (pts), em (the current font size), or percentage (%).
• Color — Enter a hexadecimal value (such as #3d3d3d) or click the box next to the field to Choose a Color.
• Font Weight — Select a font weight from the list.
• Text Decoration — Select a text decoration option from the list, if desired. For example, Underline. The blank selection indicates that no additional attributes are applied.
• Transform Text — Select a text transformation option from the list, if desired. For example, Lowercase. The blank selection indicates that no additional attributes are applied.
• Additional styles — Add additional styles, specific to styling the text for this element, by specifying a CSS Attribute and Value. Specify only CSS related to text styles. Click Add additional styles to define another CSS attribute-value pair. Clickto remove an additional style.

Select Use mixin to apply the skin's standard active mixin. You can then override individual border attributes. Select Specify styles to define all your own border attributes independently of the mixin.

The Mixin field displays the name and a preview of the currently selected mixin. Click to select a different mixin from the list.

You can modify the following border style attributes:

• Apply to all sides — The selected border style is the same on all sides. Otherwise, you can select a different border style for each side: Top, Left, Right, Bottom.
• Styles — You can choose from: None (no visible border), Solid, Dashed, Dotted. For mixins, you can also choose From mixin (the mixin style). You can specify width and color for solid, dashed, or dotted lines.
• Rounded Corners — Enable for rounded corners (HTML5 only).

Select Use mixin to apply the skin's standard active mixin. Select Specify styles to define your own border attributes independently of the mixin.

You can modify the following default background attributes:

• Type — Choose from Solid, Gradient, Image.
• Solid — Click the checkbox and choose from the palette.
• Gradient — Choose Vertical or Horizontal, Start and Stop shade, and Backup color (the color behind the gradient).
• Image — Select Background color, Image location (using the Image Catalog), a Tiling option and position.
• Additional Styles — As described above.

Select this checkbox if you want to add a responsive breakpoint to the layout group. When the screen size reaches the dimensions that you specify, the layout group format changes to the type you specify: Tab, Accordion, or Menu.

• Breakpoint<n> — Select the format that the layout group should use when rendering at the dimensions specified for this breakpoint.
• max-width — Specify the maximum width at which the layout group will display in the format you specified for this breakpoint.
• unit — Specify the unit of measurement for the width of the layout: px (pixels) or em (font size).
• min-width — Specify the minimum width at the layout group will display in the format you specified for this breakpoint. Leave min-width empty when a range is not desired.
• unit — Specify the unit of measurement for the width of the layout: px (pixels) or em (font size).

• Add breakpoint — Select to add another responsive breakpoint.

  Clickto remove an additional breakpoint.

Determines the position of the labels (tab name, accordion pane names, or menu names) in the layout group.

Applies only to accordions. Specify an image for collapsing a pane and for expanding the pane. Choose the horizontal position: Left, Right, Center. Set a width (gap) in pixels from the left, center, or right of the panel (according to position)

Applies only to tabs. Specify the alignment of tabs within the layout group: Left, Right, Center. Also specify Inner Spacing: the spacing between the tabs. Also specify a Left Offset or Right Offset to determine the space between the first tab or last tab from the left or right side of the layout group.

Applies only to menus. Specify a menu image. Choose the horizontal position: Left, Right, Center. Set a width (gap) in pixels from the menu label (according to position)

Applies only to tabs. Select to use the default background you specified for the layout group (in General settings) or specify a tab panel-specific background using the current mixin or by specifying styles. See Default background for a description of options.

This is applicable to the whole panel, not the tabs themselves.

Applies only to tabs. Select to use the default border you specified for the layout group (in General settings) or specify a tab panel-specific border using the current mixin or by specifying styles. See Default border for a description of options.

This is applicable to the whole panel, not the tabs themselves.

• Use same typography for active, inactive and hover — Select the checkbox to use the same font style for tabs in the active, inactive and hover state. Do not select the checkbox if you want to specify font styles individually for each state.

For all tab states or individually for the Active Text, Inactive Text, and Hover Text, choose from the following:

• Use default text for this format — If using the same font specification, select whether or not to apply the default border used for General settings.
• Use mixin or Specify styles— Select Use mixin to apply the skin's standard active mixin. You can then override individual font attributes by clicking Add Mixin Overrides. Select Specify styles to define all your own font attributes independently of the mixin. The font options are the same as for Default text. See Default text for a description of options.

• Use same border for active, inactive and hover — Select the checkbox to use the same border style for tabs in the active, inactive and hover state. Do not select the checkbox if you want to or specify borders individually for each state.

For all tab states or individually for the Active Border, Inactive Border, and Hover Border, choose from the following:

• Use default border for this format — If using the same border style, select whether or not to apply the default border used for General settings.
• Use mixin or Specify styles — Select Use mixin to apply the skin's standard active mixin. You can then override individual border attributes by clicking Add Mixin Overrides. Select Specify styles to define all your own border attributes independently of the mixin. See Default text for a description of options.
• Border style — See Default border for a description of options.

• Use same background for active, inactive and hover — Select the checkbox to use the same background style for tabs in the active, inactive and hover state. Do not select the checkbox if you want to or specify backgrounds individually for each state.

For all tab states or individually for the Active Background, Inactive Background, and Hover Background, choose from the following:

• Use default background for this format — If using the same border style, select whether or not to apply the default border used for General settings.
• Use mixin or Specify styles — Select Use mixin to apply the skin's standard active mixin. You can then override individual font attributes by clicking Add Mixin Overrides. Select Specify styles to define all your own font attributes independently of the mixin. See Default text for a description of options.
• Background style — See Default background for a description of options

Determines the position of the text in the layout group. Choose the same padding on all sides or specify the top, right, bottom, and left padding in pixels.