MainWrapper Border Image?

Hello,
I've searched through the threads but cant seem to find my answer....

I want to add unique left and right border images to the mainwrapper.

This is how i would ideally like to see it and this is the zen cart i am currently working on. (dont mind the crazy footer layout- i'm working on that too....)

I assumed that i would just specify border-left, border-right for the mainwrapper in the stylesheet but when i use this code: border-left: 20px url(../images/bleft.gif); it doesnt work.... i'm obviously doing something wrong.

any suggestions or is there a better way to do this? thanks in advance :)

While I have not attempted this - You could make an image that is transparent in the center section and is vertically repeatable and apply it as a background image to the mainWrapper and leave the image you have in the bottom. Slight adjustments might have to be applied for this to the width as I think that this will be diplayed inside of the mainWrapper over being outside.

Alternatively, you can look at this sites home page and view the source for the dropshadow applied and I think that they used tables left and right.

good idea! I'll give it a shot.... thanks :)

CSS doesn't yet have the capacity to use images for borders.

If #mainWrapper is a fixed width, you can use a slice of background-image with left and right fringes and solid center, and repeat-y. With the transparent parts you need, it will actually have to be more complicated - you might best add another div just inside #mainWrapper, and ending just before #siteInfoLegal, to get the fringe to display well.
You would do this in /includes/templates/your_template/common/tpl_main_page.php.

great tip! thanks! almost there... i added a new div & class but now everything is left aligned, i just need to tweak it a bit more and now fix the footer situation ...

you guys are great! thanks xox:smile:

any clues on how to center this guy now?

i'm open for suggestions on how to address the footer issue too- right now it's just an image added to the footer file. :blink:

It is this in the css and most likely where you have it in the files that is the cause for the left alignment

#wrapperborder {
margin: 0;
	background-image: url(../images/wrapperbk.gif);
	width: 782px;
	align: center;
	}

I have just finished a zen customization for a client and this is how I set the border image.

http://nothinfancyfarm.com/

usernameone,

Nice implementation and you might share this in additional specifics for the OP

BTW I am sure that I am not seeing exactly what this is designed to look like owing to the fact that I do not have the "Trebuchet MS" font on my system.

kmichel:

any clues on how to center this guy now?

Right now your #wrapperborder is coming before the #mainWrapper. Assuming you added the #wrapperborder to the tpl_main_page, switch the two and put the #mainWrapper before the #wrapperborder. Then in your stylesheet, set the #mainWrapper to: {margin-right:auto; margin-left:auto;}

usernamenone- thanks for the tip- it seems to work well, and once the page has the rest of the content it will fix the border image to the bottom. Thanks so much everybody for all your help! :clap:

now i'm off to tackle some rollovers.....