Eileen Lonergan

If you would like to add a shaded effect behind your page in WordPress you need to insert this piece of code into your style sheet.

Dashboard >Appearance >Editor > Style.CSS

Look for this:  /* You can add your own styles below this line. */

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

Note: change hex numbers to whatever you want.

To create a “call out box”, a piece of text that is highlighted in a special colored box, you will need to create a div code:

#beaches {
float:none;
height:600px;
background-color:#FFF3DF;
border-color:#FFF3DF;
border-style:none solid solid;
border-width:0 1px 1px;
font-family:Georgia,”Times New Roman”,Times,serif;
margin-bottom:10px;
margin-right: 0px;
margin-left:1px;
margin-top:15px;
padding:16px;
width600px;
box-shadow: 10px 10px 10px #000;
-webkit-box-shadow: 10px 10px 10px #A98A67;
-moz-box-shadow: 10px 10px 10px #A98A67;
}

Please modify the code according to your needs: height, width, font, margins, etc.  I called this one beaches, but you name it whatever is appropriate.

Put that code:

Dashboard >Appearance >Editor > Style.CSS

Look for this:  /* You can add your own styles below this line. */ add the code below this line

Then, go to the page where you want the call out box to appear.  Just before the text that you wish to appear in the box, insert this <div id=”beaches”> text here then when you are done with the box close the div tag </div>.

Eileen Lonergan designs WordPress websites for small businesses.  She is based in MA but is lucky enough to have clients all over the world.  Questions on design or looking for a website, please call 508.317.7355 or email, eileen@eileenlonergan.com.

This entry was posted on Tuesday, September 7th, 2010 at 1:21 pm and is filed under Design Tips. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.