LinkedIn
Copied!

Table of Contents

Modifying an existing mixin

Version:

Only available versions of this content are shown in the dropdown

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 Color Picker.
    • 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 Color Picker.
    • 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 Component styles (custom style formats) to elements in the skin.

  • Skin rules

    Use the skin to specify the presentation of your content. You can style all presentation elements of your interface in the skin, including typography, borders, backgrounds, layouts, and UI placement and alignment. By defining presentation attributes in the skin, you separate the content that is defined in sections and harnesses from its presentati

  • About mixins

    Use the Mixins tab to define mixins. A mixin is a reusable style pattern.

  • Defining a new mixin

    To create a new mixin, click Add. The mixin is populated with default values.

  • Deleting a mixin

    You cannot delete a mixin if another mixin or component inherits styles from that mixin. Mixins and components that reference the selected mixin display in the Preview with list on the right.

  • Determining where a mixin is referenced

    Determining where a mixin is referenced

  • Skin rules - Renaming a mixin

    Renaming a mixin

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.