How To

Add Css

This will add the css to all pages

<?xml version="1.0"?>
<layout>
    <default>
        <reference name="head">
            <action method="addCss">
                <stylesheet>path/to/style.css</stylesheet>
            </action>
        </reference>
    </default>
</layout>

This is will add the css to specific page with the given handler

<?xml version="1.0"?>
<layout>
    <[page handle]>
        <reference name="head">
            <action method="addCss">
                <stylesheet>path/to/style.css</stylesheet>
            </action>
        </reference>
    </[page handle]>
</layout>

Options

<action method="addCss">
  <stylesheet>path/to/style.css</stylesheet>
  <params>id="someid" foo="bar"</params>
  <if>lt IE 8</if>
</action>

Add External Css

<action method="addExternalItem">
  <type>external_css</type>
  <name>//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css</name>
  <params/>
</action>

Master Css

we will combined and minify all the css in to single file to reduce the number of resource request. So to support this we need to remove all the css previously added form any layout files and add one master file.

Not a big deal, we have a simple method to achieve this

<action method="addMasterCss">
  <stylesheet>path/to/master.css</stylesheet>
</action>

This will remove all the css that has been added using addCss and then add the master css.

Remove Css

<reference name="head">
  <action method="removeItem">
     <type>css</type>
     <name>path/to/style.css</name>
  </action>
</reference>

Add Javascript

This will add the Javascript to all pages

<?xml version="1.0"?>
<layout>
    <default>
        <reference name="head">
            <action method="addJs">
                <script>path/to/app.js</script>
            </action>
        </reference>
    </default>
</layout>

This is will add the Javascript to specific page with the given handler

<?xml version="1.0"?>
<layout>
    <[page handle]>
        <reference name="head">
            <action method="addJs">
                <script>path/to/app.js</script>
            </action>
        </reference>
    </[page handle]>
</layout>

Options

<action method="addJs">
  <stylesheet>path/to/app.js</stylesheet>
  <params>id="someid" foo="bar"</params>
  <if>lt IE 8</if>
</action>

Add External Js

<action method="addExternalItem">
  <type>external_js</type>
  <name>//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js</name>
  <params/>
</action>

Master JS

It is same as Master Css

<action method="addMasterJs">
   <script>path/to/master.js</script>
</action>

This will remove all the js that has been added using addJs and then add the master js.

Remove Javascript

<reference name="head">
  <action method="removeItem">
    <type>js</type>
    <name>path/to/app.js</name>
  </action>
</reference>

Add Child Block

 <block class="\Layout\Block" name="parent" as="parent" template="parent">
      <block class="\Layout\Block" name="child.1" as="child.1" template="child.1">
         <block class="\Layout\Block" name="child.1.1" as="child.1.1" template="child.1.1">
      </block>
      <block class="\Layout\Block" name="child.2" as="child.2" template="child.2">
 </block>

Call Child Block

In the view file parent.blade.php you can access the child block by

   {!! $_this->getChildHtml('child.1') !!}
   {!! $_this->getChildHtml('child.2') !!}

This will call all the child blocks.

   {!! $_this->getChildHtml() !!}

Unset Child Block

The unsetChild function will operate using the alias (the as attribute rather than the name attribute.

<reference name="right">                
    <action method="unsetChild"><name>child</name></action>
    //.....
</reference>

you may only want to remove a block from a reference in a specific layout handle, in which case you should use unsetChild. It is often used to remove a block from a reference, but then re-insert the same block with a different position. This would not have been possible with remove.

Remove Child Block

Remove nodes will be processed after all layout handles are merged, and are a good way to remove a block regardless of which layout handle loaded the block, you just want to get rid of it entirely for some handles! It also removes recursively, so all you need to specify is the layout handle.

<reference name="right">                
    <remove name="child" />
    //.....
</reference>

Also, any child blocks declared for a <remove /> block will also not be instantiated.

Add Menu

...

Enable Cache

...

Disable Cache

...

Update Head Section

...

Add Breadcrumbs

...

Create Custom Skeleton

...