Page Builder for developers - Templates and styles

Transcript

All right, moving on to section three, admin and stage theming tasks.

As we’ve talked about previously, files that exist in a content type will follow a basic directory structure. So in this case, you have a web template content type, and then the specific content directory, which in this case is buttons. And then within that buttons directory, you have the name of the appearance, in this case, inline. And then within that directory, you have both template files. It is necessary that the appearance directory match the name of the appearance. As you see in the screenshot, the appearance name is inline and the directory is defined as inline. So looking at creating admin templates, you have the preview.html file, which is the file that will actually preview the content in the admin HTML, and then the master.html template will render the content in the front end.

So where to place those, as we talked about previously, files follow a consistent directory structure. In this case, we’re looking at the buttons content type and the file, the master preview template as you can see in the screenshot here in the slide is within the inline appearance. So just following that directory structure, we start with a web template content type buttons, and then within that buttons content type directory, you have the appearance name of inline, and then within that inline directory is where the appearance templates are hosted. So if you were adding a master template for something like say the banners poster appearance, that would go inside the banner slash poster directory. If you have a content type with only one appearance, then your templates will be hosted inside the default directory because all content types that have only one appearance have to have at least that default appearance. Now adding styles to the admin template, the module.less file is automatically compiled by Magento in the same way as standard modules.

So first you will add a file named module.less to the admin HTML slash web slash CSS slash source slash content type slash example quote directory and second, the module.less file serves as sort of the facade for importing your content types styles. By convention, it should only contain import statements for your content types less files.

And a quick tip, when creating less files for your content type, the less file, the file name should be the same as the content type appearance name. And then of course, as I’ve talked about before, when you have an import.less file, the only thing that should be going in there is the import statements for your content typed appearances. So in the example quote example, there’s only one appearance. So they opted to just put their less inside of that import.less file. Really that should be added within a default.less file and then imported within import.less. And then any other appearances could be added as another less file and then re-imported in that import.less file. And just like all other modules or admin themes, all compiled styles are output to the admin HTML static directory.