9

enter image description here

I wanted to place the contents of style tag in a seperate folder and wanted to include it into this customtext.phtml file.

How can I do this?

1
  • Have you separate css file in your module/theme? Jun 24, 2017 at 5:11

3 Answers 3

8

You can add css file in phtml file using below line,

<link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('css/mystyle.css')?>">

where path of mystyle.css will be at below location,

app/design/frontend/{Packagename}/{themenane}/web/css/mystyle.css

Thanks.

7
  • I have my customtext.phtml file inside my Magento_Search directory. Should I need to give the full path of css file in href ??
    – learner
    Jun 24, 2017 at 10:32
  • If I wanted to add a javascript file how should I do it..?
    – learner
    Jun 24, 2017 at 10:32
  • Try with code, <script type="text/javascript"><?php echo $block->getViewFileUrl('js/myscript.js')?></script> Jun 24, 2017 at 10:48
  • sorry Its not working.. !!
    – learner
    Jun 24, 2017 at 10:54
  • 1
    if you are using modules you can use <link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('MODULENAME::css/mystyle.css')?>">
    – warch
    Apr 10, 2018 at 6:47
5

You should avoid add styles to template. It not good for maintaince and hard to debug in future

For your purposes
Option add css styles to templates
Ex: styles.phtml

/** @var $block your block class extend \Magento\Framework\View\Element\Template **/
<style type="text/css">
   // Your css code here
</style>

Option include file css in template

Layout

<?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">
    <body>
        <referenceBlock name="head.additional">
            <block class="Magento\Framework\View\Element\Template" name="head.additional.custom.styles" template="styles/style.phtml">
                <arguments>
                    <argument name="file_name" xsi:type="string">yourstyle.css</argument>
                </arguments>
            </block>
        </referenceBlock>    
    </body>
</page>

Block Magento\Framework\View\Element\Template is my example. Use your own block to get url, use block class example as ancenstor

Template style.phtml

<?php
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>

<link rel="stylesheet" type="text/css" media="all" href="<?php /* @escapeNotVerified */ echo $block->getCssUrl() ?>"/>

First option for test. You should use second one

0
2

Follow below steps.

Create css file at the below path.

app/design/frontend/Vendor/theme/web/css/customcss.css

Create default_head_blocks.xml file if not exist at below 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!!

1
  • so shall we use classes in any module by just mentioning class name in the tag??!!
    – learner
    Jun 27, 2017 at 8:50

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.