I learned something new the other day while reading through the WordPress Codex which provides information on how to manipulate wordpress code behind the scenes and provides you with the tips and information you would need to create your own custom theme. I am not a programmer, coder at all actually, what I can do is take something that exists and tweak it here and there. What I wondered was why on some of my blogs the images would align perfectly, when I chose “Alignment Left” or “Alignment Right” when inserting images into posts, the text would properly wrap around the image.
This blog however previously, when I aligned an image left or right, the text wouldn’t wrap around the image but would just show up next to the image at the very bottom, it was very unpleasant cosmetically which is why I generally just centered all of my images.
Then I learned that starting in WordPress 2.6 or later, wordpress allowed designers to easily add some css code to the style.css that would automatically align images to left/right and allow text to wrap around images. I figured this blog’s theme must have been around prior to WordPress 2.6 so I decided to add the following lines to my style.css:
.aligncenter {display: block; margin-left: auto; margin-right: auto}.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
float: right;
}.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
float: left;
}
Once I added those lines of code into my style.css (Stylesheet) for wordpress, all of my images now automatically and properly set themselves when I choose to align them left, right or center.
With this code now when you align an image to the left, it will show up to the left of your text, with your text properly wrapping around the image as you see with this image to the left here. It was so simple to do this, I can’t believe it took me so long to finally search through the wordpress codex to figure out how.
Also now if I insert an image and select align right, the image will be on the right side of my post with the text wrapping around to the left as is demonstrated by this line of text, this allows you to embed smaller images into your post to add flare and help break up the monotony of too much text. I have always liked the appearance of images small and aligned with text wrapping while reading blog posts personally.
Summary:
If you have trouble with your wordpress theme not aligning images left or right the way you like them you can insert the lines of text above to make your images align and float so that text wraps around them properly. You can also tweak the code above and make a smaller or larger padding which is the invisible border around the image, make sure you have at least some padding or else the text will touch up against the image and make it harder to read and a little more unpleasant to look at.
-Dragon Blogger
Related posts:
- How to Wrap HTML Text in PRE Tags Code to wrap html text in pre tags so that it will wordwrap inside your blog post. Normally pre tags...
- Dragon Blogger uses a New WordPress Theme In an ongoing effort to troubleshoot my Internet Explorer woe’s, I have chosed a new theme. However, being that this...
- Rock Along Productions Free WordPress Theme Contest Rock Along Productions is giving away a free wordpress theme from Aloha Themes which includes support from the company if...
- Insert Code into Windows Live Writer with Code Snippet Windows Live Writer Code Snippet plugin lets you add source code easily to your Wordpress blog posts so they are...
- Tweak your WP-125 WordPress Plugin Method of tweaking your Wordpress WP125 plugin so that it will open target ad in new window or tab instead...
| via FaceBook, Twitter, RSS or Email |  |
Enter your email and subscribe now!
Tags: align your images in wordpress, blog theme tips, blogging tips, improving your blog theme, text wrap image in wordpress post, tweaking blog theme, wordpress aligncenter, wordpress alignleft, wordpress alignright, wordpress codex, wordpress customizations, wordpress image, wordpress images in post, wordpress style.css, wordpress text around images, wordpress theme customization, wordpress theme tips, wordpress tips, wordpress tweaks, wordpress wrap text around images, wrapping text around images
December 20th, 2009 at 8:35 am
Hi Justin, I’m pretty sure my theme does that for me (can’t say for sure as I’m legally brain dead today) but I’ve tried a few that don’t, so this info would have been helpful there. I know my thumbnails are screwed up, but that’s a whole other issue.
Heather Kephart´s last blog ..Places not to put your Diet Coke
[Reply]
December 20th, 2009 at 9:20 am
[...] Link: Modify Your WordPress Theme to Align Images on Dragon Blogger [...]
December 20th, 2009 at 12:20 pm
Hmm.. I guess, that this is a good idea to tweak these classes in css, because what you have now (two last pics) look much better with little paddings.
iWoodpecker´s last blog ..Insane List of 140 Do Follow & Nofollow Blogs with CommentLuv 2010
[Reply]
December 21st, 2009 at 5:59 pm
Very useful tip, thanks DB.
Dennis Edell´s last blog ..The $10 Winner And More Good News…..
[Reply]
December 22nd, 2009 at 7:21 pm
Where exactly should this code be inserted? Just anywhere in the Stylesheet? Thanks for a great tip- so far, I have been manually adjusting the padding, etc to every image in each post,and it is laborious. I’d love for it to be automatic.
Rebecca´s last blog ..Good Gravy!
[Reply]
December 23rd, 2009 at 8:17 am
You can put it anywhere in your style.css and it should work, but adding it somewhere under the .post section is best
[Reply]
June 6th, 2010 at 5:13 am
Hi Dragon Blogger,
Im a new when it comes to WordPress, Im having problems with alignment stuff. Can you please show me on which line I could insert your codes at my Style.CSS of my wordpress? Thanks!
[Reply]
June 6th, 2010 at 5:14 am
By the way, here’s my name and email add. thanks again!
ptorres@derelect.com
Perry Torres
Perry Torres´s last blog ..Where to Retire Cheap
[Reply]
June 6th, 2010 at 9:30 am
As long as you put it somewhere in the #post section, it doesn’t matter exactly what line, it should be read.
June 28th, 2010 at 3:39 am
I am a joomla user and i am satisfied with it. But now-a-days i am seeing a lot of articles and blogs on wordpress. Is it better than Joomla? The way you have posted here to Align Images is good but complex. It’s much easy in joomla.
[Reply]
June 28th, 2010 at 6:56 am
I haven’t used Joomla, this trick is only needed if you run an older WordPress theme that didn’t have the proper align codes built in.
[Reply]
July 18th, 2010 at 2:24 pm
Really useful, thanks, that would have taken me ages to fatham out.
I put it at the end of my stylesheet and it worked a treat.
Meghan´s last blog ..Avon Supermagnify Mascara
[Reply]
July 18th, 2010 at 4:13 pm
Glad you found it helpful.
[Reply]
August 18th, 2010 at 9:15 pm
I’ve tried placing the code you put up but no success. I’ve been trying to find a way to wrap my text around images for quite some time now but can’t seem to get it to work.
[Reply]
August 18th, 2010 at 9:40 pm
Use Firebug on firefox, select your image with Firebug and it will show you which lines in the style.css apply to that image. Add the code in that area.
[Reply]