Create a Call Out Box | WordPress | Design TipsTo 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.  My code also has a shaded effect to lift it off the page.  Remove that section if you just want the colored box.

#beaches {
border-style:none solid solid;
border-width:0 1px 1px;
font-family:Georgia,”Times New Roman”,Times,serif;
margin-right: 0px;
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>.

 I recently wrote an update to this post, with a much simpler method, please visit: Easy Div Code for Call Out Box | How to Grab Your Readers Attention.

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 Lonergan
I am a WordPress website designer, blogger & partner in I started this blog to keep track of helpful snippets of code and CSS that I found while building sites 400+ posts later it has become much more. Thanks for being here and reading, I appreciate it very much.

Pin It on Pinterest