Close [x]

Simple ways to customize a theme's styles

Edit this page on GitHub

What's in this topic

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

Contents

Simplest way to extend parent styles

To extend the parent theme鈥檚 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鈥檚 _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鈥檚 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鈥檚 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