Customizing in Pagebuilder

[lesliekirk]

10.07.00 comes out next week and provides a safe way to customize the CSS across any or all components. There is a new CSS resource named mmx-customizations that allows you to overwrite the CSS variables or import your own fonts. I would wait for this update if you can

Brennan, I had already started doing my customizations before you posted this. I have been putting my work within each of the stylesheets for the Component with notes. I also did a couple "down and dirty" tweaks which I put directly in the head tag of the Page that the component was on (if needed). I updated the dev site to 10.07 and nothing changed (as in I still had access to all of the CSS files and still do) so I thought nothing of it. Then I created a Framework of the ReadyTheme to apply to the live store. The live store had also been updated to 10.07 (but I didn't think to check if the PageBuilder had changed there).

I created a Branch and since the makeover used Colossus, I first applied it to the Branch. I notice and noted that it still had the missing icon issue but moved on to applying the Framework. I noticed a few things looked off but, at first, chalked it up to missing images. Once I got all the missing images in place things still looked off. The custom font face was gone. The custom button colors, gone. A customized image mouseover, gone.

I sent an email to Nick and he explained the new configuration and also pointed out the new CSS resource named mmx-customizations. Okay, I thought I could just add all of my customized CSS to this file (since none of was working in the head tag). THE only thing I have managed to get working again is the custom font and I feel like I did that by accident.

What was supposed to be an easy application of a Framework is stuck with no resolution in sight.

[heatherwebdev]

Hi, I'm trying to get custom css to work and nothing is making any difference. I do have a js error - MMX_HeroSlider is not defined, the page im building doesnt have the hero slider on it, and I made sure all of the css and js resources for pagebuilder are active on the branch that I'm in.

The css that I've added to the customizations css resource is this -

.mmx-hero--content-is-next-to-image {
--mmx-hero__content-padding: 0px;
}

but I've tried changing all text colors as well to test that anything is happening, and neither had any results

[rguisewite]

Ah, that makes sense. The colossus framework (as with most previous frameworks) "delete" all existing resources when being applied, so that only its own resources exist and would not be interfered with by other resources. Further, pre-10.07.00, resources did not have branched delete logic that allowed completely independent resources across branches, so a resource would exist across all branches and only have its content (if inline) branched. In 10.07.00 a few of things changed regarding this.

1. Resources are now fully branched (creation, modification, deletion) so we don't "disable" the branch resources if they exist on other branches/etc instead of deleting them (which was why those resources were disabled and not deleted in 10.06)
2. The default PageBuilder components will be Module resources, which won't be deleted by frameworks/etc (as they are managed by the Flex module).

There were also many other improvements / etc that you probably already read about / saw in the release notes, but this makes sense. I'm glad you were able to figure it out and have the components display / work once again.

[lesliekirk]

Leslie,

Do you have any JavaScript errors in the browser console? Maybe 404 not found errors for resources? Integrity failures? Is it both JS and CSS for the flex components in page builder that aren't working? Do you have some screenshots you could share that show what you're seeing? And just to clarify, it is the (flex) components themselves that are displayed incorrectly, and not the rest of the site, correct?

Yes, the issue was with just the PageBuilder Components. To fix this, I had to go into the Branch and assign/make active ALL of the PageBuilder CSS and Javascript files. Once I did that, the PageBuilder layouts fixed themselves.

[rguisewite]

Leslie,

Do you have any JavaScript errors in the browser console? Maybe 404 not found errors for resources? Integrity failures? Is it both JS and CSS for the flex components in page builder that aren't working? Do you have some screenshots you could share that show what you're seeing? And just to clarify, it is the (flex) components themselves that are displayed incorrectly, and not the rest of the site, correct?

[lesliekirk]

This may or may not be where I need to ask but it looks like the CSS for PageBuilder doesn't "follow along" with a Branch. I created a branch (before updating to 10.07) and applied the Colossus ReadyTheme to it. When I look at the PageBuilder components it looks like none of the CSS/javascript is being applied. I just noticed this and have already applied 10.07 to this dev site so I do not know if the layout was correct before the update. What do I need to do to make it look/work correctly in the branch?

[afiumano]

That is great! - what about the second part:

B. I am using the Category Carousel so show some categories. By default it shows an image and the category name. Is there a way to:
1. Customize the Category Name that appears and
2. Add more text, like a description, under each slide?

[Brennan]

10.07.00 comes out next week and provides a safe way to customize the CSS across any or all components. There is a new CSS resource named mmx-customizations that allows you to overwrite the CSS variables or import your own fonts. I would wait for this update if you can

[afiumano]

I am trying out pagebuilder in a new website design so that we can possibly utilize scheduling in the future. But I am trying to figure out how to 'customize' some components.

A. For example: if I want to use my own font and styling for a header, what is the best practice way of doing that? I don't see a way in pagebuilder to add a css class to an element. So is it safe to edit the css directly? For instance, is it best to just hardcode a custom font family into this class:

.type-title-2,
h4 {
color: var(--mmx-heading-color);
font: var(--mmx-title-3-font);
text-transform: var(--mmx-heading-case);
}

B. I am using the Category Carousel so show some categories. By default it shows an image and the category name. Is there a way to:
1. Customize the Category name and
2. add more text, like a description under each slide?

I attached a screen shot if that helps.