12 May May 12, 2011

How To Create a “Call Out Box” In WordPress

Eileen Lonergan 0 web design, WordPress Design

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@eileenlonergan.com.

Related Posts with Thumbnails
Pin It
Eileen Lonergan
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.
Eileen Lonergan
Eileen Lonergan

Latest posts by Eileen Lonergan (see all)