Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

This content has been archived and is no longer being updated.

Links may not function; however, this content may be relevant to outdated versions of the product.

Modifying an existing mixin

Updated on April 5, 2022

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:

    Removeremove the styles from the element. You can then add styles or inherit styles from another mixin.
    Inherit from a mixinremove the style from the element and select another mixin from which to inherit styles for this element.
    Custom stylesdefine 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 Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us