Issues with new CSS resource mmx-customizations

[lesliekirk]

I had created a number of edits throughout the various CSS files associated with PageBuilder plus I was a little lazy and put some of the style in the head tag of the page. Everything was working beautifully until the 10.07 and the introduction of the new CSS resource mmx-customizations

There are two examples in the file which Brennan shared


image_2544.png


I was able to change the font and I was even able to somehow get one of the effects I was creating to halfway work.

I added this

/* Added for hover effect */
mmx-hero picture[slot="image"]:hover > img {opacity: .5}

and it works but the other parts of the hover effect do not work anymore

/* Added for hover effect */
.mmx-hero__image-container {background-color: #1abc9c;}
.mmx-hero__image-container picture img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}

I have tried removing the period, adding a div, and have even placed this in the head tag. It used to work just fine before the update to 10.07. Now even the styles I added to the head tags do not work.

Since I made changes to the 10.06 CSS files why didn't they remain?

If it's just a matter of not using the correct formatting in the new CSS resource mmx-customizations could additional examples be provided so the file will work?

[lesliekirk]

I'd like to add a bit more follow-on to this. When I started tweaking the PageBuilder layout the dev site was at 10.06 with all of the mmx CSS files available. I had run the update to 10.07 on the dev site. It added the mmx-customizations file but NO changes were made the the other mmx CSS files. I could still access them and edit them. This led me to believe all was good so I created the Framework to export. The live site was at 10.07 so I proceeded to create a Branch to ready for the Framework. I first applied the Colossus ReadyTheme to the Branch and noticed I still had the same missing icon issue (which I sort of expected but had hoped it had been fixed). I then applied the Framework I had created and had all sorts of issues. Some were an easy fix - I just had to assign/make active ALL of the PageBuilder CSS and Javascript files. But then I noticed that all of the custom CSS was gone. When I started digging in the live site CSS Resources for the Branch is when I noticed that all of the mmx files were now Module (Manage) N/A. Color me confused when I went back to the dev site and found that they were still available for me to edit.

My confusion has led to irritation because I thought the purpose of the mmx-customizations was going to be THE central location to put all my tweaks (instead of in the mmx-base or other files). I thought this was going to be absolutely perfect (at least until some of these tweaks I had made would become built into PageBuilder allowing the storeowner to easily change a button color). Now I've been told I have to create a new component just to include these simple color tweaks for the buttons on the storefront. I really, really hope I have just misunderstood because I have already tried twice to create a component and failed. Once was just a copy that I downloaded and tried to just repackage.

[SteveoSoule]

It is a little hard to know for sure what happened in the complications you described above without seeing the details of the original source code or framework pkg exports, but I'll do my best to clarify a couple related items.

The purpose of mmx-customizations is to provide a method to overwrite the CSS Variables that exist in mmx-base. This helps avoid the need to edit mmx-base's CSS because editing mmx-base's CSS would break its upgrade capability (and in turn break the upgrade capability of the other components).

CSS added to mmx-customization is added to the Light DOM of the store's runtime web-pages which means it can only style the top-level mmx elements (mmx-hero, mmx-hero-slider, mmx-featured-product, etc.) or their slotted elements (ex mmx-hero picture[slot="image"] img) Any CSS added to mmx-customization is not going to be included into the Shadow DOM of the individual MMX components, so selectors like .mmx-hero__image-container and .mmx-hero__image-container picture img would not travers from the Light DOM into the Shadow DOM. Styles for mmx-hero picture[slot="image"]:hover > img would apply because those elements all exist in the Light DOM. However, many of the elements in the MMX components have [part] attributes added to various elements in the Shadow DOM which allows you to customize them from the Light DOM. https://developer.mozilla.org/en-US/docs/Web/CSS/::part Therefore, in your use-case, you may be able to add CSS that targets the opacity of mmx-hero::part(image-container)

From 10.05.00 through 10.07.00 any styles in the head tag or any CSS file on the page would only be able to customize the Light DOM elements. Any styles that were being applied to the Shadow DOM elements would have had to be applied to the CSS resources of mmx-base or any of the other MMX components' CSS Resources.

Through mmx-customizations you should be able to control any CSS variable that is defined in mmx-base, but you will not be able to add new CSS selectors that target elements in the web-components' Shadow DOM. mmx-customizations allows for an intentionally limited scope of CSS control to provide a balance of minor/essential CSS adjustments to tailor components to a store, while maintaining an automatic upgrade capability with future versions of Miva Merchant and any potential Flex Component bug-fixes or improvements. If more customizations are required than what mmx-customizations can provide, then that is where duplicating a component may be the best way to go so that it can be customized in any way desired. We have added https://github.com/mivaecommerce/flex-components which contains some Flex Component: examples, schema tools, and workflow guides. The Duplicating MMX Components guide depicts some steps that can be used to duplicate any existing MMX component so that it can be customized in any way.

What is the missing icon issue that you are encountering?

With all that said, it sounds like you might be able to customize mmx-customizations through Light DOM selectors and/or ::part() Shadow DOM selectors to create the hover effect on the mmx-heros. Otherwise, you may need to duplicate the mmx-hero component to customize it in the way you're looking to.

Please let me know if that helps resolve your issues or if you have any other questions I can help with. If you're able to link to any source code, template branches previews, or URLs that are showing some issues you're experiencing that would help too.

[lesliekirk]

It is a little hard to know for sure what happened in the complications you described above without seeing the details of the original source code or framework pkg exports, but I'll do my best to clarify a couple related items.

I would be more than happy to send you complete access to any of this.

The purpose of mmx-customizations is to provide a method to overwrite the CSS Variables that exist in mmx-base. This helps avoid the need to edit mmx-base's CSS because editing mmx-base's CSS would break its upgrade capability (and in turn break the upgrade capability of the other components).

This I understood (or thought I did). It's probably something I have been grumbling about.

CSS added to mmx-customization is added to the Light DOM of the store's runtime web-pages which means it can only style the top-level mmx elements (mmx-hero, mmx-hero-slider, mmx-featured-product, etc.) or their slotted elements (ex mmx-hero picture[slot="image"] img) Any CSS added to mmx-customization is not going to be included into the Shadow DOM of the individual MMX components, so selectors like .mmx-hero__image-container and .mmx-hero__image-container picture img would not travers from the Light DOM into the Shadow DOM. Styles for mmx-hero picture[slot="image"]:hover > img would apply because those elements all exist in the Light DOM. However, many of the elements in the MMX components have [part] attributes added to various elements in the Shadow DOM which allows you to customize them from the Light DOM. https://developer.mozilla.org/en-US/docs/Web/CSS/::part Therefore, in your use-case, you may be able to add CSS that targets the opacity of mmx-hero::part(image-container)

This might be pointing me closer to what I need to try.

From 10.05.00 through 10.07.00 any styles in the head tag or any CSS file on the page would only be able to customize the Light DOM elements. Any styles that were being applied to the Shadow DOM elements would have had to be applied to the CSS resources of mmx-base or any of the other MMX components' CSS Resources.

Therein lies the rub - this site is using Colossus because of its great filters on the CTGY Page.

Through mmx-customizations you should be able to control any CSS variable that is defined in mmx-base, but you will not be able to add new CSS selectors that target elements in the web-components' Shadow DOM. mmx-customizations allows for an intentionally limited scope of CSS control to provide a balance of minor/essential CSS adjustments to tailor components to a store, while maintaining an automatic upgrade capability with future versions of Miva Merchant and any potential Flex Component bug-fixes or improvements. If more customizations are required than what mmx-customizations can provide, then that is where duplicating a component may be the best way to go so that it can be customized in any way desired. We have added https://github.com/mivaecommerce/flex-components which contains some Flex Component: examples, schema tools, and workflow guides. The Duplicating MMX Components guide depicts some steps that can be used to duplicate any existing MMX component so that it can be customized in any way.

And this has been a BIG issue for me. I tried more than once to create a Component. Each one failed when I tried to upload it. I'll have to go back through my emails to support providing the exact error message. I even took an unedited set of Component files to create a PKG and still had an error. I had asked support if there is a different set of command line entries for a Mac than a PC but never got an answer. I haven't gone back to try because I was told there would be video coming out that might help me figure out what I'm doing wrong.

What is the missing icon issue that you are encountering?

The icon file for Colossus does not install itself in the location it is being looked for.

With all that said, it sounds like you might be able to customize mmx-customizations through Light DOM selectors and/or ::part() Shadow DOM selectors to create the hover effect on the mmx-heros. Otherwise, you may need to duplicate the mmx-hero component to customize it in the way you're looking to.

This is an extreme irritation for more than one store owner that I have had to explain they cannot make the button colors the color they want them to be. I have already mentioned this needs to be something the store owner can change within the PageBuilder setting. (I have been advising store owners to reach out with their complaints regarding PageBuilder.

Please let me know if that helps resolve your issues or if you have any other questions I can help with. If you're able to link to any source code, template branches previews, or URLs that are showing some issues you're experiencing that would help too.

Thanks, Steve. As I mentioned I would be happy to send anything you need to look into this, including access to the dev site that is at 10.07 and still allows me to access all of the mmx CSS files.

[SteveoSoule]

Therein lies the rub - this site is using Colossus because of its great filters on the CTGY Page.

I'm curious what the rub is here? Colossus, Shadows, and any other framework can all customize their MMX components in the same ways. The Shadow DOM is different from the the Shadows ReadyTheme if that's what you were referring to.

And this has been a BIG issue for me. I tried more than once to create a Component. Each one failed when I tried to upload it. I'll have to go back through my emails to support providing the exact error message. I even took an unedited set of Component files to create a PKG and still had an error. I had asked support if there is a different set of command line entries for a Mac than a PC but never got an answer. I haven't gone back to try because I was told there would be video coming out that might help me figure out what I'm doing wrong.

I'm sorry this has been a big issue for you. If you know the ticket number or have any more details here I'd be happy to take a look and see if we can resolve the error. Did you get a change to review the Guide to Duplicating MMX Components to see if that helps at all?

This is an extreme irritation for more than one store owner that I have had to explain they cannot make the button colors the color they want them to be. I have already mentioned this needs to be something the store owner can change within the PageBuilder setting. (I have been advising store owners to reach out with their complaints regarding PageBuilder.

I'm sorry that this has been irritating. If there are frequent and necessary items that are not able to be customized I'd like to see if we can make them customizable. The button colors can be customized by adding this to the mmx-customizations CSS Resource:

:root {
--mmx-color-primary-bg: red;
}

Does that accomplish what you were looking to do? Or were you more-so looking for a Flex Property that would allow store owners to control the button color on a per-component basis?

If there are any frequent or problematic stylistic requests you're looking to achieve please let me know and I'll see if we can expose those stylistic capabilities or resolve them in some way.

Are there any other effects that you're still struggling to create? If you let me know your goal I can describe some options for the best way to accomplish it.

[SteveoSoule]

The icon file for Colossus does not install itself in the location it is being looked for.

Also, do you have any more details on this? I just tried installing Colossus on a fresh 10.07.00 store and I am not seeing any missing icons or images. Do you have any more details about which icons are missing and how you are able to replicate this?

[lesliekirk]

Also, do you have any more details on this? I just tried installing Colossus on a fresh 10.07.00 store and I am not seeing any missing icons or images. Do you have any more details about which icons are missing and how you are able to replicate this?

This happened to me twice. Once when I installed Colossus on the dev site for this project and then when I installed Colossus on the live site. The dev site had Shadows 10.06 as the primary framework before I installed Colossus. The live site had Suivant.

The little icons at the top of the page for the search and the down carats were missing. For the dev site, Tim (at support) fixed it and only told me

This is a very similar issue to the shadows icon bug as well, the file isn't generated in the branch path but in the normal production path. I just copied the files to the branch path as well so the issue is resolved.

When it happened again I asked what file and Rafael let me know what was found missing

404 - https://mycubanstore.mivatest.com/mm...hemeIcons.woff icon file is located at subdomains/dev/httpdocs/mm5/b02/themes/colossus/ui/css

From there I was able to copy the file into the missing location.

[lesliekirk]

The button colors can be customized by adding this to the mmx-customizations CSS Resource:

:root {
--mmx-color-primary-bg: red;
}

Does that accomplish what you were looking to do? Or were you more-so looking for a Flex Property that would allow store owners to control the button color on a per-component basis?

I tried that right off but it only handles the primary button color. There is also a secondary button color mmx-button mmx-button__secondary. I had been able to tweak both of these in the dev site. This was a simple request that the store owner had and when I looked in the admin I was surprised that he couldn't enter his own color code similar to text background color.

If there are any frequent or problematic stylistic requests you're looking to achieve please let me know and I'll see if we can expose those stylistic capabilities or resolve them in some way.

Are there any other effects that you're still struggling to create? If you let me know your goal I can describe some options for the best way to accomplish it.

The mouseover was also a fairly simple snippet that the storeowner had sent me to implement. It was a bit more challenging but had been doable.

FWIW - I had attempted to create a PageBuilder "wish list" forum thread but I guess I'm the only one with frustrated store owners. I have asked them (the store owners) to reach out to Brennan and Rick with their needs. I don't know if they have. I do like the PageBuilder concept as I have grown very fond of a page-building theme I use for a WordPress (I hated it at first until I discovered how extremely versatile it was and how much I could do with it). I do understand this is meant to be extremely simplistic but changing button colors - come on 'cuz

And another FWIW - this particular store owner has gone through and created a number of pages with PageBuilder. I'll try to go through his emails because there were a couple of other issues he was having with other simple styling issues.

[SteveoSoule]

The little icons at the top of the page for the search and the down carats were missing. For the dev site, Tim (at support) fixed it and only told me

I was able to replicate this by Installing Colossus on a non-production branch. For example, the default Production branch has Shadows (or anything on it), I create a new branch from Production, and then install Colossus on that new branch. For example, the framework installs the assets at /mm5/b02/themes/colossus/ but the resources are loaded on the page from /mm5/themes/colossus/ so copying the assets from /mm5/b02/themes/colossus/ to /mm5/themes/colossus/ is likely what they did to resolve it. I've filed a bug to address this issue.

[SteveoSoule]

FWIW - I had attempted to create a PageBuilder "wish list" forum thread

https://www.miva.com/forums/forum/ge...dream-features seems like a great place for any Page Builder feedback. I've seen some other Page Builder feedback there.

[SteveoSoule]

I tried that right off but it only handles the primary button color. There is also a secondary button color mmx-button mmx-button__secondary. I had been able to tweak both of these in the dev site. This was a simple request that the store owner had and when I looked in the admin I was surprised that he couldn't enter his own color code similar to text background color.

I'll see if we can get some button background color controls added in. I've added a Problem Report to the backlog to see if we can provide some component-level color customization capabilities for at least the button color, but possibly also some of the other Light/Dark theme CSS Variables

Additionally, I've added an item to explore if there's a way we can streamline duplicating existing MMX Components or creating components from scratch. Where you could do something like issue an MMT command, answer a couple questions about the the component you're looking to make (name, code, type, CSS/JS Resource needs, etc.), and it would create/duplicate a flex component.

Please let me know if you're aware of any other issues or if there's anything else I can do to help.

[Rick Wilson]

FWIW right now we have the Page Builder feedback coming in direct as much as possible because it's a high priority item we want to iterate on quickly and then hopefully largely have it be complete.

[lesliekirk]

FWIW right now we have the Page Builder feedback coming in direct as much as possible because it's a high priority item we want to iterate on quickly and then hopefully largely have it be complete.

That is exactly what I am trying to encourage store owners to do. Hopefully, they are.