Close [x]

Simple ways to customize a theme's styles

Edit this page on GitHub

What's in this topic

Let’s say you created a new theme inheriting from Magento Blank or Luma, and chose the LESS compilation mode. What’s next? Where to add the style changes? This topic gives quick answers.

Contents

Simplest way to extend parent styles

To extend the parent theme’s styles in your theme:

  1. In your theme directory, create a web/css/source sub-directory.
  2. Create a _extend.less file there. The path to it looks like following: 
    <theme_dir>/
│  â”œâ”€â”€ web/
│  â”‚   â”œâ”€â”€ css/
│  â”‚   â”‚   â”œâ”€â”€ source/
│  â”‚   â”‚      â”œâ”€â”€_extend.less
...
  3. Add your LESS code in this file.

Extending a theme using _extend.less is the simplest option when you are happy with everything the parent theme has, but want to add more styles.

Simplest way to override parent styles

To override parent styles (that is, override default Magento UI library variables):

  1. In your theme directory, create a web/css/source sub-directory.
  2. Create a _theme.less file here. The path to it then looks like following: 
    <theme_dir>/
│  â”œâ”€â”€ web/
│  â”‚   â”œâ”€â”€ css/
│  â”‚   â”‚   â”œâ”€â”€ source/
│  â”‚   â”‚      â”œâ”€â”€_theme.less
...
    3. It is important to remember that your _theme.less overrides the parent _theme.less.
  3. Copy all variables you need from the parent _theme.less, including those which will not be changed. For example if your theme inherits from Blank, the _theme.less you should copy from is located at <Magento_Blank_theme_dir>/web/css/source/_theme.less
  4. Make the necessary changes.

The drawback of this approach is that you need to monitor and manually update your files whenever the parent’s _theme.less is updated.

Adding structured changes

To make your changes easier to read and support, structure them by adding a separate overriding or extending .less files for each Magento UI library component you change. Let’s use the button component implemented in _button.less as an illustration.

Extend component's styles

  1. In your theme directory, create a web/css/source sub-directory.
  2. Add _buttons_extend.less and _extend.less here. The path to the files looks like following: 
    <theme_dir>
│  â”œâ”€â”€ web/
│  â”‚   â”œâ”€â”€ css/
│  â”‚   â”‚   â”œâ”€â”€ source/
│  â”‚   â”‚      â”œâ”€â”€_buttons_extend.less
│  â”‚   â”‚      â”œâ”€â”€_extend.less
...
  3. In _buttons_extend.less add your styles for the button component.
  4. In _extend.less register the _buttons_extend.less by adding the following code: 
    @import '_buttons_extend.less';

Override component's styles

To extend the parent theme’s styles for buttons in your theme:

  1. In your theme directory, create a web/css/source sub-directory.
  2. Create a _buttons.less file here. The path to it looks like following: 
    <theme_dir>/
│  â”œâ”€â”€ web/
│  â”‚   â”œâ”€â”€ css/
│  â”‚   â”‚   â”œâ”€â”€ source/
│  â”‚   â”‚      â”œâ”€â”€_buttons.less
...
    This file overrides the _buttons.less of the parent theme.
  3. Add your styles for the button component. If the file is left blank, then no styles are applied for the component.

Recommended reading