How can I add a border around text on a static page?

• 

  myhcaa · Member · Sep 6, 2012 at 4:47 am

  • Copy link
  • Add topic to favorites

  How can I add a border around a piece of text on a static page? I want to draw attention to the text, but I don’t want to fill the background with color since I already used that for previous text on the same page. I anticipate that this can be done with CSS, but will this cause an issue with the previous CSS I put in to get a colored box? See http://myhcaa.com – center column. I want to put a colored border around the Media Picks area. Thanks!
  Blog url: http://myhcaa.wordpress.com/

  The blog I need help with is: (visible only to logged in users)

• 

  designsimply · Member · Sep 21, 2012 at 4:47 pm

  • Copy link

  I would recommend editing the HTML of your post to include a class for the media picks. Then you can add CSS that will add a border any time you use that class.

  Here is an example of the HTML:
  <p class="callout">

  Here is the CSS you could add to your Appearance → Custom Design → CSS editor:

  .callout {
  border: 1px dotted red;
  padding: 1em;
  }

  Here is more info about the HTML editor:

  Types of WordPress Editors

• 

  designsimply · Member · Sep 21, 2012 at 4:49 pm

  • Copy link

  I forgot to mention that you can change out the color code if you’d like, and you can also adjust the type of border from dotted to solid or make it bigger by changing the 1px value.

• 

  myhcaa · Member · Sep 24, 2012 at 6:14 am

  • Copy link

  Thank you for the CSS code! I can see that is works well for a single paragraph of text.

  I would like to use this same “box” idea to surround a paragraph of text that contains a bulleted list, or perhaps several paragraphs of text that are separated by a blank line. How do I do this?

• 

  houstonweaver · Member · Sep 24, 2012 at 1:43 pm

  • Copy link

  Try surrounding your full area you want outlined with a div class called callout. Just keep the exact same CSS supplied by designsimply and use this with your html instead of the “p” designation.

  <div class="callout">all your paragraphs, list, etc. here</div>

• 

  myhcaa · Member · Oct 4, 2012 at 3:27 am

  • Copy link

  Perfect! Did the trick just like I wanted. Thanks so much for this tip!

• 

  houstonweaver · Member · Oct 4, 2012 at 12:35 pm

  • Copy link

  Oh super. Designsimply did the heavy lifting, but I’m glad my little hint helped.