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? Commented 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. Commented 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? Commented Sep 16, 2016 at 9:36
  • And you can define colors like that: @color-red9: #ff0101;. Commented 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. Commented Sep 16, 2016 at 9:42

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.