4.03

Modify Page Style

Given a scenario, modify page styles: theme vs module placement, customize vs override LESS, fallback, and including third‑party CSS via layout.

Why This Matters: Styling in Magento spans themes, modules, and layout updates. Knowing when to customize vs override LESS, and how to include third‑party CSS, is essential for clean, upgrade‑safe UI changes.

Page Styling Options

mindmap root((Modify Page Style)) Theme vs Module Theme = current design Module = feature-specific styles Customize LESS _extend.less (theme) Includes other LESS Override LESS Fallback mechanism Theme inheritance Module LESS _module.less (auto-included) Feature-scoped Third-party CSS default_head_blocks.xml Layout update

Choosing Where Styles Live

  • Theme-level (custom theme): All current design styling and changes likely to vary with redesigns.
  • Module-level: Styles tightly coupled to a feature/module and unlikely to change with theme redesign. Use if module is distributed separately or no custom theme exists.

Customize LESS using a Custom Theme

The primary tool to customize (extend) styles without overriding files is _extend.less.

  • Path: app/design/frontend///web/css/source/_extend.less
  • Behavior: Automatically included in the final CSS for every theme build.
  • Pattern: Often used to import other partials, e.g., @import 'components/_buttons.less';
Tip: Prefer _extend.less for additive changes to core/theme styles to remain upgrade‑safe.
app/design/frontend/Vendor/theme/web/css/source/_extend.less
// Example: extend button styles
@import 'components/_buttons.less';
.btn-primary { border-radius: 6px; }

Override LESS using Theme Fallback

Overrides rely on Magento's fallback mechanism (theme inheritance) to replace files from a parent theme or core module.

  • Concept: The “same” file may exist in module, parent theme, and child theme; fallback resolves which one is used.
  • Docs: See Theme Inheritance for sequence rules.
  • Use When: You must replace an entire LESS source instead of extending it.
Note: Overrides are heavier than extensions; use only when necessary.

Use a Module's LESS Files

  • Auto-included entry: view/frontend/web/css/source/_module.less
  • Usage: Keep feature-specific, stable styles here; import other partials if needed.
app/code/Vendor/Module/view/frontend/web/css/source/_module.less
// Example: module-scoped styles
@import 'components/_widget.less';
.vendor-module-widget { margin: 1rem 0; }

Add Third‑Party CSS via Layout Update

Add external/custom CSS from a theme or module by declaring it in a head layout file.

  • Theme layout: app/design/frontend///Magento_Theme/layout/default_head_blocks.xml
  • Module layout: view/frontend/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Vendor_Module::css/custom.css" />
        <!-- Or a theme asset: css/custom.css -->
        <css src="css/custom.css" />
    </head>
</page>
view/frontend/web/css/custom.css

Scenarios Matrix (Summary)

  • Core page, adjust core styles: Extend with theme _extend.less, or module _module.less if feature-scoped.
  • Core page, override core file: Override LESS via theme fallback (prefer a child theme).
  • Custom page, add new LESS: Use theme _extend.less or module _module.less.
  • Add third‑party CSS: Use default_head_blocks.xml to include assets.

Further Reading

Exam Tips

  • _extend.less: Auto-included; best for extending styles in a theme.
  • Overrides: Use fallback to replace whole files via theme inheritance.
  • _module.less: Auto-included for module feature styles.
  • Third‑party CSS: Add via default_head_blocks.xml <css src="..." />.
  • Theme vs Module: Design-level in theme; feature-stable in module.
Previous: 4.02 Modify Layout XML Back to Overview