Originally posted by Rick Wilson
View Post
Announcement
Collapse
No announcement yet.
Issues with new CSS resource mmx-customizations
Collapse
X
-
-
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.
Leave a comment:
-
Originally posted by lesliekirk View Post
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.
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.
Leave a comment:
-
Originally posted by lesliekirk View PostFWIW - I had attempted to create a PageBuilder "wish list" forum thread
Leave a comment:
-
Originally posted by lesliekirk View Post
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
Leave a comment:
-
Originally posted by SteveoSoule View PostThe button colors can be customized by adding this to the mmx-customizations CSS Resource:
Code::root { --mmx-color-primary-bg: red; }
Originally posted by SteveoSoule View PostIf 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.
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.
Leave a comment:
-
Originally posted by SteveoSoule View Post
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?
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 meThis 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.
404 - https://mycubanstore.mivatest.com/mm...hemeIcons.woff icon file is located at subdomains/dev/httpdocs/mm5/b02/themes/colossus/ui/css
Leave a comment:
-
Originally posted by lesliekirk View Post
The icon file for Colossus does not install itself in the location it is being looked for.
Leave a comment:
-
Originally posted by lesliekirk View PostTherein lies the rub - this site is using Colossus because of its great filters on the CTGY Page.
Originally posted by lesliekirk View PostAnd 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.
Originally posted by lesliekirk View PostThis 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.
Code::root { --mmx-color-primary-bg: red; }
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.Last edited by SteveoSoule; 06-27-23, 09:21 AM.
Leave a comment:
-
Originally posted by SteveoSoule View PostIt 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.
Originally posted by SteveoSoule View PostThe 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).
Originally posted by SteveoSoule View PostCSS 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)
Originally posted by SteveoSoule View PostFrom 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.
Originally posted by SteveoSoule View PostThrough 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.
Originally posted by SteveoSoule View PostWhat is the missing icon issue that you are encountering?
Originally posted by SteveoSoule View PostWith 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.
Originally posted by SteveoSoule View PostPlease 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.
Leave a comment:
-
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.
Leave a comment:
-
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.
Leave a comment:
-
Issues with new CSS resource mmx-customizations
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 thisCode:/* Added for hover effect */ mmx-hero picture[slot="image"]:hover > img {opacity: .5}
Code:/* 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; }
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?
Tags: None
Leave a comment: