Style Images in Posts and Pages by WordPress

43. Style images in posts and pages by WordPress.

Current versions of WordPress now include image alignment built-in. WordPress adds CSS classes to align the image to the right, left, and center of a paragraph. So the text can wrap around the image.

To take advantage of these new CSS classes for image alignment and the text wrapping around the image, the WordPress.

img.alignright {float:right; margin:0 0 1em 1em}

img.alignleft {float:left; margin:0 1em 1em 0}

img.aligncenter {display: block; margin-left: auto; margin-right: auto}

a img.alignright {float:right; margin:0 0 1em 1em}

a img.alignleft {float:left; margin:0 1em 1em 0}

a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

When you add the image in your WordPress blog, you should select the image alignment as right, left, or center in the Image/Media Panel.

The image will be embedded into your blog post with the selected style for alignment like this:

<img src=”http://example.com/images/leaf.jpg”

 alt=”leaf graphic”

 title=”leaf graphic”

class=”alignright size-medium wp-image-3109″

height=”25″ width=”30″/>

To style every image on your site so that it looks a particular way, you should look for or add the CSS selector for the image tag. After you should add your styles to the tag.

For example, if you want a black border around all of your images and you want space between the border and the image, as well as the appropriate spacing around the image and the text.

img {

     margin: 5px;

     padding: 10px;

     border: solid black 1px

}

You may change the border thickness and set it to a “double” line. And if you really need to isolate your image from the rest of the text, so you increase the margin around the image.

img {

     margin: 20px;

     padding: 10px;

     border: double black 1px

}

Add to your style sheet a specific style for specific images. If you have already styled all of your images, you have to ensure you specify every style declaration or attribute specified in the image tag style in order to override that attribute. If you don’t change the margin, it will remain the same in the new style.

If you wish to have some images in your posts filed in the category of Nature have a nice green background. The rest of the images must look the same, just the ones you add in your Nature category.

You simply have to add a class to your style sheet and each image within that category.

img.nature {

     margin: 20px;

     padding: 20px;

     border:solid #003300 4px;

     background: #006600;

}

You just add the class for “nature” on each of the images within that category:

<img src=”leaf.gif” alt=”Red leaf” class=”nature” />

You can create as many different styled images as you wish!

And I hope this article was helpful for you, guys!

Share this!

Post Author: Staff

Leave a Reply

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