CODEWITHSUNDEEP
magento
Rahul negi
Rahul negi

Reputation: 123

How to call css in before closing body tag in magento

Call css in before closing body tag in magento everytime it will show error,I added all js in before body tag closed but when I try to add css it will show error?

1st method=> js and css not working and showing error

local.xml       
 <reference name="before_body_end">
   <block type="core/template" name="footer_js" template="footer/js.phtml">
       <action method="additem"><type>skin_css</type><name>css/abc.css</name></action> 
       <action method="additem"> <type>skin_js</type> <name>js/share_button.js</name></action         
   </block>
 </reference>


footer/js.phtml

<?php echo $this->getCssJsHtml() ?>

2col.phtml=> before closing body tag

<?php echo $this->getChildHtml('footer_js') ?>

2nd method js working bt css not, no error

local.xml

<reference name="before_body_end">
   <block type="core/template" name="footer_js" template="footer/js.phtml"/>
   </reference>

 footer/js.phtml
 <script type="text/javascript" src="<?php echo $this->getSkinUrl('js/jquery-1.11.1.min.js')  ?>"></script>

<link href="<?php echo $this->getSkinUrl('css/negi.css')?>" rel="stylesheet" type="text/css"/>

 2col.phtml=> before closing body tag

 <?php echo $this->getChildHtml('footer_js') ?>

Upvotes: 3

Views: 1407

Answers (3)

Arunendra
Arunendra

Reputation: 570

There is a block with the name before_body_end where you can add everything you want with template or text block.

You need something like this, you have no page/html_head block to refer too:

<!-- get the block which we want our content in -->
<reference name="before_body_end">
    <!-- add another block of type page/html_head to have all the great functionality to add/remove css and js stuff -->
    <!-- it is important to set your own template, because the head block has a defined default template page/head.phtml which has all the stuff of the head. Using this will bring a lot of problems -->
    <block type="page/html_head" name="scripts_in_footer" template="YOUR TEMPLATE">
        <!-- add whatever you want as you are used to in the head via the standard magento api -->
        <action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>
    </block>
</reference>

And inside of your template, you need:

<?php // and to echo the whole stuff later in the template, you need to add the code, so the added js/Css files are echoed ?>
<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>

Upvotes: 0

Rahul negi
Rahul negi

Reputation: 123

local.xml

<reference name="before_body_end">
           <!-- add another block of type page/html_head to have all the great functionality to add/remove css and js stuff -->
           <!-- it is important to set your own template, because the head block has a defined default template page/head.phtml which has all the stuff of the head. Using this will bring a lot of problems -->
           <block type="page/html_head" name="abc" template="footer/abc.phtml">
               <!-- add whatever you want as you are used to in the head via the standard magento api -->
               <action method="addItem"><type>skin_css</type><name>css/negi.css</name></action>
           </block>
       </reference>

Yourtheme/template/footer/abc.phtml

<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>

2col.phtml=> before closing body tag

<?php echo $this->getChildHtml('abc') ?>

Upvotes: 1

jasbir singh
jasbir singh

Reputation: 71

In local.xml

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
        <remove name="right.poll"/>
        <reference name="head">
          <action method="addCss"><stylesheet>css/owl.theme.css</stylesheet></action>
          <action method="addCss"><stylesheet>css/owl.carousel.css</stylesheet></action>
          <action method="addCss"><stylesheet>css/bootstrap.min.css</stylesheet></action>
          <action method="addCss"><stylesheet>css/font-awesome.min.css</stylesheet></action>
          <action method="addCss"><stylesheet>css/custom-style.css</stylesheet></action>

          <action method="addItem"><type>skin_js</type><name>js/bootstrap.min.js</name></action>
           <action method="addItem"><type>skin_js</type><name>js/responsive-accordion.min.js</name></action>
          <action method="addItem"><type>skin_js</type><name>js/responsiveCarousel.min.js</name></action>
          <action method="addItem"><type>skin_js</type><name>js/jquery.hammer.min.js</name></action>
          <action method="addItem"><type>skin_js</type><name>js/custom.js</name></action> 
           <action method="addLinkRel"><rel>stylesheet</rel><href>//fonts.googleapis.com/css?family=Montserrat:400,700</href></action>
           <action method="addLinkRel"><rel>stylesheet</rel><href>//fonts.googleapis.com/css?family=Raleway:400,900,800,700,600,300</href></action>
          <!--Remove CSS and JS, skin Folder-->
           <!--action method="removeItem"><type>skin_css</type><name>css/styles.css</name></action-->

        </reference>
    </default>

Upvotes: 0

Related Questions