Related categories how to change amount per row

[Snostar]

I can't find the setting for amount of products per row for related categories showing....where would that be?

If you look at this link:

http://www.joomla25.meadowsmedical.com/index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=67&virtuemart_category_id=72&Itemid=562

They run down one row, I'd like them 3 or 4 across.

Thanks

[PRO]

http://forum.virtuemart.net/index.php?topic=102850.0

What you need to do is change change the css

for 3
.product-field-type-Z {width:33%;float:left;}

[Snostar]

Thank you, perhaps you could help me with more specifics  my css looks like this:

/* Manufacturer View Default */
.manufacturer-view-default .row .manufacturer .spacer {padding: 6px;}
.product-field-display a img{display: block;}
.product-related-products, .product-related-categories{border-top:solid #ccc 1px;padding-bottom: 10px;}
.product-fields .product-field-type-P{clear: both; border-bottom: 1px solid #EEEEEE; margin-top: 18px;}
.product-field-type-P .product-fields-title{ font-size: 120%;}
.product-field-type-B,.product-field-type-S,.product-field-type-I{ padding: 3px 0px; }
.product-fields-title{ font-weight: bold;vertical-align: middle;}

.product-field .hasTip img {
  vertical-align: middle;
}


I don't have any type-z and I have no idea where to put your suggested changes...thanks!

[PRO]

Thank you, perhaps you could help me with more specifics  my css looks like this:

/* Manufacturer View Default */
.manufacturer-view-default .row .manufacturer .spacer {padding: 6px;}
.product-field-display a img{display: block;}
.product-related-products, .product-related-categories{border-top:solid #ccc 1px;padding-bottom: 10px;}
.product-fields .product-field-type-P{clear: both; border-bottom: 1px solid #EEEEEE; margin-top: 18px;}
.product-field-type-P .product-fields-title{ font-size: 120%;}
.product-field-type-B,.product-field-type-S,.product-field-type-I{ padding: 3px 0px; }
.product-fields-title{ font-weight: bold;vertical-align: middle;}

.product-field .hasTip img {
  vertical-align: middle;
}


I don't have any type-z and I have no idea where to put your suggested changes...thanks!

just add this

.product-field-type-Z {width:24%;float:left;}

right under this
.product-fields-title{ font-weight: bold;vertical-align: middle;}

[Snostar]

Thanks...it worked!

But my "Reviews" section popped up into the same row on the very right.  I disabled the reviews and expanded the width to 30%...it's perfect.

Thank you so much!!!

[PRO]

all you have to do is add a
<br/>   at the end of the file


views/productdetails/tmpl/default_relatedcategories.php

http://forum.virtuemart.net/index.php?topic=90935.0

[Snostar]

Thank you so much!

Now I just have to figure out where in that css I can do the same for Related Products...?

[PRO]

Thank you so much!

Now I just have to figure out where in that css I can do the same for Related Products...?

default_relatedproducts.php

change this
<div class="product-field product-field-type-<?php echo $field->field_type ?>">

to this

<div class="width25 product-field product-field-type-<?php echo $field->field_type ?>">

[Snostar]

I found it in here:
/html/components/com_virtuemart/views/productdetails/tmpl

And changed it, saved it, uploaded the new file fine, refreshed browser, ect. ... but it didn't work

    <div class="product-related-products">   
   <h4><?php echo JText::_('COM_VIRTUEMART_RELATED_PRODUCTS'); ?></h4>   
<?php    foreach ($this->product->customfieldsRelatedProducts as $field) {   ?>
<div class="width25 product-field product-field-type-<?php echo $field->field_type ?>">      
    <span class="product-field-display"><?php echo $field->display ?></span>      </div>   <?php } ?>        </div>

Did I miss something? I replaced the right line....Thanks!

[PRO]

where you added this
.product-field-type-Z {width:24%;float:left;}

change it to this

.product-field-type-Z ,.width25{width:24%;float:left;}

[Snostar]

Thank you, that seemed to help, but if you could take a look at:http://www.joomla25.meadowsmedical.com/index.php?option=com_virtuemart&view=productdetails&virtuemart_product_id=78&virtuemart_category_id=72&Itemid=562

The products are too close together and I'm not sure where to find the cellpadding, also my "Related Categories" doesn't start on a new line.


my css filereads:
/* Manufacturer View Default */
.manufacturer-view-default .row .manufacturer .spacer {padding: 6px;}
.product-field-display a img{display: block;}
.product-related-products, .product-related-categories{border-top:solid #ccc 1px;padding-bottom: 10px;}
.product-fields .product-field-type-P{clear: both; border-bottom: 1px solid #EEEEEE; margin-top: 18px;}
.product-field-type-P .product-fields-title{ font-size: 120%;}
.product-field-type-B,.product-field-type-S,.product-field-type-I{ padding: 3px 0px; }
.product-fields-title{ font-weight: bold;vertical-align: middle;}
.product-field-type-Z ,.width25{width:24%;float:left;}                     <------ I PUT ",<br/>" thinking that would break and put the realed categories below but it didn't

Thanks gain, you have been a trmendous help!

[PRO]

Its not the padding, it does not have enough room

add this to your css


product-field product-field-type-R {width:33%;float:left;}

and remove the width25
from this

<div class="product-related-products">   
   <h4><?php echo JText::_('COM_VIRTUEMART_RELATED_PRODUCTS'); ?></h4>   
<?php    foreach ($this->product->customfieldsRelatedProducts as $field) {   ?>
<div class="width25 product-field product-field-type-<?php echo $field->field_type ?>">     
    <span class="product-field-display"><?php echo $field->display ?></span>      </div>   <?php } ?>        </div>

Yopu are going to have to- go 3 per row

&& please read this thread,
http://forum.virtuemart.net/index.php?topic=102850.0


so you can do stuff like this on your own

[Snostar]

Thank you, that Firebug lloks to be very helpful as soon as I can grasp the concepts.

So, I took "width25" out of th php file and in the css 

/* Manufacturer View Default */
.manufacturer-view-default .row .manufacturer .spacer {padding: 6px;}
.product-field-display a img{display: block;}
.product-related-products, .product-related-categories{border-top:solid #ccc 1px;padding-bottom: 10px;}
.product-fields .product-field-type-P{clear: both; border-bottom: 1px solid #EEEEEE; margin-top: 18px;}
.product-field-type-P .product-fields-title{ font-size: 120%;}
.product-field-type-B,.product-field-type-S,.product-field-type-I{ padding: 3px 0px; }
.product-fields-title{ font-weight: bold;vertical-align: middle;}
.product-field-type-Z, width25{width:33%;float:left;}

adding:

product-field product-field-type-R {width:33%;float:left;}    made everything go
back to 1 column,
so  I tried:
.product-field product-field-type-R {width:33%;float:left;}
.product-field .product-field-type-R {width:33%;float:left;}    and
.product-field .product-field-type-R, width33{width:33%;float:left;}
.product-field product-field-type-R, width33{width:33%;float:left;}
none of which worked.

I installed fierbug, went through the html for page, and css   and am not getting the way this is controlled....where did you come up with "type-R"

I truly appreciate all your help, and

[PRO]

.product-field-type-R {width:33%;float:left;}