Spacing Between Product Image + Product Title

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?main_page=index&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?main_page=product_info&cPath=5_15&products_id=9

Thanks!

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;
}

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

Would you know how to solve my other problem?

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```php
$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);

 . '<br />'
and
 <br /> to get```php
    $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.

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.

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```php
$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);

>  . '<br />'
> and
>  <br /> to get```php
    $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?

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?

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,

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

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

Adjust to taste.

gjh42:

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. :smartalec:

THANKS!

Thanks madmumbler! I have created the custom template folder via two methods. Originally the users man. said to copy the classic & rename it. Then I discovered from online searching, I was instructed to use the default_temp as the "master" for the custoized version. Using the Classic failed to include all the subfolders included in the default_temp, however, it did contain in its CSS coding that permitted changing the header image, whereas the CSS from the default lacks this coding! Secondly, neither the classic or the default original CSS contain the coding above:
/* 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;
}
for me to make such changes!!!

I am truely baffled as I am getting differing instructions from the user's man. and then online! In either case, the coding recommended to be modified is not contained in the CSS of either original CSS used to create the customized template via copying their files! I guess I need even greater detail in setting up the custom template than has been provided in the user's manual, or online...........

When we say to add something to your stylesheet, that means it is not already there. There are many id and class tags provided in the code but not used in the default stylesheet (or the /classic/ stylesheet). They are there for users who want to customize an element. If it matters where a particular declaration goes in the stylesheet, we will usually mention that too.

The /classic/ template is a modification of /template_default/, and only contains the files needed to achieve its styling. If you want to make a custom template that resembles Classic, that is a good place to copy from. Otherwise, it is generally better to copy from /template_default/, which contains all of the template files. You do not want to copy all of the /template_default/ files, only the ones necessary to get your custom effects.

Thanks Glenn for your kind responses. Just after submitting my last request, the "dots conntected" and I realized my err. ZenCart is so robust, I found myself deactivating much of what I did not need, so it had not occured to me that I would actually need to ADD something!!!

I had created the custome folders as recommended. I do have another ? for you if you will.... After creating my custom folder for my template, I added some code to get MY image in the header. What also has happened, that was unexpected was all of the sideboxes dissappeared, as well as the search box in the Nav bar in the upper right! The dissappearing act occured before I made any changes from just copying the def_tem to my custom temp. Any suggestions for how I may recover the side boxes. PS: Do I need to make custom temps for each directory?.......like sideboxes?

Thanks again Glenn,
Ed