Connect
To Top

Floating Images within the post in WordPress 2.6

The text editor that comes with WordPress 2.6 has some interesting things added.
When you have images within the content, you can float them inside the post so that the text wraps around the images properly.
You can align the images to be “left”, “right” or “centered”.

When you use the text editor to align the images, WordPress adds class=”alignleft”, class=”alignright” or class=”aligncentered” to the ‘img’ tags or its surrouding ‘div’ element, when you choose left, right or center alignment for your images.

The post looks aligned to the left, right or centered within the WordPress admin area, but when you see the post on your site, it may not look properly aligned. It is because the theme that you are using, may not be aware of those classes added by WordPress.

How do you make your site’s theme to be aware of these classes?

You have to add the style definitions for these classes in your current theme’s stylesheet.
Open your style.css in your Theme Editor [Login to your site and click on Design -> Theme Editor].
Add the following code to the end of style.css.
img.alignleft, div.alignleft
{
float:left;
margin:0 0.5em 0.5em 0;
}
img.alignright, div.alignright
{
float:right;
margin:0 0 0.5em 0.5em;
}
img.aligncenter, div.aligncenter
{
text-align:center;
margin:0 auto;
}

How to display the CAPTIONS for the image properly in WordPress 2.6?

Recently another question popped up in the support forums, asking the above question.
The Solution to that problem is mentioned at the codex as follows.
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

Add this to the end of your theme’s style.css.

This should normally take care of the image alignments / Captions when using the properties of the text editor in WordPress 2.6 and using one of my themes as your current theme.
Let me know if this article can be improved.
Thanks.

9 Comments

  1. wprocks

    komik yer

    July 28, 2008 at 1:15 pm

    Thank you very much for themes.

  2. wprocks

    Chelsea

    August 12, 2008 at 1:15 pm

    I have been looking for a list like this for soo long. Thank you Sadish!

  3. wprocks

    Phyllis Erck

    November 12, 2008 at 1:16 pm

    I have a header that I can’t crop easily. Can you tell me the image sizes for each of these themes so I can find one that will come closest to my header?

    thanks

  4. wprocks

    Angela

    February 12, 2009 at 1:17 pm

    Thank you very much! I am a student just getting started and I have been trying to find clean, well created themes that will allow me to customize the header. I really appreciate your efforts!

  5. wprocks

    Johnny

    December 29, 2009 at 1:27 pm

    You’re too Cool!
    Thank you so very Much!

  6. wprocks

    Jer

    February 18, 2010 at 1:32 pm

    are there any templates with no navigation on top,
    I prefer a side menu

  7. wprocks

    Sadish

    February 18, 2010 at 1:33 pm

    You can try my Blossom theme at http://wpthemepark.com/themes/blossom/

    It has the page menu in the side.

    Thanks

  8. wprocks

    Sadish

    April 2, 2010 at 1:34 pm

    You have to make this change in functions.php as well.

  9. wprocks

    mae

    September 16, 2010 at 1:35 pm

    thank you so much for your spruceup theme Mr Sadish
    you are truly one of a kind
    i keep on looking for a theme that really looks professional
    i’m glad i’ve found it in one of your designs
    keep sharing your talent us
    may God bless you…

Leave a Reply

Your email address will not be published. Required fields are marked *

More in Uncategorized