Freelancer.com

Go Back   Warrior Forum - The #1 Internet Marketing Forum & Marketplace > Warrior Support Forums > Website Design
Register Blogs Social Groups Advertise with usHelp Desk

Reply
LinkBack Thread Tools
Unread 10th December 2010, 12:32 PM   #1
Advanced Tea Maker
War Room Member
 
phil.wheatley's Avatar
 
Join Date: 2008
Location: London, England (Know what I mean mate!)
Posts: 1,122
Thanks: 463
Thanked 289 Times in 148 Posts
Default Putting border around a paragraph in wordpress

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

[SIGPIC][/SIGPIC]


It's still not working for you??? Need direction?...
---->>>> BrainDirection.com <<<<----
phil.wheatley is offline   Reply With Quote
Unread 10th December 2010, 12:44 PM   #2
HyperActive Warrior
War Room Member
 
Titanphil's Avatar
 
Join Date: 2009
Location: Los Angeles
Posts: 110
Thanks: 87
Thanked 47 Times in 37 Posts
Default Re: Putting border around a paragraph in wordpress

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.

Titanphil is offline   Reply With Quote
Unread 10th December 2010, 12:54 PM   #3
HyperActive Warrior
 
aesoft's Avatar
 
Join Date: 2002
Location: USA
Posts: 327
Thanks: 1
Thanked 14 Times in 13 Posts
Default Re: Putting border around a paragraph in wordpress

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!

- James
aesoft is offline   Reply With Quote
Unread 10th December 2010, 01:03 PM   #4
Advanced Tea Maker
War Room Member
 
phil.wheatley's Avatar
 
Join Date: 2008
Location: London, England (Know what I mean mate!)
Posts: 1,122
Thanks: 463
Thanked 289 Times in 148 Posts
Default Re: Putting border around a paragraph in wordpress

Hey Guys

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

Philbo

[SIGPIC][/SIGPIC]


It's still not working for you??? Need direction?...
---->>>> BrainDirection.com <<<<----
phil.wheatley is offline   Reply With Quote
Unread 10th December 2010, 01:05 PM   #5
HyperActive Warrior
 
aesoft's Avatar
 
Join Date: 2002
Location: USA
Posts: 327
Thanks: 1
Thanked 14 Times in 13 Posts
Default Re: Putting border around a paragraph in wordpress

Quote:
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.

- James
aesoft is offline   Reply With Quote
Unread 10th December 2010, 10:42 PM   #6
copy and paste geek
War Room Member
 
Join Date: 2005
Location: Calgary
Posts: 1,804
Thanks: 152
Thanked 316 Times in 257 Posts
Default Re: Putting border around a paragraph in wordpress

Quote:
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

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

The KimW WSO
Lloyd Buchinski is offline   Reply With Quote
Unread 10th December 2010, 11:11 PM   #7
HyperActive Warrior
 
aesoft's Avatar
 
Join Date: 2002
Location: USA
Posts: 327
Thanks: 1
Thanked 14 Times in 13 Posts
Default Re: Putting border around a paragraph in wordpress

Quote:
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.

- James
aesoft is offline   Reply With Quote
Unread 11th December 2010, 12:04 PM   #8
copy and paste geek
War Room Member
 
Join Date: 2005
Location: Calgary
Posts: 1,804
Thanks: 152
Thanked 316 Times in 257 Posts
Default Re: Putting border around a paragraph in wordpress

Quote:
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.

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

The KimW WSO
Lloyd Buchinski is offline   Reply With Quote
Unread 11th December 2010, 12:06 PM   #9
TopBusinessQueen
 
Mehak's Avatar
 
Join Date: 2010
Location: Scotland
Posts: 181
Thanks: 0
Thanked 12 Times in 12 Posts
Default Re: Putting border around a paragraph in wordpress

yep very informative, so many ways to do these kinds of things and I get very excited learning all these techniques! lol
Mehak is offline   Reply With Quote
Unread 11th December 2010, 12:20 PM   #10
HyperActive Warrior
 
aesoft's Avatar
 
Join Date: 2002
Location: USA
Posts: 327
Thanks: 1
Thanked 14 Times in 13 Posts
Default Re: Putting border around a paragraph in wordpress

Quote:
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.

- James
aesoft is offline   Reply With Quote
Unread 11th December 2010, 10:33 PM   #11
Advanced Warrior
War Room Member
 
promo_guy's Avatar
 
Join Date: 2008
Location: UK by way of Cali
Posts: 846
Thanks: 837
Thanked 339 Times in 160 Posts
Default Re: Putting border around a paragraph in wordpress

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

promo_guy is offline   Reply With Quote
Unread 4th March 2014, 11:55 PM   #12
Warrior Member
 
Join Date: 2014
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default Re: Putting border around a paragraph in wordpress

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


Quote:
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!
Rinki is offline   Reply With Quote
Unread 5th March 2014, 02:19 AM   #13
Warrior Member
 
Join Date: 2014
Location: India
Posts: 12
Thanks: 0
Thanked 1 Time in 1 Post
Default Re: Putting border around a paragraph in wordpress

The main two answer you were got which is really helpful because i have also tried it for the checking. it is really useful.
RobbieLima is offline   Reply With Quote
Unread 5th March 2014, 11:35 PM   #14
HyperActive Warrior
 
owen2012's Avatar
 
Join Date: 2012
Posts: 164
Thanks: 6
Thanked 27 Times in 21 Posts
Default Re: Putting border around a paragraph in wordpress

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


owen2012 is offline   Reply With Quote
Unread 8th March 2014, 06:59 PM   #15
Financial Entertainer
War Room Member
 
Mr Bill's Avatar
 
Join Date: 2011
Location: Australia
Posts: 1,551
Thanks: 1,098
Thanked 892 Times in 474 Posts
Default Re: Putting border around a paragraph in wordpress

Quote:
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.

Mr Bill is offline   Reply With Quote
Reply

  Warrior Forum - The #1 Internet Marketing Forum & Marketplace > Warrior Support Forums > Website Design

Bookmarks

Tags
border, paragraph, putting, wordpress

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




All times are GMT -6. The time now is 12:29 AM.