Box Shadow on Content Area

flghtlss · Member · Dec 8, 2013 at 12:37 am
Copy link

Add topic to favorites
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: (visible only to logged in users)
thesacredpath · Member · Dec 8, 2013 at 2:45 am
Copy link
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;
}
```
flghtlss · Member · Dec 9, 2013 at 2:29 am
Copy link
I copied / pasted the code exactly but it’s still not showing the drop shadow. Any other suggestions?
thesacredpath · Member · Dec 9, 2013 at 9:59 pm
Copy link
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.
flghtlss · Member · Dec 12, 2013 at 4:45 am
Copy link
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
thesacredpath · Member · Dec 12, 2013 at 5:26 am
Copy link
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;
}
```
flghtlss · Member · Dec 12, 2013 at 5:59 am
Copy link
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. :)
thesacredpath · Member · Dec 12, 2013 at 6:24 am
Copy link
You are very welcome, and your site is looking awesome. I like the shadow color you have chosen.
flghtlss · Member · Dec 13, 2013 at 2:10 am
Copy link
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!
thesacredpath · Member · Dec 13, 2013 at 3:35 am
Copy link
Merry Christmas to you too, and you will get there. We were all beginners at one point.

No items found.