1

I'm using the RWD theme in the latest Magento CE. I want to edit the homepage only to have a 100% width container within the page content section. I realise I can do this in CSS but it will affect any other element with the same class. How do I go about editing the html for this page only? I presumed it would be in the 1 column phtml - I believe below is the relevant code but I can't see the div class in the content.phtml file either.

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

Any help much appreciated.

1

I'd stick with your first bet, CSS, as it seems you're most comfortable with it.

Magento actually applies a class to every type of page on the site, be it Home Page CMS, Catalog Category, Catalog Product, etc.

For example, your homepage undoubtedly has the following:

<body class="cms-index-index cms-home">

Thus, you could target either the body or any element within the body, inclusive only of the homepage, by doing something like this:

.cms-home .main {
    width: 100%;
}

Just for purposes of comparison, say you want a very narrow product (product pages have a body class of .catalog-product-view) page, you could do something along these lines:

.catalog-product-view .main {
    width:680px;
 }
  • Thank you. The issue here is that in RWD the main class is used for multiple elemeets on CMS home and I only want one div to 'break out' and be 100%. I wonder if adding my own <div> element above the php code in my example, for the home page only, would work? – YorkieMagento Sep 25 '15 at 6:15
  • I wouldn't add a <div>, although that would work as well. Why not add an ID to the element you want to target? – David Lerner Sep 25 '15 at 14:29
  • Also, I'm looking at the RWD theme -- where do you see .main class belonging to more than the single inner content element? – David Lerner Sep 25 '15 at 14:32
0

There are few way ,you can do

By css: In magento,a unique class has been create for <body> tag. And this class name is cms-index-index. css work code like:

.cms-index-index .yourDiv {  do your css works}

By set different root template : assign different template file for root block using layout xml.This should be replicate of 1column.phtml Guss that home page root template file name is 1column-home.phtml.Do the require change on this template file.

Set this template from admin area. Goto CMS>Pages> Select you cms home page >then goto it Design Tab> on field Layout Update XML add below code:

<reference name="root">
    <action method="setTemplate"><template>page/1column-home.phtml</template></action>
</reference>
  • Thanks Amit and I understand that element but how would I edit the actual container names that appear on the home page? For example at the moment there is the 'main container' as standard. I cannot see anywhere in the file structure where it's getting those classes from to add them to the divs... – YorkieMagento Sep 26 '15 at 21:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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