X-Cart forums

[PDW-Admin]

help - we're trying to make some changes to a template someone customized for us but is no longer in business so we're stuck.

the stylesheet she created has this:

body { margin: 10px; color: #000000; background: url('images/bkgrnd.jpg'); font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 75%; }
#tplHeadWrapper { width: 1024px; margin: 0px auto; }
#tplPageWrapper { width: 1024px; margin: 5px auto; background: url('images/tdc-page-02.png') repeat-y }
#tplMainWrapper { width: 1024px; margin: 0px auto; background: url('images/tdc-page-01.png') no-repeat top; }
#tplMainContent { padding: 40px 50px; }
#tplFootWrapper { width: 1024px; height: 282px; margin: 0px auto; background: url('images/tdc-page-03.png') no-repeat top; }
#tplFootContent { padding: 10px 10px; text-align: center; font-size: 75%; }
#tplFootContent a { color: #000000; text-decoration: none; }
img { border: 0; }

when i change out the three .png graphics to what you see from our old one and adjust the sizes you can see the graphic isn't seamless at the top and the bottom.

what are we doing wrong? thanks!!!!

this is the place where the dummy is: www.pinksugarpop.com/shop/home.php

[PDW-Admin]

I posted a few days ago and no response, so trying a new post with some different language - hoping it helps someone so someone can respond.

We're wanting to skin this cart and the top and bottom of the main content area have drop shadows and should be transparent around the edges.

http://pinksugarpop.com/shop/home.php?cat=23

You can see on this dummy we're working on that the top and bottom seem to be overlapping with a solid white or the graphic image we have as the main repeat.

Can anyone tell me what line of code I should be looking at to make those transparent there so they don't overlap?

[balinor]

Hi Holly, I'm sorry, but we kind of frown on double posting. I have combined your two posts. If you aren't getting an answer to your question, your best bet is to use your help desk.

[gb2world]

Hi Holly -

It looks like your design requires the graphics to sit one on top of the other - with both starting at the same place. (I did not look at the bottom - but it is probably a similar strategy to the design)

So - the top graphic with the rounded corner is on top of the repeat graphic you have on the sides - and they both start at the same spot. So - if you want the graphics to be seamless - you have to take that into account when you create the graphic. Maybe a good way to see it is to open the two images in the graphic tool you are using, then put the one you are using repeated in the background on the bottom - then put the one with the rounded corners on top of it - both starting from the same place at the top. Then - you can see how the images are being loaded by your css. If you want to use the same css - you have to adjust the graphics a little so the repeating image allows the other one to sit on top of it and appear to be seamless.