Need help? Check out our Support site, then


Box Shadow on Content Area

  1. Hello. I am using the LoveBirds theme and I would like to add a box shadow around my entire content area. I found the code below in another post but when I add it to my CSS edit box it doesn't show up on my page. I am using IE 10 and I read that this version supports it. Can anyone tell me what I am doing wrong, please?

    My site is here: http://abookloversretreat.wordpress.com/

    Thanks,
    Wanda

    Here is the ode that was suggested:

    #content {
    -moz-box-shadow: 5px 5px 5px #ccc;
    -webkit-box-shadow: 5px 5px 5px #ccc;
    box-shadow: 5px 5px 5px #ccc;
    }

    #main {
    width: 585px;
    }

    .post {
    -moz-box-shadow: 5px 5px 5px #ccc;
    -webkit-box-shadow: 5px 5px 5px #ccc;
    box-shadow: 5px 5px 5px #ccc;
    margin-bottom: 0;
    padding-left: 30px;
    padding-right: 20px;
    }

    The blog I need help with is abookloversretreat.wordpress.com.

  2. thesacredpath
    Staff

    There is a little more code in there than you need I think. Give the following a try and see what you think, and yes, it should work fine in IE10.

    #content {
    -moz-box-shadow: 5px 5px 5px #ccc;
    -webkit-box-shadow: 5px 5px 5px #ccc;
    box-shadow: 5px 5px 5px #ccc;
    }
    
    .hentry {
        margin-bottom: 0;
    }
  3. I copied / pasted the code exactly but it's still not showing the drop shadow. Any other suggestions?

  4. thesacredpath
    Staff

    Hi, the opening and ending "comments" tags, /* and */ were still in the CSS window around your code, so it was not being applied. I've removed those from the CSS edit window. Take a look at your site and you will see the drop shadow.

  5. You are wonderful! Is there any way to encase the entire content area in the drop shadow instead of just the right side and bottom? After this I will try to stop bugging you. LOL

  6. Certainly. We set the horizontal and vertical distances to 0. I doubled the "blur" distance to 10px. You can also change the color code to something a little darker such as #777777 to see what that would look like. #cccccc looks a little light.

    #content {
    -moz-box-shadow: 0 0 10px #cccccc;
    -webkit-box-shadow: 0 0 10px #cccccc;
    box-shadow: 0 0 10px #cccccc;
    }
  7. You rock! I changed the blur to 15 and the color to #af785b to match my page more. I think it looks good. Thanks for all your help. If I ever need you again I'll give you a ring. :)

  8. You are very welcome, and your site is looking awesome. I like the shadow color you have chosen.

  9. Thank you. I'm a novice but it's getting there. Now if I had all of your knowledge in this little head of mine I would be all set. :)

    Merry Christmas!

  10. Merry Christmas to you too, and you will get there. We were all beginners at one point.

Topic Closed

This topic has been closed to new replies.

About this Topic