Page Builder for developers - Theme customization

Transcript

In addition to theming in the admin, you also have to theme for the front end. So let’s look at that.

So just here’s a scenario. Let’s say we’re adding some styles for a content type for multiple themes.

It’s a small change, so shouldn’t require too much work. So let’s just look through this schema here and decide what the best path would be for us. Do you need the customization for only one theme? No, we are working in multiple themes. So the next question would be, do you need a special theme variable? No, you don’t need that. So do you already have a dedicated module for page builder? We don’t, cause this is just a small change. Oh, and is this a small and exceptional modification? Yes, it is. So all we really need to do is put some styles in our existing theme. And if we’re doing it correctly, we can just put it in a parent theme that all our other themes inherit from, and it will apply to all our themes. We’ve talked about the directory structure for styles in the admin. And for the front end, it’s very similar. As you can see here in the screenshot, following the same directory structure, you have web CSS source, and then the content type directory, which all the directories within that, any content type directory should be the name of a component. So let’s say this was the button component that we’re looking at, that directory would be button. If you had some styles that you wanted to apply only to the buttons inline appearance, then you could add a file underscore inline dot less, and then import that within the underscore import dot less file.

You also have the underscore default dot less file to house all of the common styles and styles that are really just for the default appearance. So basic style override in your module is similar for the theme, but you also have additional imports for less files. So you have, just like in any module, you have to have an underscore module dot less file to include your custom styles. And then as we’ve talked about before, adding an import dot less file to import all of your custom appearances. So here’s an example of overriding some styles for the banner content type. I thought if you’re doing this in a theme, then you would put any files that you wanted to override in the same path that you would find that file in the native page builder module directory.

So we are putting our files here in this example in web CSS source content type banner, and then all of the files that are in that directory will override the native dot less files in the page builder extension.

And then of course, if you want to keep any of the files that exist natively, you can just copy the contents of that file into your new dot less file, and those will get added along with any customized less code that you’ve added to your file. So we’ve talked a little bit about the banner content type as an example. If you want to add a style that applies to all the appearances for the banner content type, there is an import dot less file in the banner directory, which imports all appearance less files. The first import is default dot less because it contains all of the common styles. So if you were to select an appearance, any one of these appearance, poster, collage left, collage center, collage right, the styles within default dot less will apply to all of them. So when you want to make a common change, for example, changing the margin or the animation on a button, you can make your change in the default dot less file. Now, if you want to make a style change to one particular appearance, you can put that style in any one of these files that are specific to the appearance you’re wanting to modify. Appearances are applied in the DOM as a data appearance attribute on the main element. To change your appearance styles, you have to add the selector data appearance within your less file in order to apply a particular style to a particular appearance.

This is an example of code generated when you select the collage right appearance and to customize the margin top of the banner button.

So let’s say you wanted to customize the margin top of the banner button. Well, the way you should do that is to add your own collage right dot less file either to a theme or a module with your own styles to override the native margin style shown in this screenshot.

Moving on to templates, it’s important to know there’s a big difference between overriding a template and overriding a style in page builder. If you look at the module tree, you can see that templates are in the admin HTML area, whereas styles are in the front end. You can use your theme to override styles or you can use a module, but for templates you can only use a module because it’s in the admin HTML directory and themes, though you can add a theme for the admin and it’s a lot more cumbersome than to add it for the front end. So it’s way easier to just add your custom templates in a module to override templates for any native content title. So looking at this screenshot here, you can find the structure for your template overrides in content type slash component. If your component has several appearances, you will have one directory for each one. Otherwise you will only have a default directory. So following our use of Banner as an example, we have the Banner configuration XML file, or in this case, Banner.xml. And this example is overriding the master template for the collage write appearance for the Banner content type. You can see the component name, the appearance name, and the template path all defined within their own attributes. So the type node has the name of the Banner. The appearance node has the name of the appearance. And of course it also has the definition for the master template. So the directory structure for the master template should be the same in your own component as it is for in Page Builder. The only difference of course, would just be the module name.

Also, if you want to override any appearance, you can do that just by changing the appearance name attribute. In this case, it’s collage right. This can be collage left, it can be poster. It could also be default.

And here we see the actual directory structure for where you’ve placed your preview and master.html template overrides in your custom module.

So as you can see here by convention, the storefront render template is always named master.html. And then preview.html is the template used to render the markup in the admin.