You are here: Reference > Rule types > Skin rules > Skin form - Layouts - Tabs - Header

Skin form —Components tab — Layouts — Tabs
  1. Header 
  2. Body 

Styles set here apply to tabs. When you create a tab group in a layout, you can select a format in the Style format field in the Tab Group properties panel. Tabs in a harness container always use the Standard format.

You can specify values for text, border, background, height, and indentation of the following tab formats:

You can also create custom tab formats and add them to tab groups within sections. Custom formats are not applicable to tabs in a harness container. Tabs in a harness container always use the Standard format.

A preview of the currently selected format displays to the right. You can also preview formats by clicking the Runicon in the toolbar and selecting one of the following preview options: Run Process, Open Portal, Harness Preview, UI Gallery Preview, Skin Preview. In the Skin Preview, click Tabs.

Use the same formatting

Use the same formatting for Active and Inactive headers Applies the same settings to active and inactive tab headers.

Clear this check box to define different styles for active and inactive tabs. Additional fields appear.

Text

Applies to the text of tab headers. If you cleared the Use the same formatting for Active and Inactive headers check box, define styles for Active Text and Inactive Text.

Use mixin

Select this option to use a mixin to define the appearance of this element. The Mixin field displays the name and a preview of the currently selected mixin.

  • Mixin overrides — Click Add mixin override to override a style that is set by the mixin:
    • Font — Select the font family. The font family defaults to (use overall), which is the font that 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, for example, Underline. A blank selection indicates that no additional attributes are applied.
    • Transform Text — Select a text transformation option from the list, for example, Lowercase. A 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. You must specify a CSS attribute that is related to text styles. Click Add additional styles to define another CSS attribute-value pair.
Specify styles

Select this check box to define a custom text format:

  • Font — Select the font family. The font family defaults to (use overall), which is the font that 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, for example, Underline. The blank selection is the default selection for backward compatibility and indicates that no additional attributes are applied.
  • Transform Text — Select a text transformation option from the list, for example, Lowercase. The blank selection is the default selection for backward compatibility and 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. You must specify a CSS attribute that is related to text styles. Click Add additional styles to define another CSS attribute-value pair.

Border

Applies to the border of tab headers. If you cleared the Use the same formatting for Active and Inactive headers check box, define styles for Active Border and Inactive Border.

Use mixin

Select this option to use a mixin to define the appearance of this element. The Mixin field displays the name and a preview of the currently selected mixin.

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.
Specify styles

Select to define a custom border:

  • Apply to all sides — Select this check box to specify the same border style to the top, left, right, and bottom borders. Choose from none, solid, dashed, or dotted.
  • If you clear the Apply to all sides check box, select a border style for the Top, Left, Right, and Bottom borders. For each of these borders, you can select none, solid, dashed, or dotted. Specify the pixel width and color of the border, if applicable.

Background

Applies to the background of tab headers. If you cleared the Use the same formatting for Active and Inactive headers check box, define styles for Active Background and Inactive Background.

Use mixin

Select this option to use a mixin to define the appearance of this element. The Mixin field displays the name and a preview of the currently selected mixin.

Specify styles

Select this check box to define a custom background: 

Select the background Type:

  • none — Indicates no background color, similar to setting a transparent background.
  • solid — Enter a hexadecimal value (such as #3d3d3d), or click the box next to the Color field to Choose a Color.
  • gradient — Select the Direction in which you want to blend the background colors, horizontal or vertical. Specify the Start and Stop colors of the gradient. Specify a Backup color, in the event that the browser cannot render the gradient.
  • Additional styles — Add additional styles, specific to styling the background for this element, by specifying a CSS Attribute and Value. Specify only CSS related to background styles. Click Add additional styles to define another CSS attribute-value pair. Click the Delete icon to remove an additional style.

Height

Height Specify the height of the tab by entering a value in pixels. This height applies to all tab positions and orientations.

Indent

Indent For formats other than Standard, specify the tab indent.

About rendering ten-part background images

Each tab that uses a ten-part background image is comprised of a left, middle, and right image. Variations of these images are used to differentiate a tab that is selected (active) or not selected (inactive). Expanding the width beyond the width of the image creates a space between it and the adjoining image. Reducing the pixel size cuts off the image at run time.

By default, the middle images (active or inactive) are tiled across the tabbed header and automatically sized to span the left and right images to equal a total width of 110 pixels. Use the Auto setting so that the width expands as text is entered in the tab.

Combinations of the tab images comprise a tab rendering based upon the position and focus of the tab. The three positions are:

The examples below show the settings used for each tab position and its focus:

Left-most tab active

Middle tab active



Right-most tab active


To achieve an overlap effect, use an overlap image in the Left on Right Collapse and Right on Left. You can use the Image Library to search for standard overlap images (for instance, search on the word "overlap". Here is an example of a Left on Right Collapse overlap:

About rendering dual background images

Each tab that uses a dual background image is comprised of a Fixed (Left) and Stretched (Right) image. They display the active and inactive states in the same image and must be the same height. The Stretched (Right) image must be as wide as any text you enter into the tabs. Use the Auto setting to allow the width to expand with the text entered.

The Fixed (Left) and Stretched (Right) images should be from the same RuleSet and version.

The images you specify here apply to both Active and Inactive tabbed headers.

Fixed Left Stretched Right tab

Creating a new tab format

You can create custom tab formats that you can apply to tab groups within sections.

Creating a custom tab format

To create a style format:

  1. Click Add a format.
  2. In the Create a new format dialog box, enter the Format name by using only alphanumeric characters (a-z and 0-9) and spaces. The name cannot begin with a number. The format name that you enter is converted into the name CSS class or classes.
  3. Optional: Provide a Usage annotation.
  4. Click OK. The new format is populated with default values.

To create a style format by copying an existing format, click Actions and select Save as from the list.

Applying a custom tab format

  1. Add an tab layout. See Section and Flow Action forms — Adding a Tabbed Repeat layout.
  2. Click the View properties icon to open the Tab Group Properties.
  3. In the Tab Group Properties panel, select Other in the Style format drop-down.
  4. In the field that displays, press the down arrow and select the format that you want to apply to the tab group.
Related information

About Skin rules

Open topic with navigation