2

Hi As Below path i have added code ,

app\design\frontend\Magento\luma\Magento_Theme\layout\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"/>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">        
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <css src="css/styles-m.css"/>
        <css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
        <css src="css/print.css" media="print"/>
        <css src="Magento_Catalog::css/custom.css"/>
        <css src="Magento_Catalog::css/responsive.css"/>
        <css src="Magento_Catalog::css/owl.carousel.css"/>
        <css src="Magento_Catalog::css/owl.carousel.theme.css"/>
        <css src="Magento_Catalog::css/font-awesome.min.css"/>


        <!--<script src="Magento_Catalog::js/jquery-1.12.2.min.js"></script>-->
        <script src="Magento_Catalog::js/owl.carousel.js"></script>
        <script src="Magento_Catalog::js/custom.js"></script>  


        <link src="https://fonts.googleapis.com/css?family=Lato:400,700,900" src_type="url" />
    </head>
</page>

Also CSS And JS File As Below Path

app\design\frontend\Magento\luma\web\css

app\design\frontend\Magento\luma\web\js

After run command as

  • php bin/magento cache:clean
  • php bin/magento setup:static-content:deploy

Now On frontend no show me file .please help .

Thanks

3 Answers 3

3

You can call your css and js by using Vendorname_Modulename in in the head block. So you need to pass Vendorname_Modulename

Try below code in your layout.xml file :

<head>
        <css src="Vendorname_Modulename/css/jquery.dataTables.min.css"/>   
</head>

Make sure your css and js location are correct .

app\design\frontend\Magento\luma\Vendorname_Modulename\web\css\yourcss.css

app\design\frontend\Magento\luma\Vendorname_Modulename\web\js\yourjs.js

After that run below commands :

php bin/magento cache:clean

php bin/magento setup:static-content:deploy
4
  • I am Passing Magento_Theme as Vendorname_Modulename , But not working .
    – Mage Rider
    Commented Dec 5, 2016 at 12:00
  • Have you checked your custom theme is active for the store you are checking ? also remove var/generation and pub/static/frontend directory and then run setup:di:compile and setup-static:content:deploy and check it will works ,also pass your custom theme vendorname and theme name. Commented Dec 5, 2016 at 12:03
  • Yes , I have checked . magento/luma theme is activated all store.
    – Mage Rider
    Commented Dec 5, 2016 at 12:16
  • if you have puted your css file - app\design\frontend\Magento\luma\web\css here then you need to call it like - <head> <css src="Magento_luma/css/jquery.dataTables.min.css"/> </head> Commented Dec 5, 2016 at 12:21
2

Add css and js in below respected folder:

app\design\frontend\Magento\luma\Magento_Catalog\web\css

and

app\design\frontend\Magento\luma\Magento_Catalog\web\js

After run below commands:

 - php bin/magento cache:clean
 - php bin/magento setup:static-content:deploy
5
  • Hi I am try with both Magento_Catalog and Magento_Theme But not working .
    – Mage Rider
    Commented Dec 5, 2016 at 11:58
  • Remove pub/static/frontend and var folder and run php bin/magento setup:static-content:deploy command. Commented Dec 5, 2016 at 12:01
  • Nothing change as i was removed both folder.
    – Mage Rider
    Commented Dec 5, 2016 at 12:08
  • Don't change the code which you have mentioned in your question. Just add your css and js in Magento_Catalog respected folder. Commented Dec 5, 2016 at 12:27
  • i m getting custom.css file at \pub\static\frontend\Magento\luma\en_US\css\custom.css , but on home page view page source not showing me .
    – Mage Rider
    Commented Dec 5, 2016 at 12:53
0

To add CSS file follow the below steps:

Open File
app\design\frontend\rwd\default\layout\page.xml
Add the below tag for css:
<action method="addCss"><stylesheet>css/[filename].css</stylesheet></action>

Just below the last method=”addCss” add the above line.
Now open,
skin\frontend\rwd\default\css\[filename].css

Start writing your css code in this file.

To add JS file follow the below steps.

Open File
app\design\frontend\rwd\default\layout\page.xml
Add the below tag
<action method="addItem"><type>skin_js</type><name>js/[filename].js</name></action>

Just below the js include tags similar to the above line.
Now open,
skin\frontend\rwd\default\js\[filename].js

Start writing your js code in this file

I hope this will help you!! cheers !!

Your Answer

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

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