Datafeedr Support Forums  

Go Back   Datafeedr Support Forums > Current Version (V3) Forum > Questions
Home Register FAQ Members List Calendar Search Today's Posts Mark Forums Read

Important - The support forums are now in "read-only" mode as we transition to an alternative help desk solution. Feel free to contact us here with any of your questions or search the forums for an existing solution.
 
 
Thread Tools Search this Thread Display Modes
  #1  
Old November 23rd, 2011, 07:18 PM
seovisions seovisions is offline
 
Join Date: Sep 2011
Posts: 12
Default Custom Product Container Styling

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>
        <
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:
Code:
/*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;
}
  #2  
Old November 23rd, 2011, 09:17 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

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
  #3  
Old November 24th, 2011, 01:53 AM
seovisions seovisions is offline
 
Join Date: Sep 2011
Posts: 12
Default

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>
 


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Add Custom Product mattsway Feature Requests 3 March 10th, 2011 02:40 PM
What's the most efficient way to update styling in many stores now? ayorofrance Questions 2 January 16th, 2011 10:04 AM


All times are GMT -5. The time now is 04:08 AM.


Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.