How do I add rounded corners to the small "New Products" images on the home page?

[cuiljoe]

I have been trying to figure this out for quite some time but I just can't seem to figure it out. Hoping someone could help me.

Issue: I am trying to add an image behind every "new products" image in the home page.
I am trying to dress it up a little be have a rounded frame around each of these images.
I made an image in Photoshop of what I am trying to do.



Thank you in advance for any help anyone may offer.

[cuiljoe]

Anyone?
I have been trying to get a rounded corners around all of the featured images on the home page with no luck for a long time.

[outeredge2]

Anyone?
I have been trying to get a rounded corners around all of the featured images on the home page with no luck for a long time.

I think that actually has to be apart of the image. I'm not certain but I thought that is how it's done.

[hoang]

try something like that

http://www.spiffycorners.com/index.p...=8A6B05&sz=5px

good luck !!!

or here

http://www.neuroticweb.com/recursos/css-rounded-box/

all of them are CSS

[kdays]

The way that I have done this before is by using the Add-on 'column divider pro' and then making some changes. The add-on sets up a table structure so it is easy to make changes so that each of the product table cells has a background image.

You might need to play around with it a little bit but you will be able to get the look you are after as long as you set up max size of your product images to be compatible with the rounded-corner box image.

Hope this helps,
K

[cuiljoe]

Thank you for the responses. I really appreciate all your advise.

I do know how to do a box with rounded corners through CSS but I just don't know exactly what file and line of code is responsible for showing the small new product images so I can add my code.

I have come close but all I get is a continuous rows of my rounded corner background images. It shows up to the left, the middle and the right of the images. I just can't get it to show it correctly by having the same background image for each of the new product image.

[Twaddle]

I have been trying to figure this out for quite some time but I just can't seem to figure it out. Hoping someone could help me.

Issue: I am trying to add an image behind every "new products" image in the home page.
I am trying to dress it up a little be have a rounded frame around each of these images.
I made an image in Photoshop of what I am trying to do.



Thank you in advance for any help anyone may offer.

Maybe this thread might help?

http://www.zen-cart.com/forum/showth...719#post863719

[schoolboy]

While there are many techniques to achieve rounded corners, I find that using BG images, controlled with the CSS, is often the easiest.

I use that technique extensively HERE

[cuiljoe]

Hey thank you Twaddle and schoolboy for your input.

I used this code from the link that Twaddle gave but unfortunately it didn't work for me.

img.listingProductImage {
height: 100%;
width:100%;
background-color: #ffffff;
background-repeat:no-repeat;
background-image:url(../images/featured_bg.png);
}

Schoolboy could you tell me how you did yours. Yours is exactly what I am looking for.

Thank you in advance.

[schoolboy]

Schoolboy could you tell me how you did yours. Yours is exactly what I am looking for.

There are many, many hours of work involved in the effects I achieve on the football site, including establishing a detailed "list" of the relative widths of all components.

Because my technique involves using "section (div) header images" and "section (div) footer images", I needed to set those div widths before any work was done on the backgrounds.

This, as you may deduce, does not allow for later "re-jigging" of many of the display parameters (unless the corresponding images are also re-sized).

For example... The left side-boxes have been set to a fixed width of 201 pixels, and the header BG image (and footer BG image) is therefore 201 pixels wide. If I later increase the width of sideboxes (the sidebox width setting in admin>>>configuration>>>layout settings), my background images will float left, leaving a gap on the right hand side.

The same principle applies to all center-boxes and in fact, to most of the product display functions (new products, specials, etc).

As the client is happy with the STRUCURE (eg: the number of specials displayed per row), we do not intend to alter any of the div widths that rely on the rounded corner images.

So once the relative widths of all affected divs was established, we then regarded these as "cast in stone", and agreed that they could not subsequently be made wider or narrower.

We then looked at our full list of div widths and created TOP and BOTTOM images with rounded corners. You will also see that the site's various areas have backgound colours. The TOP and BOTTOM images are perfectly RECTANGULAR in shape, with the "rounded corner" simply being a graphic effect where the "corners" are coloured to be the same HEX CODE as the relative section's BG colour.

A HUGE help to the process is in the use of Firefox's Firebug, Colorzilla and Web Developer Toolkit plugins, enabling us to do "offline edits" to all displayed pages' css delarations... nudging certain divs UP (using both negative and positive padding/margin values) and shifting others down and across accordingly.

If you look at that site in firefox and then unpick it using all the tools in Web developers toolnox / firebug / colorzilla, you will get a better idea of the techniques we used.