8

In Magento 1.x, I can add the CSS files into the head using the helper like below code.

<reference name="head">
    <action method="addCss"><stylesheet helper="module/helperclass/helperfunction"/></action>
</reference>

Anyone know how to do this in Magento 2?

  • did you got this sorted out ? or do you have any alternate on this. let me know if you find out some – Dev Apr 6 '16 at 6:29
  • 1
    sorry, I have no solution yet. now, I added this code <link rel="stylesheet" type="text/css" media="all" href="<?php echo $_helper->getCSSFile()?>"> into "after.body.start" container. – Mike May 25 '16 at 15:15
  • I found the solution, please check below answer. – Mike May 26 '16 at 3:50
9

You don't need helper, you can using this code below in your layout:

<head>
    <css src="Namespace_YourModule::css/styles.css"/>
</head>
  • Because I need to add dynamic css file. – Mike Dec 1 '15 at 9:47
  • Can you please provide the src example for contact module if i want to add style.css file in the page with the contact form ? I tried <css src="Magento_Contact::css/styles.css"/> but it didn't work... I am missing the flow of magento includes apparently. The styles.css file is in the module-contact/view/css/ folder... – Lachezar Raychev Feb 8 '16 at 9:36
  • Hello @LachezarRaychev, if your handle in frontend, you need create styles.css file in ../view/frontend/css/style.css. With backend, you need create styles.css file in ../view/adminhtml/css/style.css. – Thao Pham Feb 9 '16 at 13:00
  • tried that and put #contact-form{ border:1px solid blue !important; } did not work... file is in view/frontend/css/styles.css and <css src="Magento_Contact::css/styles.css"/> is in contact_index_index.xml in the <head></head> element .... no blue border around the form... really weird.. – Lachezar Raychev Feb 9 '16 at 13:10
  • Nvm... i had to create the folder Magento_Contact in static/frontend/Magento/luma/sv_SE and inside create the css/ folder and inside put the styles.css file... now it works. I just thought that that way it would import the file form inside the module-contact/view/frontend/css/ folder... – Lachezar Raychev Feb 9 '16 at 13:26
8

Try this steps.

  1. Create css file under this directory. app/design/frontend/Vendor/theme/web/css/customcss.css
  2. Create default_head_blocks.xml file if not exist at this path app/design/frontend/Vendor/theme/Magento_Theme/layout/default_head_blocks.xml

Put below code in default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
        <css src="css/customcss.css" />
    </head>
</page>

Hope this helps you!!

  • Do I need to run any grunt commands after doing this? – TheBlackBenzKid May 23 '16 at 11:03
  • 1
    the css file name is dynamic. now, I added this code <link rel="stylesheet" type="text/css" media="all" href="<?php echo $_helper->getCSSFile()?>"> into "after.body.start" container, how can I add this code into <head>? – Mike May 25 '16 at 15:17
6

I found the solution myself.

In Layout xml file.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="head.additional">
            <block class="Magento\Framework\View\Element\Template" name="block_name" template="custom_head.phtml" />
        </referenceContainer>
    </body>
</page>

In custom_head.phtml file

<link rel="stylesheet" type="text/css" media="all" href="<?php echo $_helper->getCSSFile()?>">
1

Create custom model

add xml file Namespace/YourModule/view/frontend/layout/default_head_blocks.xml

this file will change head layout using page configuration read more on http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-types.html#layout-types-conf

file content example

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Namespace_YourModule::css/custom.css" />
    </head>
</page>

then add css file on this path Namespace/YourModule/view/frontend/web/css/custom.css

  • Thanks for the answer. It worked for me. Now css is applied in all pages using this file. – Vinay Sikarwar Oct 21 '17 at 17:50
  • Can you help me, how I can now apply it for only in product page – Vinay Sikarwar Oct 21 '17 at 17:53
  • Not sure about this but what about .catalog-product-view body class that magento use on products page you could inherit CSS properties from it ! – Mohamed Abo Badawy Oct 29 '17 at 18:03

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.