Putting border around a paragraph in wordpress

by 14 comments
Hi Gang

If I have a paragraph in a wordpress blog, and I want to put a black thin borber around the whole paragraph (to show that it is a testimonial), can I do this and how would I do it???

Many thanks
Phil
#web design #border #paragraph #putting #wordpress

  • Profile picture of the author Titanphil
    Phil,
    I would create a cool block image using GIMP, Photoshop, or Paint.net, add the text inside of it, and then place that image inside your blog. This can be done in a few minutes.
  • Profile picture of the author aesoft
    Here's the basic styling for the border:
    Code:
    border: 1px solid #000000;
    Example with paragraph element:
    Code:
    <p style="border: 1px solid #000000;">Your Content</p>
    Or you can use it in a CSS file (if you use one) and assign it to a class.

    For example, in the CSS file you may have a class name of 'testimonial-style':
    Code:
    .testimonial-style { border: 1px solid #000000; }
    Then use the class for the paragraph element:
    Code:
    <p class="testimonial-style">Your Content</p>
    Hope this helps!
  • Profile picture of the author phil.wheatley
    Hey Guys

    Wow, awesome, that's two very different but practical ways of doing it. Thanks for your help!!

    Philbo
  • Profile picture of the author aesoft
    Originally Posted by phil.wheatley View Post

    Hey Guys

    Wow, awesome, that's two very different but practical ways of doing it. Thanks for your help!!

    Philbo
    My pleasure, glad it helped.
  • Profile picture of the author Lloyd Buchinski
    Originally Posted by aesoft View Post

    Here's the basic styling for the border:
    Code:
    border: 1px thin #000000;
    Example with paragraph element:
    Code:
    <p style="border: 1px thin #000000;">Your Content</p>
    Or you can use it in a CSS file (if you use one) and assign it to a class.

    For example, in the CSS file you may have a class name of 'testimonial-style':
    Code:
    .testimonial-style { border: 1px thin #000000; }
    Then use the class for the paragraph element:
    Code:
    <p class="testimonial-style">Your Content</p>
    Hope this helps!
    I've never used 'thin' in a css sheet but that just looks a bit funny. If you have '1px' you will get a 1px border which is as thin as it can get. Maybe thin would give you the same result, but I don't see the point to having both of them. Mine are usually something like 'border:solid 1px #ccc;' That results in a border a single pixel thick (or thin) in a neutral gray.

    Were you not aware of that, or is there something here that I don't understand? (we are all just learning, especially me)

    best wishes
  • Profile picture of the author aesoft
    Originally Posted by Lloyd Buchinski View Post

    I've never used 'thin' in a css sheet but that just looks a bit funny. If you have '1px' you will get a 1px border which is as thin as it can get. Maybe thin would give you the same result, but I don't see the point to having both of them. Mine are usually something like 'border:solid 1px #ccc;' That results in a border a single pixel thick (or thin) in a neutral gray.

    Were you not aware of that, or is there something here that I don't understand? (we are all just learning, especially me)

    best wishes
    Ha!

    Thanks Lloyd, caught me asleep at the wheel. Was working on a project when I answered that earlier and it looks like I blended a bit of both (embarrassed). It's kinda funny though...

    Just to clarify...
    the 'thin' is an actual attribute for the "border-width". Which would be equivalent to the '1px' in the examples.

    You're right Lloyd, the "border-style" was missing, and needed, instead of another border-width.

    Here are a couple of the different "border-styles" you can use: solid, dotted, dashed, double, grooved... etc.

    Phil, just replace the word 'thin' (from my previous example) with solid' and you'll be golden:

    Code:
    .testimonial-style { border: 1px solid #000000; }
    My apologizes if I ended up making it more confusing than what it is.

    Thanks again Lloyd, nice catch!

    I'm heading to make the changes in the first examples now.
  • Profile picture of the author Lloyd Buchinski
    Originally Posted by aesoft View Post

    I'm heading to make the changes in the first examples now.
    It's amazing how many (tedious ) details can go wrong with code. I was wondering later why you didn't list solid and thought maybe it was because solid is the default display, and maybe it wasn't needed. Glad I dropped back here and you mentioned it before I checked on that. Thank you.

    Also realized after that the op asked about Wordpress, and at least for paragraphs that you type or paste directly in, this whole approach wouldn't work. I don't use WP and haven't even fiddled around enough to know how to put up a border for that kind of posting. Maybe the op could edit the thread title to include Wordpress to get some of those people with a solution for that.
  • Profile picture of the author Mehak
    yep very informative, so many ways to do these kinds of things and I get very excited learning all these techniques! lol
  • Profile picture of the author aesoft
    Originally Posted by Lloyd Buchinski View Post

    Also realized after that the op asked about Wordpress, and at least for paragraphs that you type or paste directly in, this whole approach wouldn't work. I don't use WP and haven't even fiddled around enough to know how to put up a border for that kind of posting. Maybe the op could edit the thread title to include Wordpress to get some of those people with a solution for that.
    Hey Lloyd... The example was just a straight forward/basic example, there could other factors involved like you state. WordPress sites could have quite a bit of styling going on, every site is different.

    It is possible that other styles within the site could override other pre-declared styles, so placement of the styling declaration could be more important for one site than another. The more styling going on the greater the chance of confusion and something going awry.

    Phil, if you do run across the dilemma Lloyd mentions (where you don't see the changes you need), then let me know and I'd be happy to help you with the placement of the style declaration.

    Overall CSS syntax is relatively simple. It's the actual use of it that seems to make it a little more complicated.
  • Profile picture of the author promo_guy
    Another thing to consider is adding some padding. Just adding a 1px border could mean it's butted up against the text, depending on if the paragraph already has padding.

    So, it might look like:

    .class-name {border:1px solid #000; padding: 5px;}

    or you could add a border to just one side, such as boder-left, border-right, border-top, etc.

    As aesoft says, CSS is relatively simple (though powerful and I love it! lol) and there are some really cool things you can do, especially if you combine with jquery/javascript.

    Anyway, good stuff guys
  • Profile picture of the author Rinki
    Thanks.
    This worked, I could change the color of the border as well.

    I have a question related to inserting picture in wordpress post.
    I have set featured pciture for my post and the Resolution of featured picture is very good.
    But if I use same picture in my post, using add Media, and try to increase its size a bit. its resolution is coming very bad.

    I mean same picture used at both the places, but resolution is so diff in both. why?

    Thanks.
    Rinki


    Originally Posted by aesoft View Post

    Here's the basic styling for the border:
    Code:
    border: 1px solid #000000;
    Example with paragraph element:
    Code:
    <p style="border: 1px solid #000000;">Your Content</p>
    Or you can use it in a CSS file (if you use one) and assign it to a class.

    For example, in the CSS file you may have a class name of 'testimonial-style':
    Code:
    .testimonial-style { border: 1px solid #000000; }
    Then use the class for the paragraph element:
    Code:
    <p class="testimonial-style">Your Content</p>
    Hope this helps!
  • Profile picture of the author RobbieLima
    The main two answer you were got which is really helpful because i have also tried it for the checking. it is really useful.
  • Profile picture of the author owen2012
    The cool thing about using an image is that you can create a testimonial using a handwriting font.

    I install free handwriting fonts and screen shot Microsoft word documents.

    10 Awesome Free Handwritten Fonts | MyInkBlog

  • Profile picture of the author Mr Bill
    Originally Posted by Rinki View Post

    ...

    I have a question related to inserting picture in wordpress post.

    I have set featured pciture for my post and the Resolution of featured picture is very good.
    But if I use same picture in my post, using add Media, and try to increase its size a bit. its resolution is coming very bad.

    I mean same picture used at both the places, but resolution is so diff in both. why?

    Thanks.
    Rinki
    I would never use the "adjust size by percentage" function in wordpress to resize any image. I always make the images the exact size they need to be (in photoshop) and use them as is at 100%. Most (non photoshop) image software does a very bad job of resizing images let alone the wordpress function. Scrunching a jpg by altering it's display size will always lead to poor results. Jpegs are very unforgiving when it comes to this.

    Get photoshop or ask someone who has it to resize your images for you. You could try GIMP I've heard it's a good alternative but in my experience nothing can resize an image clearer than photoshop.

Next Topics on Trending Feed