Custom Product Container Styling

[seovisions]

Id: 11aiz14xmyr6jsca
URL: http://www.homeremedyhaven.com/natural-products/

There has got to be a better way of writing custom layouts then overriding the css built in. Overriding the #view cascades through all product views which is just wrong. Case in point:

The built in template view used

PHP Code:

<div class="pl">
  [product.each]
  <div class="t3 col2">
    <div class="bdr">
      <div class="lc">
        <div class="thmb"><a href="[product.link]" title="[product.name]">[product.image tag='1']</a></div>
        <div class="prc">[product.currency mode='sign'][product.price]</div>
      </div>
      <div class="rc">
        <h2><a href="[product.link]" title="[product.name]">[product.name]</a></h2>
        <p class="desc">[product.description]</p>
        <div class="btns">
      <a href="[product.link]" title="[product.name]" class="dfbutton dfsilver dfsmall">Details</a>
      <a href="[product.url direct='0']" title="[product.name]" class="dfbutton dfsilver dfsmall">Buy</a>
        </div>
      </div>
      <div class="clearingdiv"> </div>
    </div>
  </div>
  [product.end]
  <div class="clearingdiv"> </div>
</div> 


The custom template I would like to be able to use:

PHP Code:

    [product.each]
        <div class="product">
                <a href="[product.link]" title="[product.name]">[product.image tag='1']</a>
                <div class="product_description">
                    <p><a href="[product.link]" title="[product.name]">[product.name]</a></p>
                    <p>[product.description]</p>
                </div>
                <div class="clear"></div>
            
            <div class="product_price">
                <div>[product.currency mode='sign'][product.price]</div>
                <div><a href="[product.link]" title="[product.name]" class="dfbutton dfsilver dfsmall">Details</a><a href="[product.url direct='0']" title="[product.name]" class="dfbutton dfsilver dfsmall">Buy</a></div>
            </div>
        </div>
     [product.end]
     <div class="clear"> </div> 


The documentation and tutorials don't go over details on how to go about this.

The problem with using the override approach, or customizing the built in templates, can be seen on the website when you click on the product and see related products. The CSS classes that make up the related products is the same, even though the structure is different.

I'm truly looking for help, here or some guidance.

The CSS for the custom approach is:

/*Product Containers */
.product{
overflow:hidden;
display:inline-block;
width:364px; 
float:left;
height:235px; 
border-right:1px solid #e9eaeb;
border-bottom:1px solid #e9eaeb;
}
.product img:first-child{
width:130px; 
float:left;
height:185px;
text-align:center;
border:0;
}
.product_description{
width:230px; 
float:left;
height:185px; 
}
.product_description p:first-child{
text-transform:uppercase;
color:#161616;
font-weight:bold;
font-size:14px;
}
.product_description p:last-child{
padding-right:10px;
}
.product_price{
background-image:url(images/priceboxbg.jpg);
background-repeat:no-repeat;
width:360px;
height:50px
}
.product_price div:first-child{
width:130px; 
float:left;
height:50px;
text-align:center;
color:#b97b2a;
font-size:26px;
padding-top:8px;
}
.product_price div:last-child{
width:220px; 
float:left;
height:50px;
text-align:right;
padding-top:8px;
padding-right:10px;
}

[Eric]

Hi

I guess I don't know what you're going for... You can use that custom template and just give it a different CSS id ( The Factory > Your Store > VIEWS > your view > View menu > View Properties > Custom CSS ID ).

Then you have your own custom CSS ID to use on your pages that you can then apply CSS styling against.

Eric

[seovisions]

Thanks. got it done with my original and just toyed with tehthe CSS to line it up into a 2 column.

[product.each]
<div class="product">
<a href="[product.link]" title="[product.name]">[product.image tag='1']</a>
<div class="product_description">
<p><a href="[product.link]" title="[product.name]">[product.name]</a></p>
<p>[product.description]</p>
</div>
<div class="clear"></div>

<div class="product_price">
<div>[product.currency mode='sign'][product.price]</div>
<div><a href="[product.link]" title="[product.name]" class="dfbutton dfsilver dfsmall">Details</a><a href="[product.url direct='0']" title="[product.name]" class="dfbutton dfsilver dfsmall">Buy</a></div>
</div>
</div>
[product.end]
<div class="clear"> </div>