0

I have created a new theme which is inheriting from Luma.

Let's say I want to change the .page-header color, what is the best approach to do this?

Should I use a _extend.less file? Or should I copy a Luma .less file to my theme?

Thanks in advance, Klevis

2 Answers 2

2

Simplest way to extend parent styles
To extend the parent theme’s styles in your theme:

In your theme directory, create a web/css/source sub-directory. Create a _extend.less file there. The path to it looks like following:

<theme_dir>/web/css/source/_extend.less

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):

In your theme directory, create a web/css/source sub-directory. Create a _theme.less file here. The path to it then looks like following:

<theme_dir>/web/css/source/_theme.less

It is important to remember that your _theme.less overrides the parent _theme.less. 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 /web/css/source/_theme.less Make the necessary changes.

Source: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-guide/css_quick_guide_approach.html

P.S. in your case you want to override

4
  • That's what I was thinking and it makes perfect sense. What I don't understand is this part prntscr.com/ii6w9n . I am overriding is the Luma theme. Why is there a /theme-frontend-luma/Magento_Theme and a /theme-frontend-luma/web folder? Commented Feb 22, 2018 at 9:23
  • But if you take a look inside Magento_theme doesnt even contain _theme.less file that you need @KlevisMiho Commented Feb 22, 2018 at 9:32
  • I want to change .page-header color, which is in /theme-frontend-luma/Magento_Theme/web/css/source/_module.less . What approach should I take? Commented Feb 22, 2018 at 9:48
  • Sorry, I'm not an expert in this. This is not what your initial question was. Commented Feb 22, 2018 at 9:56
1

It depends on how many customisations you are making, if you are only making a few small customisations such as changing color then I think it's better to use _extend.less.

If you're making larger customisations such as re-building/re-styling an element, or you need to change say 25% of the styling I recommend copying the file into your theme and overwriting.

I say this as using extend will add your styles on top of the parent theme styles, this isn't great for performance as your loading CSS that is not being used. For small amounts of CSS it's negligible, but if you're using extend to write a lot of CSS you could be unnecessary loading 100s of KBs of CSS.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.