Putting border around a paragraph in wordpress

13 years ago

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.

[ 1 ] Thanks

{{ DiscussionBoard.errors[2996048].message }}

aesoft

13 years ago

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!

[ 3 ] Thanks
2 replies

{{ DiscussionBoard.errors[2996115].message }}

Lloyd Buchinski

13 years ago

Originally Posted by aesoft

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

Thanks
1 reply

Signature

Do something spectacular; be fulfilled. Then you can be your own hero. Prem Rawat

The KimW WSO

{{ DiscussionBoard.errors[2998374].message }}

aesoft

13 years ago

Originally Posted by Lloyd Buchinski

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.

Thanks
1 reply

{{ DiscussionBoard.errors[2998474].message }}

Lloyd Buchinski

13 years ago

Originally Posted by aesoft

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.

Thanks
2 replies

Signature

Do something spectacular; be fulfilled. Then you can be your own hero. Prem Rawat

The KimW WSO

{{ DiscussionBoard.errors[3000737].message }}

Mehak 13 years ago

yep very informative, so many ways to do these kinds of things and I get very excited learning all these techniques! lol
- Thanks
{{ DiscussionBoard.errors[3000744].message }}

aesoft

13 years ago

Originally Posted by Lloyd Buchinski

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.

Thanks

{{ DiscussionBoard.errors[3000795].message }}

Rinki

10 years ago

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

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!

Thanks
1 reply

{{ DiscussionBoard.errors[9005098].message }}

Mr Bill

10 years ago

Originally Posted by Rinki

...

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.

Thanks

{{ DiscussionBoard.errors[9014854].message }}

phil.wheatley

13 years ago

Hey Guys

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

Philbo

Thanks
1 reply

Signature

It's still not working for you??? Need direction?...
---->>>> BrainDirection.com <<<<----

{{ DiscussionBoard.errors[2996177].message }}

aesoft 13 years ago

Originally Posted by phil.wheatley

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.
- Thanks
{{ DiscussionBoard.errors[2996188].message }}

promo_guy

13 years ago

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

[ 1 ] Thanks

{{ DiscussionBoard.errors[3002763].message }}

RobbieLima

10 years ago

The main two answer you were got which is really helpful because i have also tried it for the checking. it is really useful.

Thanks
1 reply

{{ DiscussionBoard.errors[9005354].message }}

owen2012 10 years ago

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
- Thanks
{{ DiscussionBoard.errors[9008121].message }}

Putting border around a paragraph in wordpress

Trending Topics

Boat and Jet Ski Rentals...... Door Hangers Effective?

Are billboards still effective in driving customers?

Let's dissect the genius behind Nike's 'Just Do It' slogan. What makes it so powerful and timeless?

A Very Strange Internet Problem

4 underutilised SEO research approaches to explore