0

I created a custom Theme with "Luma" as its parent.

Now I want to override .less / css stylings. (for example "header" background color) Thats the Folder structure I have: Folder Structure

I did copy "_module.less" from "vendor/magento/theme-frontend-blank/Magento_Theme/web/css/source" to "Magento_Theme/web/css/source/" in my custom theme folder and changed the "_module.less" file but It didnt override styles, so it didnt apply on my webshop.

I deleted the theme files in "/pub/static" and flushed magento cache, with no results.

Does anyone know how to override ".less" / css stylings of the default / luma theme? I want to customize the luma theme, thats why I created my custom theme and now Id like to change some css styles.

Thanks alot!

Improve this question

1 Answer 1

Reset to default
0

To override parent styles, you should create the following:

  1. In your theme directory, create a web/css/source sub-directory.
  2. Create a _theme.less file there.
  3. Copy all variables you need from the parent <Magento_Luma_theme_dir>/web/css/source/_theme.less, including those which will not be changed.
  4. Make the necessary changes.

More info under: Magento Developer Docs

Improve this answer
9
  • I did that now, but I cant see "variables" for "@primary__color" for example. So How could I change header background-color in "_theme.less" from the Luma Theme?
    – N1njaWTF
    Sep 16, 2016 at 9:08
  • The colors are in web/css/source/lib/variables/_colors.less. But you can define your own color as well in your theme folder: <Your_theme_dir>/web/css/source/_variables.less.
    – ps202
    Sep 16, 2016 at 9:30
  • Cant find that Path. Looks like it doesnt exist.. So, if i would have that file "_colors.less", could I copy the stuff and paste into "_theme.less" to override colors?
    – N1njaWTF
    Sep 16, 2016 at 9:36
  • And you can define colors like that: @color-red9: #ff0101;.
    – ps202
    Sep 16, 2016 at 9:38
  • You do not need to. You can just define a color like above: "@primary__color: #ff0101; in your _theme.less file.
    – ps202
    Sep 16, 2016 at 9:42

Your Answer

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

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