Free Wordpress Help | Image And Paragraph Spacing In Wordpress Posts

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

Leave a Reply




Ninja This!
Diggdel.icio.usFurlStumbleUponTechnorati

 

Related Posts:

    Wordpress Theme Customizations - Header Images With Hyperlinks

    Wordpress Theme Customizations - Removing The Sidebar Altogether

    Wordpress Theme Customizations For Beginners Pt 1 - The Layout

    Why Do Wordpress Themes Sometimes Not Display Properly?