I'm sure many of you come across this issue: in some third party themes, many predefined styles and css generated from theme configuration (located in pub/media/{theme}) are loaded in
/{vender}/{theme}/Magento_Theme/template/html/head.phtml
which have priority over your custom theme that is usually defined in
/{vender}/{child_theme}/Magento_Theme/layout/default_head_blocks.xml
because the css files in head.phtml always loads after the custom css.
The theme I'm using is Smartwave_porto, so far I can only resolve it by removing the css files from head.pthml, then use symlinks to create the same files and load them in default_head_blocks.xml together with my custom css. I wonder if there's better solutions to this?
1 Answer 1
You can add the media="all" attribute in css declaration, with this Magento add it in the last of css files.
Why last ? because a property that redefined in the last CSS file, it will override the previous property statements one.
app/design/frontend/{Vender}/{child_theme}/Magento_Theme/layout/default_head_blocks.xml
<head>
<css src="css/custom.css" media="all"/>
</head>
-
I've already tried that and it doesn't work. It seems the css defined in head.phtml always have priority over the css defined in default_head_blocks.xml. Regardless of using media="all" or not. I'm on Magento 2.3 btw.Ethan Wan– Ethan Wan2019年01月28日 11:00:49 +00:00Commented Jan 28, 2019 at 11:00
-
When you inspect the source code of your page, you see the custom css loaded last ?2019年01月28日 11:22:28 +00:00Commented Jan 28, 2019 at 11:22