Page 1 of 2 12 LastLast
Results 1 to 10 of 17
  1. #1
    Join Date
    Feb 2010
    Posts
    7
    Plugin Contributions
    0

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

    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.

  2. #2
    Join Date
    Feb 2010
    Posts
    7
    Plugin Contributions
    0

    Default Re: How do you add a background image to the small "New Products" images.

    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.

  3. #3
    Join Date
    Mar 2010
    Location
    Green Bay, WI
    Posts
    360
    Plugin Contributions
    1

    Default Re: How do you add a background image to the small "New Products" images.

    Quote Originally Posted by cuiljoe View Post
    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.
    Forums are for helping people!! if you don't want to help people then shut up and get off the forum!

  4. #4
    Join Date
    Mar 2010
    Posts
    50
    Plugin Contributions
    0

    Default Re: How do you add a background image to the small "New Products" images.

    Last edited by hoang; 27 Mar 2010 at 01:44 AM.

  5. #5
    Join Date
    May 2008
    Posts
    250
    Plugin Contributions
    1

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

    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

  6. #6
    Join Date
    Feb 2010
    Posts
    7
    Plugin Contributions
    0

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

    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.

  7. #7
    Join Date
    Jul 2009
    Location
    Prague, Czech Republic
    Posts
    530
    Plugin Contributions
    0

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

    Quote Originally Posted by cuiljoe View Post
    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

  8. #8
    Join Date
    Jun 2005
    Location
    Cumbria, UK
    Posts
    10,266
    Plugin Contributions
    3

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

    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
    20 years a Zencart User

  9. #9
    Join Date
    Feb 2010
    Posts
    7
    Plugin Contributions
    0

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

    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.

  10. #10
    Join Date
    Jun 2005
    Location
    Cumbria, UK
    Posts
    10,266
    Plugin Contributions
    3

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

    Quote Originally Posted by cuiljoe View Post
    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.
    20 years a Zencart User

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. How to remove ellipses ("...") after "All Products" and "New Products" on home page?
    By jthurman in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 18 May 2010, 03:30 PM
  2. How to add additional link beside the "home" and "Login" page above logo?
    By corditreasures in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 8 Apr 2010, 03:54 PM
  3. how to add the add-to-cart-button to the new products box on the home page?
    By ebloger in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 10 Nov 2008, 10:30 AM
  4. How to take out the "New Products For November" section from the front page?
    By AZUKI in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 20 Nov 2007, 01:45 AM
  5. Removing the small "home" link to the right of the sidebar?
    By MysticHarbor in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 25 Aug 2007, 09:06 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg