overlapping product images & text

[Guest nivlac]

i followed some instructions (ver4) posted by Ricco on 11/23/2007 regarding increasing picture size on the home page and it worked great for ver3 but only for my home page.

How do i accomplish the same thing on the remainder of my catalog pages? Due to photo size & text overlap, I need to space out the rows of products. americanmusiccentre.net

if you go to the site and click on one of the first top tabs you can see that i need to resize the product area for the remainder of these catalog pages.

any help is greatly appreciated?

Dan

[Guest cubynooby]

Hi

Before you make any changes I suggest copying and saving a backup of any file you decide to experiment with. This way you can replace a botched file. Sometimes it's easier to replace than to undo changes.

Don't know if your still checking in here and without going into great detail, this is how I did it. Right click your store front page and select view source. Copy the code and paste into an html editor (one with a preview feature) I use html-kit (free download)

You'll need to locate the div that contains the section you want to adjust. You can insert some text within the div and then switch to the preview feature to be sure your in the right section.

Once you have found the div whos width you want to adjust the height/width take note of the class.

Next you'll need to go into your skin files, style sheets folder. If I remember correctly it's the layout.css file. Once you have the .css file opened to edit, do a "find" to locate the class you took note of that you found in the view source code.

Look for the width. Change, save and view the results. You may find you need to adjust the height as well. Do this until you get it looking the way you want. It may also involve different sections to get it right.

Doing this changed the width in my desired sections for all my pages.

Hope this helps. :-)

[Guest xbrandon408x]

how did you get the items to appear in rows of three's like that

thats what i want for my site

if you could help i would greatly appreciate that :]

[burgensteen]

Open skins/ yourskin/ stleTemplates/ layout.css

Look for:

.subCat (line 136)

{

text-align: center;

padding-top: 8px;

padding-right: 8px;

padding-bottom: 8px;

padding-left: 8px;

float: left;

width: 110px;

height: 50px;

}

And change the width and height to a couple of pixels larger than your actual images. :cry:

[Guest mistress_zhivago]

I had the same problem with the Killer template. On the Home Page under "Featured Products" no matter how many products I set it to display, all the images and text would overlap AND the name of my products are pretty long and some of my thumbnails are more than 130 in height, so I also increased the "height" to 150px so that text and thumbnails weren't overlapping the bottom border of the "featured products" section.

I have mine set to display 5 featured items. I edited the"latestProds" class item in: /skins/Killer/StyleSheets/layout.css to the following:

.latestProds {

float: left;

text-align: center;

width: 131px;

height: 150px;

padding-top: 18px;

padding-right: 18px;

padding-bottom: 18px;

padding-left: 18px;

}

Worked perfectly! If you choose to show more or fewer than 5 featured products, you'll have to play with the padding to make it line up for you. "18" works for me. :)