10

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?

Improve this question
3
  • did you got this sorted out ? or do you have any alternate on this. let me know if you find out some Commented Apr 6, 2016 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. Commented May 25, 2016 at 15:15
  • I found the solution, please check below answer. Commented May 26, 2016 at 3:50

4 Answers 4

Reset to default
9

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

<head>
    <css src="Namespace_YourModule::css/styles.css"/>
</head>
Improve this answer
7
  • Because I need to add dynamic css file. Commented Dec 1, 2015 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... Commented Feb 8, 2016 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. Commented Feb 9, 2016 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.. Commented Feb 9, 2016 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... Commented Feb 9, 2016 at 13:26
9

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>
        <referenceBlock name="head.additional">
            <block class="Magento\Framework\View\Element\Template" name="block_name" template="custom_head.phtml" />
        </referenceBlock>
    </body>
</page>

In custom_head.phtml file

<link rel="stylesheet" type="text/css" media="all" href="<?php echo $_helper->getCSSFile()?>">
Improve this answer
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!!

Improve this answer
2
  • Do I need to run any grunt commands after doing this? Commented May 23, 2016 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>? Commented May 25, 2016 at 15:17
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

Improve this answer
3
  • Thanks for the answer. It worked for me. Now css is applied in all pages using this file. Commented Oct 21, 2017 at 17:50
  • Can you help me, how I can now apply it for only in product page Commented Oct 21, 2017 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 ! Commented Oct 29, 2017 at 18:03

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.