Drop Shadow Help! Become my new hero and help!

[duplay]

I have been reading for a while about the drop-shadow that used to be used on this page. I have the images and I understand it needs to be added to a box. Can anyone please break-down in detail how this is done? I rerally need this done step-by-step. Anyone who helps will be in the running for my new personal hero! Thanks in advance.

[cyberman]

http://forum.cmsmadesimple.org/index.ph ... l#msg30510

This thread is like a little howto - please tell us what information more do you need ...

[duplay]

I have the images and saw two different options on that page. One kid did a path to his upload images (for the drop shadow) the other guy just place din his folder on the server and created a box.

Basically, do i create a new css and apply that to my current template?

[duplay]

Here is what I HAVE BUT AM NOT SURE ON:

I have the images:
Do i just place them on my server, or do i upload them to my images folder then do a path to the images when i insert the div?

I understand I need to insert a container like the following:
  page_top.gif
      page_bg.gif
    page_bottom.gif

Where do i put this? In the template i am using, the CSS, or the layout of the template i am using?

The link you sent me to the post was confusing, people were doing it different ways, and no one really had detailed steps- thats what i need- dumb it down please!

Thanks for any help!

[Dr.CSS]

i would put the images in the upload/images folder then put the above code in your template, usualy just above ths 'box' you want the shadows around then use CSS styling to place them where needed...

  is an empty div that you place and size with CSS, background set with page_top.gif

next is   which would have of course {content} in it, and in CSS you would call for the background to be page_bg.gif

then   another empty div that is placed and sized with CSS, background set with page_bottom.gif.

{content} would grow in height depending on the amout of information in it and the top and bottom would move with it...

[duplay]

So if I am using bullet vert 1 col as my template, where do I place the divs? (Sorry I have tried but nothing has worked)

Here is what is currently in my template:







CMS Made Simple Demo - {title}

{metadata}
{stylesheet}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}

{global_content name='JavaScript for IE page width'}







   
   
      Skip to navigation
      Skip to content
   
   

   






 
 
 


 
 
        {breadcrumbs starttext='You are here' root='Home' delimiter='»'}
 
 
 


 


 

     
     
        Navigation
        {cms_module module='menumanager' collapse='1'}
     
     
     


     
     
        {title}
        {content}


       


^ Top

       
            {cms_selflink dir="previous"}

            {cms_selflink dir="next"}
       


     
     
 


 
 


 
 
      {global_content name='footer'}
 
 

[duplay]

This is what I have in my layout (would i add them in a box here, or just create a new css called "shadow" and apply it to my template)?

If i use my layout css, where would i put them?

/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* SITE SPECIFIC LAYOUT */

    body {
        margin: 0;
        padding: 1em;
        text-align: center;
    }
    div#pagewrapper {
        margin: 0 auto;
        max-width: 80em;
        min-width: 60em;
        padding: 0;
        text-align: left;
    }
    #container {
position: relative;
margin: 0;
    }
   
    /* HEADER */
        div#header {
            margin: 0;
            padding: 0;
            height: 80px;
            background: #385C72;         
            text-align: left;
        }
        div#header h1 a {
            background:  url(uploads/images/logo1.gif) no-repeat 0 12px;
            display: block;
            height: 80px;
            text-indent: -700em;
            width: 198px;
            margin: 0;
            padding: 0;
        }
    /* END HEADER */
   
   
    /* CONTENT */
        div#content {

        }
       
        /* MAIN */
            div#main {

            }
        /* END MAIN */
       
        /* SUB */
            div#sub {
               
            }
        /* END SUB */
       
    /* END CONTENT */
   
    div#page_bottom {
  clear: both;
  background: url(uploads/images/page_bottom.gif) no-repeat bottom;
  padding-bottom: 30px;
  }
    /* FOOTER */
        div#footer {

        }

        div#footer p {
            font-size: 0.8em;
            margin: 0;
            padding: 15px;
            text-align: center;
        }
    /* END FOOTER */
/* END LAYOUT */



div.breadcrumbs {
  padding: 1em 0;
  text-align: left;
  font-size: 90%;
  margin: 0 1em;
  border-bottom: 1px dotted #000;
}

div.flags {
  float: right;
  width: 18px;
  padding: 1em 0;
  text-align: right;
  margin: 0 1em 0 0;
}

div.left49 {
  float: left;
  width: 49%;
  }

div.right49 {
  float: right;
  width: 49%;
  text-align: right;
  }

[Dr.CSS]

like so...

http://mit-computers.com/index.php/shadow