The best place to override Page Builder’s default styles for native content types is within your Admin and frontend themes. For your own custom or extension modules, you should first add your overriding styles to your modules, as explained in Use modules to override styles.
In this topic, you will learn how to use Admin and frontend themes to override the default styles that Page Builder applies to its out-of-the-box content types.
Steps to override Admin themes
To override Page Builder styles used in the Admin, you need to:
- Create or modify an Admin theme.
- Apply the Admin theme to a module.
Step 1: Create or modify an Admin theme
The following instructions refer only to the specifics of overriding Page Builder Admin styles. To learn more on creating Admin themes in general, see Create an Admin theme.
Your overriding Admin theme should have a directory and file structure similar to the following:
1 2 app/design/adminhtml/VendorName/ThemeName/web/css/source/content-type/<specific overrides> app/design/adminhtml/VendorName/ThemeName/web/css/source/_module.less
:arrow_up: Admin theme directory structure
The key takeaways are numbered in the image and described as follows:
Content types. Organize your overriding styles according to the Page Builder content-types you want to override. In this example, we added the
design/adminhtml/VendorName/ThemeName/web/css/source/content-type/directory with the
productscontent types we want to override.
Overriding stylesheets. Name your overriding
.lessfiles to match the appearance names of your content types. In this example, the
headingcontent type has one appearance:
default. However, the
productscontent type has two appearances
carousel, so we create one
.lessfile for each. This convention helps organize your overriding styles to finding and updating them later.
Import files. Include an
_import.lessfile for each content type directory. This file should only contain
@importstatements for all the overriding files in the directory. Using import files like this helps keep your changes closer to where they occur. In our example, the
_import.lessfile for our
productscontent type contains two imports:
@import '_default.less'; @import '_carousel.less';
_module.lessfile is required and must be added directly to your Admin theme’s
sourcedirectory. Magento uses this file to add your Admin styles to the
pub/static/adminhtmloutput, where they can override the default Admin styles, including Page Builder’s default content-type styles. Like the
_module.lessfile should only contain
@importstatements. In our example, our
_module.lesscontains two imports:
@import 'content-type/heading/_import.less'; @import 'content-type/products/_import.less';
Step 2: Apply the Admin theme to a module
The following instructions are specific to applying an Admin theme to a custom Page Builder module. To learn more on applying Admin themes to modules in general, see Apply an Admin theme.
To apply your Admin theme to a module:
di.xmlfile (in your module’s
etcdirectory) that references your Admin theme. The following example adds the
VendorName/ThemeNameAdmin theme that we just created:
1 2 3 4 5 6 7 8 9 10 11 12 13
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <!-- Admin theme --> <type name="Magento\Theme\Model\View\Design"> <arguments> <argument name="themes" xsi:type="array"> <item name="adminhtml" xsi:type="string">VendorName/ThemeName</item> </argument> </arguments> </type> </config>
Upgrade your module, clean the cache, and reload the Admin in the browser:
Steps to override frontend themes
To override Page Builder styles on the storefront, you need to:
- Create or modify a frontend theme.
- Apply the frontend theme to a store view or page.
Step 1: Create or modify a frontend theme
The following instructions refer only to the specifics of overriding Page Builder frontend styles. To learn more on creating frontend themes in general, see Create a new storefront theme.
Your overriding frontend theme should have a directory and file structure similar to the following:
1 2 app/design/frontend/VendorName/ThemeName/web/css/source/content-type/<specific overrides> app/design/frontend/VendorName/ThemeName/web/css/source/_extend.less
:arrow_up: Frontend theme directory structure
The first three numbered callouts (1, 2, 3) for the frontend theme are identical in description to the Admin theme previously described. The only difference for frontend themes is that the
_module.less file should be named
:four: _extend.less. The
_extend.less file is required and must be added directly to your frontend theme’s
source directory. Magento uses this file to add your frontend styles to the
pub/static/frontend output in a location within the
styles-m.css where they override (instead of replace) the default frontend styles, including Page Builder’s default content-type styles. Like the
_import.less files, the
_extend.less file should only contain
@import statements. In our example, our
_extend.less contains the same two imports as seen in
1 2 @import 'content-type/heading/_import.less'; @import 'content-type/products/_import.less';
Step 2: Apply the frontend theme
The following instructions are here as a reminder to apply your frontend theme to a store view or page. If you forget, you won’t see your style overrides in the storefront. To learn more on applying themes in general, see Apply a storefront theme.
To apply your frontend theme to a store view:
Navigate to Content > Design > Configuration and edit the store view where you can apply your frontend theme as the default theme:
:arrow_up: Set default frontend theme for store view
To apply your frontend theme to a page:
During development, it’s easy to apply your frontend theme to a single page for testing, but it’s also easy to forget to switch your page to that theme.
On any CMS page, scroll to the Design section at the bottom, and select your theme from the New Theme selector.
:arrow_up: Set frontend theme for page
More about themes
For more information on overriding styles using themes, see Simple ways to customize a theme’s styles.