Adding content block to the Home Page, removing 'std' <div>

Question

I want to do a few things, and I am new and very very far from proficient with Magento; what I am asking for is the best, most concise way to do the following:

1. I would like to edit the content of my home page—and probably every other CMS page, as I get further in this project—in my text editor and not in the admin panel WYSIWYG. I guess I'd just have a template like home-content.phtml containing my markup for my carousel(s) and whatever else I end up putting on my home page. It seemed to me the most logical way to do this is attach my home-content.phtml to the getChildHtml('content') method in Admin panel -> CMS -> Pages -> Home Page -> 'Design' tab -> Layout Update xml with code like this:

   <reference name="content">
               <block type="core/template" name="home-content"
                      as="home-content" template="home-content.phtml" />
   </reference>
   

   However, that was messed up by the next thing I wanted to do...

2. In my opinion, the default Magento HTML structure is horrifically bloated, with too many nested div's (wrapper -> page -> main-container col1-layout -> main -> col-main just to get to the content of a page). It makes styling with Sass a nightmare for me, with all those classes' styles split up into 5 different Sass partials. So, I am cleaning up the default structure to match my own design principals. Part of this means removing empty elements, such as the infamous <div class="std"> </div>. The most efficacious way to get rid of this (as I don't plan on using the admin panel for content) is with <remove name="cms.wrapper"> in the CMS Home Layout Update XML. The problem is, this removes anything I add with the method above (reference name="content").

Basically: How can I add content to my Home Page with a .phtml and remove the <div class="std"> </div> without a conflict? I don't understand how the functionality of admin -> CMS -> layout update XML differs from the functionality of layout.xml, or why I should use one over the other (like, could I not use <cms index-index> to do the same thing?).

Thanks in advance, everyone.

Answer 1

Let us divide your problem into 3 sections and review it.

1. You need to add a template file to your CMS Page

The method you adopt here will work for sure. That is you need to add this code snippet inside your cms page , under design tab

<reference name="content"><block type="core/template" name="home-content"  template="test.phtml" /></reference>

Since your template file directly come under content block, your template content will be rendered by magento. So you dont need to use as property in your core/template block.

2. How to avoid <div class="std"></div>

This div is actually a wrapper div element for cms pages. See the definition of this block here.

  <block type="page/html_wrapper" name="cms.wrapper" translate="label">
        <label>CMS Content Wrapper</label>
        <action method="setElementClass"><value>std</value></action>
        <block type="cms/page" name="cms_page"/>
  </block>

As you can see, cms.wrapper block is of type page/html_wrapper. What this block does is, it will wrap all of its child block with a div element (default element) and render the child blocks automatically.

In order to avoid this block, you have used this code

<remove name="cms.wrapper">

However it is completely wrong. It does remove the wrapper div indeed. But along with that it also removes it child block cms_page. This cms_page is with a type cms/page. That means it reference to the block Mage_Cms_Block_Page. This block is the "heart" of CMS Pages. So removing the wrapper wiped out the heart block of CMS Page also. That is why you didn't get any output in your cms page.

So what you should do to avoid this wrapper? The answer is pretty simple. Escape cms_page from the wrapper and then remove the wrapper safely. So here is the code that you need to use on your cms page layout section.

<reference name="content"><remove name="cms.wrapper" /><block type="core/template" name="home-content"  template="test.phtml" /><block type="cms/page" name="cms_page"/></reference>

As you can see in the layout xml code, we first remove the wrapper and hence inserted cms_page block through our code. We also used our template block as you can see. This will render the content of template file first in your page, then followed by cms page content.

3. How admin -> CMS -> layout update XML differs from the functionality of layout.xml

Suppose you would like to have a special appearance for one of CMS Page that you have in your site. For that, the best method that you can opt is, add layout update through admin->CMS->Layout. This will be uniquely apply for CMS page only.

But if you need to apply some general changes to all CMS Pages, then it would be easy to go with layout.xml.

So generally, what method should adopt to change the layout purely depend upon what you want to achieve. Depending upon that, you need to go with one method. Not all method.

Hope that helps

Answer 2

If there's only one offending page, then the best and easiest way IMO:

Edit the CMS page's "Design" tab.

Reference the wrapper element, use the setElementClass method to apply either no class or a new class.

<reference name="cms.wrapper">
<action method="setElementClass"><value>none</value></action>
</reference>

Answer 3

You should modify the layout, normally 1column.phtml, 2columns.phtml, etc and make them like you want/need.

Those PHTMLs are the basic structure of any layout and are programagically filled with XML updates.

This wont affect anything else if you keep consistency between your templates and layouts in your own theme.

Answer 4

It took me a minute to understand all the directions in the accepted answer, so to piggy-back on it, this is all that was needed to remove the wrapper for all CMS pages: <div class="std"></div>

In cms.xml, change the cms_page block to:

<cms_page translate="label">
    <label>CMS Pages (All)</label>
    <reference name="content">
        <block type="core/template" name="page_content_heading" template="cms/content_heading.phtml"/>
        <block type="cms/page" name="cms_page"/>
    </reference>
</cms_page>