Eileen Lonergan

Share

To achieve the slight shaded effect behind the page of your WordPress website you need a simple piece of CSS and follow these steps:

• Navigate to your Dashboard and look for Appearance
• Click on Editor
• Look for the line /* You can add your own styles below this line. */
• Insert:

#header {
box-shadow: 0px 4px 4px 4px #706459;
-webkit-box-shadow: 0px 10px 10px 10px #706459;
-moz-box-shadow: 0px 10px 10px 10px #706459;
}

#page {
box-shadow: 0px 10px 10px 10px #706459;
-webkit-box-shadow: 0px 10px 10px 10px #706459;
-moz-box-shadow: 0px 10px 10px 10px #706459;
}

Note: you may adjust the pixels size to be greater or less than what I have here.  Also, the hex number can be modified to suit your color scheme.  I use my eyedropper tool on my mac to get the hex code of the background color, then go a few (or more) shades darker on the color grid.  I used this code for the SmallBiz Theme from Expand2Web, it may vary slightly for other themes.



Please be in touch if you have questions or need help.

This post was written by

Eileen Lonergan – who has written 232 posts on Eileen Lonergan Web Design & Internet Marketing.
This is my blog and I hope you enjoy it. I try to share tips and tricks that I have learned about WordPress and digital marketing, which hopefully will make your life a bit easier. I have been working on search engine marketing for clients since 2003.

Email  • Google + • Facebook  • Twitter


Share