CMS Made Simple Forums

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?

Download the 'Coolish' template from this website

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

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

many tks in advance

in a box

    page_top.gif
      page_bg.gif
    page_bottom.gif

    mark

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?

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..

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:

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


thanks,mjd

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

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

Both options you ask should working  ...