shadow effect?

[KevinK]

I have seen a lot of sites here lately, including this one, with a shadow effect around the outside of a page. How is that done?

[Greg]

Download the 'Coolish' template from this website

http://www.gordonmac.com/downloads/html/index.php

[sephir]

Whereabouts in the layout.css can the location of the image borders be added?

many tks in advance

[Dr.CSS]

in a box

    page_top.gif
      page_bg.gif
    page_bottom.gif

    mark

[alarach]

What you mean in a box?
Do I have to insert a code like this?
In Layout stylesheet? or in the Template?

  background:  url(http://www.tupais.com/uploads/images/page_top.gif) repeat 0 0px; 
      background:  url(http://www.tupais.com/uploads/images/page_bg.gif) repeat 0 0px; 
    background:  url(http://www.tupais.com/uploads/images/page_bottom.gif) repeat 0 0px; 

I try a lot of things, but I'm confusing!
Can somebody here explain me more in detail?

[tsw]

here is a simple test page with shadow effect (this is not the best way to do it actually as it is not fluid)

http://tsw.backspace.fi/misc/testeja/shadow.html

doing this for cmsms is pretty simple.

edit your template and add div above content (you can name it something like page_top) and below your content div

then edit your css and add height and the background image to those divs and for the content div.

padding for text not overlapping shadow..

[alarach]

Can somebody here send me a copy of their layout and template?

Only to check the code?

You can see www.zizimawaterpark.com

This is what I have in Layout:
#pageup {
  width: 750px;
  margin: 10px auto 0 auto;
  padding: 0;
  background: url(uploads/images/page_bg.gif) repeat-y top;
  }
#pagetop {
  background: url(uploads/images/page_top.gif) no-repeat top;
  }
#page_bottom {
  clear: both;
  background: url(uploads/images/page_bottom.gif) no-repeat bottom;
  padding-bottom: 30px;
  }

This is what I have in template:

[duplay]

Can anyone offer me any detailed help in inserting the shadow effect? I have the images, but am lost.


thanks,mjd

[tsw]

Just apply css for your divs.

for container
(repeats image vertically)
background: url(uploads/images/page_bg.gif) repeat-y top;

for top
background: url(uploads/images/page_top.gif) no-repeat top;

and for bottom div
background: url(uploads/images/page_bottom.gif) no-repeat bottom;

then play around with padding so that text doesnt overlap the shadow

[duplay]

So can I create a new cs for the shadow and add the above? ordo i had the above to the layout css?


thanks

mjd

[cyberman]

Both options you ask should working  ...