WordPress.com Forums » Topic: How can I add a border around text on a static page?

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

houstonweaver — Thu, 04 Oct 2012 12:35:56 +0000

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

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

myhcaa — Thu, 04 Oct 2012 03:27:38 +0000

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

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

houstonweaver — Mon, 24 Sep 2012 13:43:44 +0000

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.

all your paragraphs, list, etc. here

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

myhcaa — Mon, 24 Sep 2012 06:14:47 +0000

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?

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

designsimply — Fri, 21 Sep 2012 16:49:01 +0000

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.

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

designsimply — Fri, 21 Sep 2012 16:47:59 +0000

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:

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:
http://en.support.wordpress.com/editors/#text-editor

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

myhcaa — Thu, 06 Sep 2012 04:47:00 +0000

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/