Put shadow behind theme page twentyeleven dark background

Do you mean like a drop-shadow?

There is a CSS property called box-shadow that will do that. You can make it whatever color you like.

To give it a try, you’ll just add one line of code in the section on line 326 of your child theme’s style.css file that affects the div with the id “page.” That block of code currently looks like this:

#page {
    background: none repeat scroll 0 0 #FFFFFF;
}

To add a black shadow, you’d just add the box-shaddow line to make that code block look like this:

#page {
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 25px 25px 25px #000000;
}

You can read about the box-shadow property here. You can change any of the parameters, including the color, of course.

That line with “import” in it is importing the entire contents of your parent theme into the child theme, so really all you need to do is put the code for the changes you make in the child theme’s style.css so it would look like this:

/*
Theme Name: twentyeleven child LMF
Theme URL: http://www.eftbetsycrouse.com
Description: twentyeleven child theme for LMF
Author:Betsy
Template: twentyeleven
*/
@import url('../twentyeleven/style.css');

#page {
    box-shadow: 25px 25px 25px #000000;
}

Since your child theme’s style.css is read after the parent theme’s style.css, your settings in the child theme will supercede any similar settings you have above in the majority of cases. (There is an exception involving the use of the “!important” keyword in CSS, but that’s not in play here.)

If I’m making a lot of CSS changes in a child theme, I copy and paste all the CSS (except the section at the top with the theme name, description, etc. between the “/*” and the “*/”) from the parent theme to the child theme’s style.css. The reason I do that is that it prevents the end-user’s browser from having to do extra formatting and CSS overriding when there are a lot of duplicate entries. You can do that if you like, but if you’re just making a few changes, you don’t need to copy it all, and in this case, you’re actually adding a setting, so you don’t need to worry about it because the browser won’t be doing extra work like it would if you were duplicating a setting.

Just to emphasize, any changes you make should be made in the child theme’s style.css, not in the parent theme’s style.css, or they will be overwritten every time you upgrade WordPress and the theme is updated.

🙂 Thanks for the hug. I’m glad you got it working.

You’re experiencing the wonderful world of browser-compatibility, and problems are usually with IE. Box-shadow is only supported in IE9 and above, so users of IE8 and lower won’t see it, but I wouldn’t think having it there would break anything; IE8 and below should just ignore it.

You might test by reversing the changes you made to remove the search box from the menu bar to see if the menu bar then shows up in IE. If it does, you can find a new way to remove it either by posting here or in a new thread. You are using a child theme of Twenty Eleven, it looks like, which has lots of compensation built in for older versions of IE so ordinarily you should be okay with most of the CSS.