Modifying an existing mixin

To modify an existing mixin:

  1. Determine the type of mixin you want to modify: Typography, Backgrounds, Borders, or Combinations.
  2. Select the mixin. The selected mixin displays in the middle column.

  3. Define styles for the Text, Border, and Backgroundelements, as appropriate. Depending upon the configuration of the mixin, you may have the following options when styling each element within the mixin:

    Remove   remove the styles from the element. You can then add styles or inherit styles from another mixin.
    Inherit from a mixin   remove the style from the element and select another mixin from which to inherit styles for this element.
    Custom styles   define a style for this element, rather than inherit styles from an existing mixin.

    You can inherit the majority of styles for a mixin from other mixins, and override individual style elements as necessary.

    Text Define text styling for the mixin by inheriting styles from another mixin or specifying styles for the following:
    • 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 is the default, for backward compatibility, and 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 is the default, for backward compatibility, and indicates that no additional attributes are applied.
    • Additional styles — Add additional styles to this element by specifying a CSS Attribute and Value. Click Add additional styles to define another CSS attribute-value pair. Click delete to remove an additional style.

    If a text element, such as Font Weight, inherits styles from another mixin, you can override the inherited style by clicking Override. You can then define another style for this text element. To remove a style override and inherit styles from the mixin displayed in the Inherits From field, select Remove override.
    Border Define border styling for the mixin by inheriting styles from another mixin or specifying styles for the following:
    • same for all sides — select this check box to specify the same border style for the top, left, right, and bottom borders. Choose from none, solid, dashed, or dotted.
    • If you clear the same for all sides check box, select a border type for the Top, Left, Right, and Bottom borders. For each border, you can select none, solid, dashed, or dotted. Specify the pixel width and color of the border, if applicable.
    Background Define border styling for the mixin by inheriting styles from another mixin or specifying styles for the following:
    • 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 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 End colors of the gradient. Specify a Backup color, in the event that the browser cannot render the gradient.
    • Additional styles — Add additional styles to this element by specifying a CSS Attribute and Value. Click Add additional styles to define another CSS attribute-value pair. Click delete to remove an additional style.

  4. A preview of the mixin displays, as you define it, in the preview area on the right.

    To preview the mixin in use by the mixins and components that reference it, select a component from the Preview with list on the right. This list displays all the components that reference the selected mixin. After selecting a component in which to preview the mixin, click Details to view a summary of where the mixin is used within the component styles. For example, Mixin text style used in Header>>Expanded Text.

  5. Click Save. You can now apply this mixin to elements in the skin.