0

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?

Improve this question

1 Answer 1

Reset to default
0

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>
Improve this answer
2
  • 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
    Jan 28, 2019 at 11:00
  • When you inspect the source code of your page, you see the custom css loaded last ?
    – PЯINCƎ
    Jan 28, 2019 at 11:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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