What template to add additional divs outside of mainWrapper??

[rubelin]

I need to add border images to the right and left of the mainWrapper div for all the pages in the entire cart I am working on, but I can't figure out which template controls this. Is there one template that I can add these new divs to or will I need to add them to a ton of templates??

My other thought was to find the template (or code) that includes the opening and closing body tags, because I can add the new divs inside of those and it would work for the whole site. But, again, I don't know where to find that :)

Thank you for the help. I'm really appreciating the great documentation and the new css templating.

[rubelin]

Does anyone know where I can find this?? Has anyone else been able to add divs outside of the mainWrapper div??

[Kim]

Have you looked at tpl_main_page.php?

[rubelin]

Thank you, I just found that one 10 minutes ago I keep forgetting to look in the default_templates/common folder

It works great!

[barricades]

rubelin, I'm trying to do what you were doing but I'm having trouble figuring out what exactly I'm meant to do - or more prescisely where I'm meant to add divs to get a border.

When you say about adding divs "outside of the mainWrapper div" can you tell me where to start and end the divs? I've been messing around with this all day and have finally given up and decided to post.

I'm a bit inexperienced with using divs (having simply used tables) and I basically would love it if you could tell me exactly what you did

thanks in advance

[gjh42]

In /includes/templates/your_template/common/tpl_main_page.php, find near the top of the file
<div id="mainWrapper">

Add just above that

<div id="mainWrapperLeft">
<div id="mainWrapperRight">
<div id="mainWrapper">

and locate the </div> that corresponds with the mainWrapper div, and add two more </div> below it.

In your stylesheet, put the left shadow as a background image in #mainWrapperLeft, and the right shadow in #mainWrapperRight. You will want to add padding or margins somewhere in there - there are many possibilities depending on exactly how you want this to behave.

Anchor the shadows to their respective sides with

background-position: top left;
Background-repeat: repeat-y;

[barricades]

Hurray! they're there. Thanks so much. I had tryed something similar but had obviously made an error coz it didnt display corrently. Anyway, they're there now so cheers. I'll play around with margins as you suggested, just have to figure out how to move them so they hug the mainWrapper instead of being right at the edge of the screen!

[gjh42]

Give #mainWrapper a width (770px, 85&#37;, 97%...), but don't give mWLeft & mWRight widths. Give the second outer one (mWR) padding, or give mainWrapper margins equal to shadow width; both will work, and there are other possibilities for certain effects.

Do give mWL margin: auto; so it stays centered in the screen.

[barricades]

thanks Glenn, I've futtered about with the margins and the placement and such but it's still not hugging the mainWrapper, this is what i have:

#mainWrapperLeft {
background-image:url(../images/leftShadow.gif);
background-position: top left;
background-repeat: repeat-y;
margin: auto;
}

#mainWrapperRight {
background-image:url(../images/rightShadow.gif);
background-position: top right;
background-repeat: repeat-y;
}

#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 770px;
margin-right: 5px;
margin-left: 5px;
}

As I say, I've tried messing about with the above but to no avail. Any idea what I'm doing wrong?

Also I've tried to find some decent tutorials online for Divs but haven't found anything more than really basic stuff - do you happen to know of any good tuts?

cheers!
Dave

[barricades]

Could anyone even just direct me to a website which has similar css to what I'm trying to get and I could look through FF to see what their css is like