Ask me a question at the Wordpress Ninja Forum
Image And Paragraph Spacing In Wordpress Posts
Posted on August 13, 2008
Filed Under Wordpress Solutions |
You may have noticed how some themes don’t look so good when you insert an image into a post and align it somehow e.g. align to the left or right or top or bottom. Many Wordpress themes have no image spacing so the inserted images are tucked right up against the text which just looks ugly and unprofessional. The Prosense theme is a fantastic theme, but unfortunately suffers from this spacing problem as well as other themes i have seen, so i thought this issue deserves a post of it’s own.
Fortunately its an easy fix. Start off by editing your style.css file which is found in your /wp-content/themes/<your theme name>/ folder. Find any references to “img” and/or “.alignleft” or “.alignright”. The only parts you need to be worried about is the alignleft for images and the alignright for images. The biggest problem we have is all themes seem to be different in how they reference the image alignment. Prosense theme for instance has no img.alignleft or img.alignright rather it just has a section for .alignleft and .alignright, so its a little confusing in that sense. Other themes might have img.alignleft etc. So you may end up doing a bit of trial and error to find which section controls your post images, but if you use what i explained here as a good guideline then you should be ok. Im happy to look at anyone’s theme if you still get stuck finding the image alignment sections in the style.css file.
Once you find them, you need to adjust the padding settings i.e. make sure it has a padding setting that will reflect the spacing you want. Remember from my previous post on layouts how to use padding, that we can specify the pixel white space on each side of the imaginary container - in this case the image is the container. It is totally up to you what kind of padding you prefer though i generally go with something like this:
img.alignleft {
padding: 4px 8px 4px 2px;
}
img.alignright {
padding: 4px 2px 4px 8px;
}
NB: Remember the notation order for the padding - Top, right, bottom, left
Paragraph spacing is a slightly different beast, which some themes don’t have built in. The spacing i am referring to here is the vertical whitespace between paragraphs i.e. carriage returns between paragraphs. You can force carriage returns in your posts, though the best and quickest way to get whitespace between paragraphs is via the style.css file. You need to find any reference to the entry text i.e. “.entry”. Here is an example of the kind of code you are looking for:
.entry {
margin-bottom: 10px;
text-align: justify;
}
This code will correctly display whitespace (similar to a carriage return) between paragraphs. The key line which you probably already guessed, is the margin-bottom command. This tells the code to leave 10 pixels between paragraphs, though you could change this to any size you like.
Save the style.css file and upload to your host overwriting the old version. As usual, make sure you already have backups just in case something goes wrong.
That’s all there is to it.
Comments
20 Responses to “Image And Paragraph Spacing In Wordpress Posts”
Leave a Reply
Related Posts:
-
Search
Louis Vuitton Bags:
I really need help withbaidu:
very well written,thank you share. baiduNFL Jerseys:
Great, I think you coveredNike Air Rejuven8:
I love your blog's style.christian:
Christian Louboutin Bat Girl 100
About WPNinja
Hi, i am the Wordpress Ninja. My name is Paul and my goal is to be able to answer everyone's Wordpress questions (for free) and post the best solutions on this blog. So for all questions and issues please post in the Wordpress Ninja Forum
Thanks for sharing this! I just went through and fixed the padding on my alignleft and alignright to make my pages look nicer. I had to end up leaving an old “.post img” set for the images that were added in using the < 2.5v of WP. Thanks again!
Thanks for the post. Got the perfect fix juxt in time.
I want to display only 4 lines of every post in home page. how to work with word press.
pls guide me.
Thanks
I wrote an easy tutorial about this. It’s easy, I mean “cut and paste” easy to get some extra space between your paragraphs. And it doesn’t require modifying your CSS file. Check it out!
http://tystips.com/archives/54/how2-insert-space-between-paragraphs-in-wordpress-without-using-br-and-p-tags/
I hope this helps your readers.
Worked perfectly. Thank you!
hi paul. hope u can assists me in my postings when it comes to this alignment / wrapping of images on my post / excerpts.
you can find my blog site here
http://buhay-noypi.com/noypi_blogs
i am having a hard time in fixing this.
your help would be very much appreciated
thank you
firefly
Firefly,
what exactly is the problem? What is wrong with your alignment in particular?
actually, the space on the right portion of the picture i have inputted ( via excerpts ) is being wasted. i want the text to be near ( right portion of the picture to maximize the space.
thanks
Firefly,
If you want the text to flow around the image e.g. image on the left and text to the right of it and underneath, then you need to choose the alignment when you insert the image to the post. Basically you need to select ‘Left’ alignment to get this result. If your theme still doesn’t work with left alignment let me know.
GUCCI Handbags
GUCCI Replica Handbags
replica GUCCI Handbags
fake GUCCI Handbags
Hi,
I tried to edit the style.css , but there are no ‘entry’ command over there, should I then just add the code that you gave me to increase the space between paragraphs?
I used this command in the html mode and it worked, but I have many people working for me, and I can’t ask them to do this every time they create an article, can you suggest me how to get solve this issue. I have issues with only two themes, rest of my sites are perfect. Please check my sites and help me. http://www.universalages.com and http://www.financialages.com are the two sites that have this issue
Thanks a lot. saved my time.Thanks for tutorial.
http://techchand.org
Thank you very much for the explanation. But I have another problem with image and paragraph spacing. When I set the image in my post to align-left, the second paragraph of the post occur after the image, so there is a long space between first paragraph and second paragraph. You can check the problem in my post example => http://masdinsite.info/2010/02/my-first-payment-proves-shorttask-not-scam/
I really need help to fix this paragraph spacing because I love use the current theme.
Thanks in advance Ninja….
Thank you very much! This was very helpful.
Thank you for the information
Thanks. It saved my time. It was very helpful.
Pass4sure certification exam
That Was gr8 post
Really Helped In writing Sms and Tips..
Thanks A ton
We’r one of the most profession ed hardy of the coolest and latest ed hardy apparel, such as ed hardy tee ,ed hardy bags, ed hardy caps, ed hardy Polos, ed hardy hoodies, ed hardy men T-shirt and more. We offers a wide selection of fashion cheap ed hardyproducts. Welcome to our shop or just enjoy browsing through our stunning collection available wholesale ed hardy in our shop; our goal is to delight you with our distinctive collection of mindful ed hardy products while providing value and excellent service. Our goal is 100% customer satisfaction and we offer only 100% satisfacted service and ed hardy products. Please feel free to contact us at any time; we are committed to your 100% customer satisfaction. If you’re looking for the best service and best selection, stay right where you are and continue shopping at here is your best online choice for the reasonable prices. So why not buy your ed hardy now, I am sure they we won’t let you down.
Thank you very much for this article. It helped me lot.