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

Skin form —Components tab — Layouts — Tabs

  
  1. Header 
  2. Body 

Styles set here apply to the tab body, the area beneath the tab header and underneath the layout in tab groups. When you create a tab group in a layout, you can select a format in the Format field in the Tab Group properties panel. You can specify values for the padding, border, and background of the following tab formats:

You can also create custom tab formats that you can apply to tab groups within sections. A preview of the currently selected tab format displays to the right.

To preview changes, save the rule and click Actions > Launch > Skin Preview > Tabs.

Border

Use mixin Select to use a mixin to define the appearance of the border. Mixin displays the name and a preview of the currently selected mixin. Click the menu icon to select a different mixin from the list.

For the Top, Left, Right, and Bottom border, select to use the border specified in the mixin (from mixin) or select another option: none, solid, dashed, or dotted.
Specify styles Select to define a custom border:
  • same for all sides — clear this check box if you want to specify a different border style for Top, Left, Right, and Bottom.
  • Select a border type and specify the pixel width and color of the border:
    none, solid, dashed, or dotted.

Padding

Padding

Specify the width of the padding in pixels. Clear the Apply same padding on all sides check box if you want to specify a different amount of padding, in pixels, for Top, Left, Right, and Bottom.

Background

Use mixin Select to use a mixin to define the appearance of the background. Mixin displays the name and a preview of the currently selected mixin. Click the menu icon to select a different mixin from the list.
Specify styles Select to define a custom background and then select the background Type:
  • none — To define a custom attribute, select Add custom attribute.
    Define custom attributes using CSS name-value pairs.
  • solid — Enter a hexadecimal value (such as #3d3d3d) to specify a Color or click the box next to the field to Choose a Color. To define a custom attribute, select Add custom attribute. Define custom attributes using CSS name-value pairs.
  • gradient — Select the Direction in which you want to blend the colors, horizontal or vertical. Specify the Start and End colors of the gradient, as well as a Backup color. To define a custom attribute, select Add custom attribute.
    Define custom attributes using CSS name-value pairs.
  • image — Specify the following:
    • Background Color — Select to use the background color specified in a mixin; choose From mixin and then click the Down Arrow icon to select a mixin. Alternatively, you can select custom color and enter the CSS hexadecimal value or click the box next to the field to Choose a Color.
      To define a custom attribute, select Add custom attribute.
      Define custom attributes using CSS name-value pairs.
    • Location — Enter the location of the file, including the relative path. For example, images/AlphaCorpLogo.png.
      To search for an image, click the Gear icon to open the Image Catalog tool. Enter any portion of a file name (relative path, file name, or extension) in the Search box, and click Find. If you can’t find the image, make sure it is in the webwb directory.
    • Tile — Specify tile settings for the image. Select None if you want to use a single image; Horizontal if you want a row of images in the background; Vertical, if you want a column of images in the background, or Both, if you want rows and columns containing the image in the background.
    • Position — Specify the placement of the starting tiled image, for example, top left.

Custom settings apply only to this element; they cannot be reused in other elements.
Related information

About Skin rules

Open topic with navigation