Skip to content

Flex Component Styling#

The mmx-customizations CSS resource is designed to allow store developers and theme editors to modify the visual appearance of MMX Flex Components without altering their core source code. This ensures that updates to base components (like mmx-hero, mmx-button, etc.) don’t overwrite customizations during theme upgrades.

Included in the Shadows Framework, this resource is automatically injected into every MMX component via:

<mvt:item name="head" param="css:mmx-customizations" />

To use you must manually activate under User Interface > CSS Resources in Miva admin.

How to Use mmx-customizations#

1. Access the CSS Resource#

  • Go to User Interface > CSS Resources
  • Locate mmx-customizations (confirm it is activated)

2. Add or Edit Styles#

Use the CSS editor to:

  • Import web fonts
  • Override global MMX CSS variables from mmx-base
  • Style component parts via ::part() selectors

Example: Overriding MMX Variables#

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;400&display=swap");

:root {
  --mmx-font-family-1: "Poppins", sans-serif;
  --mmx-color-primary-bg: #aaaaaa;
}

mmx-image-across {
  --mmx-color-primary-bg: #cccccc;
}

These variables are defined in mmx-base and can be overridden globally.

Styling Shadow DOM with ::part()#

Since MMX components are Web Components with encapsulated styles, elements inside the Shadow DOM cannot be styled directly. However, MMX exposes specific targets using part attributes which can be styled from the Light DOM:

Example: Targeting MMX Elements#

mmx-hero::part(button__inner) {
  text-transform: uppercase;
}

mmx-image-and-text mmx-text[slot="heading"]::part(text__inner) {
  border-bottom: 3px solid black;
  margin: 1rem;
}

More Examples#

mmx-button::part(button),
mmx-product-carousel::part(button__inner) {
  text-transform: uppercase;
}

Exported Parts#

Some components nest other web components. To style these children, the parent must expose parts using the exportparts attribute:

<mmx-text exportparts="text: parent-text"></mmx-text>

Then you can style it via:

mmx-parent::part(parent-text) {
  color: red;
}

Limitations and Considerations#

  • Scope: mmx-customizations affects only styles defined in the Light DOM. Use ::part() for internal shadow DOM access.
  • CSS Variables: You can override variables defined in mmx-base, but cannot invent new variables recognized by MMX components.
  • Custom Fonts: Only fonts declared in mmx-customizations (or globally) will affect MMX elements.
  • Customizing Beyond Limits: For deep structural or behavior changes, consider copying and modifying the component entirely.

Theme Editor#

In Miva 10.12.00, Theme Editor introduced a new way to customize the styling of Flex Components. Included in the CSS resources section is the mm-theme-styles CSS resources which can be used to render the stylesheet containing all the theme styles.

Included in the Shadows Framework, this resource is added to every MMX component via:

<mvt:item name="head" param="css:mm-theme-styles" />

This CSS resource is a Module (Managed) and should be set to Global and Active.

Global Theme Styles#

The mm-theme-styles resource can be added to any template so that pages outside of PageBuilder can inherit the styling.