SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How do I add border around a paragraph in Wordpress

    I have posted this question to the Wordpress forums and got the following answer: http://wpbtips.wordpress.com/2009/10/14/borders-pt-1/

    I thought I understood what was being said here but nothing seemed to work. I asked again and so far nothing. I have always used the <table><tr></tr></table> code on my website without problems. It does not in Wordpress. Any suggestions on how to place a box or border around a particular paragraph? Thanks...

    My blog is http://www.stoutstandards.wordpress.com

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,175
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)
    It should be a simple matter of choosing the right selector to use with your CSS
    Is this what you're wanting to style - all of them?
    HTML Code:
    <div class="entry entry-content">
    	<p>John Howland offers up a few ideas on how something like the <a href="http://finds.org.uk/"> PAS</a> might work here in the states.
      I would love it of course, but have pretty much given  up hope of seeing something like this in my lifetime.
      It would take a lot of money, effort and interest, all missing ingredients here in the states.
     I hope you will take  the time to read John’s thoughts.
      Perhaps down the road someone will take up the mantle and make it happen.
    <i> <a href="http://stoutstandards.wordpress.com/2014/01/29/an-antiquity-scheme-for-the-us/#more-8632" class="more-link">Continue reading <span class="meta-nav">&rarr;</span></a></i>
    </p>

  3. #3
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks but that didn't work either.

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,175
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)
    What CSS did you try? i.e. the selector and rule(s)

  5. #5
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I have tried any. Since I upgraded to their customized program a lot of CSS is already there. What do you suggest? I can add.

  6. #6
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,175
    Mentioned
    191 Post(s)
    Tagged
    2 Thread(s)
    If you target the p tag you're likely to affecting a lot more than you want to.
    I'd try adding
    Code CSS:
    /* custom style added 2014-02-05 */
    div.entry p {
      border: 1px solid #ff00ff;
      padding: 1.2em;
    }
    just to see if that's getting to what you want. If it gets what you want and doesn't affect things you want it not to, adjust the values and you should be all set.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Barnum, if you can post a copy of a paragraph from your blog, we can be specific, otherwise, we can only give approximate guesses.

    One can add a border around a box with the "border" property:
    Code:
        border:2px solid #f00;
    The box can be a <td> cell, a <p> paragraph tag, a <div> or most anything else.
    eg:
    Code:
    td.thiscell {border:2px solid #f00;}
    
    p.thisparagraph {border:2px solid #f00;}
    
    div.thisbox {border:2px solid #f00;}
    The class is used to target a particular box.

  8. #8
    SitePoint Addict
    Join Date
    Aug 2013
    Location
    New Zealand
    Posts
    277
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Are you using the paid version of wordpress.com which allows styling? Otherwise it may not work. I got around that problem by using inline styles.

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    It will depend on your theme.

    the quick BAND-AID solution, assuming you only qant to style a SPECIFIC P , in a specific story.. is to go to your WP dashboard, where you edit the story , and select the HTML view and find te P you wanted to style then add the code inline:

    Code:
    ...
    <p>... </p>
    <p style="border:10px solid pink"> ... </p>
    <p>... </p>
    ...
    you could also use the CSS/ theme editor but you would need to know a pattern to set that paragraph apart ( example, the 3rd paragraph in the first story of a multi story blog)

    hope that helps

  10. #10
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you all. This is the page where I want to add a paragraph border (actually two or three paragraphs)...starts with "A Warsaw Wally Update" and ends with"cavelier with their finds". Hope that makes sense.

  11. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Barnum View Post
    Thank you all. This is the page where I want to add a paragraph border (actually two or three paragraphs)...starts with "A Warsaw Wally Update" and ends with"cavelier with their finds". Hope that makes sense.
    I think you forgot to include a link to the page

  12. #12
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hah, I did. Sorry, senility is setting in. Thank you for setting me straight. Let's try this..

    http://stoutstandards.wordpress.com/...me-for-the-us/

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Hi, Barnum.

    Basically, you need to put a container around those paragraphs. In other words, they need to be inside a parent <div>. Then you can give that parent div a border and some padding and you'll be all set.

    Insert a close div below line 236
    Code:
    </div>
    Insert an open div above Line 223
    Code:
    <div style="border:1px solid red; padding:16px;">
    It should look something like this:
    Code:
    <div style="border:1px solid red; padding:16px;">
    <p style="text-align:center;"><strong><span style="color:#800000;">A WARSAW WALLY UPDATE FROM JOHN</span> </strong></p>
    <p style="text-align:center;"><em>Wednesday, 29 January 2014; From Paul Barford?s<a href="http://paul-barford.blogspot.com/"> Blog</a></em><a href="http://paul-barford.blogspot.com/"> </a></p>
    <p>What he?d have the World Believe: (complete with Barfordese spelling)</p>
    <p style="text-align:center;"><a href="http://paul-barford.blogspot.com/2014/01/metal-detecting-looter-caught-in.html"><b>Metal Detecting Looter Caught in Calabria</b>.</a></p>
    <p>Police on Tuesday arrested a 34-year-old man as he was trying to abscond with artifacts from Capo Colonna Archaeological Park near Crotone?.</p>
    <p>Read more at: The Achaeology News Network, 29<sup>th</sup> January 2014.</p>
    <p>Posted by  Paul Barford   at  12:57     No comments:   Links to this post</p>
    <p align="center"><span style="color:#800000;">??????????????????..</span></p>
    <p style="text-align:center;"><b>What <i>ACTUALLY</i> Happened:-</b></p>
    <p>The <i>Archaeology News Network</i> reported the facts thus:</p>
    <p>The would-be robber, who was identified by the initials I.F., was caught by <b><i><span style="text-decoration:underline;">a metal detector</span></i></b> [<i>my highlights</i>] as he attempted to leave the 30,000-square-meter-park on a promontory overlooking the Tarentine Gulf with his loot.</p>
    <p style="text-align:center;"><span style="color:#800000;">??????????????????..</span></p>
    <p>The factual ineptitude of Barford?s Blog is only surpassed by his unique spelling; further proof, if further proof were needed, that his lame-brained Blog can only pump out 24-carat twaddle!</p>
    <p>This type of calculated deceit apparently supported by the <b>Council for British Archaeology </b>because of their<b> </b>hand-in-blouse,<b> </b>heavy petting sessions with<b> </b>the Warsaw Warbler, somewhat negates their wild claims ? and his –  that metal detectorists are cavalier with their finds.</p>
    </div>
    You can change the width, style, and color of the border to suit yourself. You can even give it rounded corners, if you wish, by adding {border-radius:16px} in the open div code.

    DO NOT Copy and Paste that last selection of code into your page. Some of the characters were changed by my editor. See the question marks? Just insert the blue lines as shown.

  14. #14
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much...it worked very nicely. I could have sworn that I did something similar but then again I can't remember what I had for breakfast. Many thanks...appreciate it. Now I can do this with future updates.

  15. #15
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,521
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Glad it's working the way you wish, Barnum. Thanks for the feedback.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •