Box Shadow on Content Area

  • Author
    Posts
  • #1555674

    flghtlss
    Member

    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.

    #1555768

    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;
    }
    #1555808

    flghtlss
    Member

    I copied / pasted the code exactly but it’s still not showing the drop shadow. Any other suggestions?

    #1555903

    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.

    #1555957

    flghtlss
    Member

    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

    #1555959

    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;
    }
    #1555960

    flghtlss
    Member

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

    #1555961

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

    #1555965

    flghtlss
    Member

    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!

    #1555968

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

The topic ‘Box Shadow on Content Area’ is closed to new replies.