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

  • Author
    Posts
  • #1001455

    myhcaa
    Member

    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 myhcaa.com.

    #1001606

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

    #1001607

    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.

    #1001608

    myhcaa
    Member

    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?

    #1001609

    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>

    #1001611

    myhcaa
    Member

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

    #1001612

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

The topic ‘How can I add a border around text on a static page?’ is closed to new replies.