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!

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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