Spacing Between Product Image + Product Title

[discoduck]

Hi Everyone,

I had a question..

The product images and the product are too squished together and it doesn't look that nice. How can I fix it?

Here is my cart where you can view the problem.

http://vrptuning.com/cart/index.php?...dex&cPath=5_15

Also,

There seems to be a lot of space in my product description page.

How can I control this? Through the stylesheet?

Here is a direct link to the description:

http://vrptuning.com/cart/index.php?...&products_id=9



Thanks!

[gjh42]

Add to your stylesheet

/* space & border between listing items */
#productListing .productListing-odd td, #productListing .productListing-even td {
	text-align: left;
	vertical-align: top;
	padding:0.5em;
	margin-bottom: 1em;
	border-bottom: 3px double #aaccbb;
	}

Add, delete and adjust to taste.


If you want your images and add to cart boxes to come out to the edges of the area, you can style

#productListing .productListing-odd td img, #productListing .productListing-even td img {
    margin-right: 1.5em;
    }

and eliminate the other set or leave the padding out of it.

[discoduck]

Ah, worked like a charm! Thanks for the quick reply.

Would you know how to solve my other problem?

[gjh42]

It looks like your best bet for tightening up that area is to align the add to cart elements horizontally instead of vertically.

Edit /includes/templates/your_template/templates/tpl_product_info_display.php.
Find around line 101

    $the_button = PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" /><br />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '<br />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT); 

and remove the
. '<br />'
and
<br /> to get

    $the_button = PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT); 

Then you can use the stylesheet to fine-tune the positions.

[gjh42]

You could also use in your stylesheet

#cartAdd br {display: none;}

instead of editing code. That was something I didn't know about when I first rearranged the add to cart box on my site.

And

#cartAdd input {vertical-align: middle;}

will center the elements vertically instead of leaving them sitting on a baseline and looking odd.

[discoduck]

It looks like your best bet for tightening up that area is to align the add to cart elements horizontally instead of vertically.

Edit /includes/templates/your_template/templates/tpl_product_info_display.php.
Find around line 101

    $the_button = PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" /><br />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '<br />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT); 

and remove the
. '<br />'
and
<br /> to get

    $the_button = PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT); 

Then you can use the stylesheet to fine-tune the positions.

Thanks for all your help! It made it a bit tighter, and it made me a bit happier :)

Is there anyway to make the additionalImages have a border?

[MT Ed]

GJH42, I too was having a pblm with product spacing, and attempted to take you advice altering the style sheets. I went and looked where I thought I shoud to make the changes, and could not find the text you were referencing. Would you be so kind as to try and explain in greater detail, where I may find that text?

[madmumbler]

You'll find it in your custom template file: includes/templates/CUSTOM/css/stylesheet.css

Where CUSTOM is the directory of your template.

If you don't have a custom template, you should (don't edit the classic or default templates because they can/will be overridden in upgrades, losing all your work).

You'll need to add as he stated (not already in the stylesheet file).

HTH,

[gjh42]

To make the additionalImages have a border, add this to your stylesheet:

#productAdditionalImages img {border: 1px solid #aa3399;}

Adjust to taste.

[discoduck]

To make the additionalImages have a border, add this to your stylesheet:

#productAdditionalImages img {border: 1px solid #aa3399;}

Adjust to taste.

You are a genious.

THANKS!