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?
asked Jan 17, 2018 at 13:18
Robert
2,1863 gold badges39 silver badges86 bronze badges
-
The best way is to use less files and make changes in those files in your theme.Manish Joy– Manish Joy2018年01月17日 13:41:06 +00:00Commented Jan 17, 2018 at 13:41
-
so if I create a new theme is not any way to rewrite the parent theme style?Robert– Robert2018年01月17日 13:43:46 +00:00Commented 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– Manish Joy2018年01月17日 13:45:43 +00:00Commented 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– Robert2018年01月17日 13:46:58 +00:00Commented Jan 17, 2018 at 13:46
-
I have added an answer, please check that.Manish Joy– Manish Joy2018年01月17日 13:52:32 +00:00Commented Jan 17, 2018 at 13:52
1 Answer 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.
answered Jan 17, 2018 at 13:52
Manish Joy
1,22513 silver badges28 bronze badges
Explore related questions
See similar questions with these tags.
default