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
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;}
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!
Quote from: Snostar on February 08, 2013, 20:48:55 PM
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;}
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!!!
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
Thank you so much!
Now I just have to figure out where in that css I can do the same for Related Products...?
Quote from: Snostar on February 11, 2013, 20:20:24 PM
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 ?>">
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!
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;}
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!
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
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
.product-field-type-R {width:33%;float:left;}