0

I create a new Magento 2 theme extend Luma. I want to add a css file to rewrite the default Luma style.

I add in the default_head_blocks.xml file:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <head>
    <css src="css/custom.css" />
  </head>
</page>

But is not work.

For example I want to replace the search button icon with my image, but custom.css in under the style-l.css. What I can do? I can change the order of the styles?

or what is the best way to change the Luma styles?

enter image description here

5
  • The best way is to use less files and make changes in those files in your theme.
    – Manish Joy
    Commented Jan 17, 2018 at 13:41
  • so if I create a new theme is not any way to rewrite the parent theme style?
    – Robert
    Commented Jan 17, 2018 at 13:43
  • you can easily re-write the style be copying the same file in your theme from parent theme.
    – Manish Joy
    Commented Jan 17, 2018 at 13:45
  • so in my case what file I need to change to remove the search icon and to have only my image?
    – Robert
    Commented Jan 17, 2018 at 13:46
  • I have added an answer, please check that.
    – Manish Joy
    Commented Jan 17, 2018 at 13:52

1 Answer 1

1

In your case, you need to override _icons.less file in your theme and then make changes in that. Example:

Vendor/theme/web/css/source/lib/_icons.less

After changing this, you need to run setup:upgrade so that files from pub get erased and then setup:static-content:deploy

alternatively, you may use grunt to compile less into 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.