What template to add additional divs outside of mainWrapper??

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.

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

Have you looked at tpl_main_page.php?

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

It works great!

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

In /includes/templates/your_template/common/tpl_main_page.php, find near the top of the file

Add just above that

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;

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!

Give #mainWrapper a width (770px, 85%, 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.

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

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

My site does shadows like this, except that I put the extra divs inside mainWrapper. Of course, the locations of parts of the CSS had to be switched. It shouldn't make a difference, but you might try it and see...

None of this worked can someone help figure out why.

Here is what I put in my stylesheet.css
#mainWrapperRight {
background-image:url(http://www.touchcrew.com/touchshop/includes/templates/touchcrew/images/dropsh.gif%29;
background-position: top right;
background-repeat: repeat-y;
}

#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 850px;
vertical-align: top;
}

And this is what I put in my tpl

?>

Two points that may help:

There is no reason I know of to use a full http filepath for the background image. Using
background-image: url(../images/dropsh.gif);
will get the desired results, and allow your code to be portable to a test/development environment as well.

It may be necessary for proper function to do the divs in the same way I did them: #mainWrapper with #mainWrapperRight inside it.
Give #mainWrapper the desired width and margin: auto;
Give #mainWrapperRight width: 100%;

#mainWrapper {
    background-color: #ffffff;
    text-align: left;
    width: 850px;
    margin: auto;
    vertical-align: top;
    }

#mainWrapperRight {
    width: 100%;
    background-image: url(../images/dropsh.gif);
    background-position: top right;
    background-repeat: repeat-y;
    padding-right:7px; /*or whatever the shadow width is*/
    }

?>
<div id="mainWrapper">
<div id="mainWrapperRight">
<?php
/**
* prepares and displays header output
*
*/
require($template->get_template_dir('tpl_header.php',DIR_WS_TEMPLATE , $current_page_base,'common'). '/tpl_header.php');?>
```and don't forget to add an extra </div> at the end of the file to properly close the new div.

thank you for the posting a reply it worked but if you look at the site why is it inside and not on the out side and why does it not go from top to bottom? here is the site http://www.touchcrew.com/touchshop/

You don't see it from top to bottom because you didn't add the
padding-right:7px; /or whatever the shadow width is/
to #mainWrapperRight as recommended; also, the logo is a fixed width, so you need to expand #mainWrapper by the width of the shadow.

To center the page in the screen, add margin: auto; to #mainWrapper as posted above.

Is it possible to add a shadowbox style to images? And if so, how would I go about doing it?

thanks

Hi everyone,

I was just reading this thread again because I'm trying to find out how to make the shadowbox work in IE like I have it working in FF now. After reading all the posts I now know what a "dumb" post I made before this one lol.

Sorry to be such an idiot :blink:

Thanks for all the help, especially gjh42.

I have been successful so far with this but my backgroud .png's lose transparency when I move them inside the main wrapper?
(they work on other pages). Got me beat :|

http://newwave.co.nz/webshop/
(still in development)

They are not losing transparency; they are letting the #mainWrapper bg color show through. You need to move the bg color to a div or divs inside the wrappers.```
/wrappers - page or section containers/

#mainWrapper { background-color: #ffffff; background-position: center 0; text-align: left; width: 920px; margin-right: 14px; margin-left: 14px; vertical-align: top; background-image: none; }

#mainWrapperLeft { background-image:url(http://www.newwave.co.nz/images/menusetc/newwavebgl.png); background-position: left top; background-repeat: repeat-y; margin: auto; padding-left:13px; }

#mainWrapperRight { background-image:url(http://www.newwave.co.nz/images/menusetc/newwavebgr.png); background-position: right top; background-repeat: repeat-y; padding-right:13px; }

Wow you have helped so much already.
I must have used twenty of your answers already (but only just started posting).

I'll give that a go.

I got the shadows to work but then the background image showed through the page.
So all I need to do is make a new div and give it the background colour! Of course. You sir, are a genius!

Thanks again... I'll let you know if it works