OMSH

Last week’s WordPress Wednesdays tutorial went over the basics of how to center and border images using CSS. This week, as promised, the WW tutorial will be similar; I will demonstrate how to use CSS to assign image borders WHILE justifying images to the left or right and wrapping text around those same images.

Without further ado…let’s get started.

Again, let me remind you, whether you choose to edit your stylesheet (style.css) and/or other web files via the WordPress Dashboard or edit using a text editor and then upload to your server via a FTP program, just be consistent. Consistency wards off errors. Trust me on this one.

If you don’t remember, this may be a good time to stop and review how to find the “div class” that assigns styles to your individual posts as well as where that “div class” can be found in your theme’s stylesheet.

Got it?

Good – moving forward.

As I showed you last week, the div class in the WW stylesheet (style.css) that assigns styles to individual posts can be found in a bit of code that looks like this:

.post {
	margin-bottom: 50px;
}

And because there were no styles assigned for images before last week’s tutorial, we built the CSS below. This CSS gave us the option of centering an image with a 3 pixel double border or centering an image without a border. And? You were all so enchanted that you immediately went and re-wrote your CSS within your blogs, right? No? Oh well.

                .post img { }

		.post img.center {
			display: block;
			padding: 3px;
			margin: 0 auto 1.5em auto;
			border: 3px double #bbb;
			float: none;
			clear: both;
		}

		.post img.center-noborder {
			display: block;
			padding: 3px;
			margin: 0 auto 1.5em auto;
			border: 0px;
			float: none;
			clear: both;
		}

If you need to review how this works into the actual html image source code you key into your blog’s post, please feel free to do so.

Since I’ve last posted, I’ve changed up the CSS here in OMSHville (whoohooo new design!). Now my image borders are displayed just a tad differently, but for the purpose of this continued tutorial, I will retain the same CSS that I started with last week, so as not to confuse.

The following CSS will tell a browser to display an image on the left, with or without a border, and with the text wrapped to the right.

                .post img.left {
			padding: 3px;
			margin: 0.5em 15px 0.5em 0;
			border: 3px double #bbb;
			float: left;
			clear: left;
		}

		.post img.left-noborder {
			padding: 3px;
			margin: 0.5em 15px 0.5em 0;
			border: 0px;
			float: left;
			clear: left;
		}

What does it look like in action? It looks like this. Here is a photo of my oldest, who is rather annoyed at all my picture taking.

I pasted in the image code I’ll show you in a bit, assigning class=”left” for the style. See how nicely the text wraps the image on its right?

Per the CSS above, there is padding and margins assigned outside of the image. The padding is the distance between the image and the border. The margin is the distance between the outside of the border and the text wrapping the image.

Remember, the border displayed above is not what is shown throughout this site (I have bold lime green border since the redesign.).

The final part of the CSS is to left-justify the image.

The html code to assign this CSS looks like this:

<img class="left" src="http://farm3.static.flickr.com/2170/1505619878_b4244e924c_m.jpg" width="160" height="240" alt="That's SO NOT Funny" />

But what if I don’t want a border? Easy enough, I just make sure that I assign class=”left-noborder” inside the image tag.

This ensures that browsers will not add any border at all to the image, because as you see in the CSS above, I’ve assigned a border of 0 pixels.

There is still the same amount of padding and margin, but if desired the padding could certainly be reduced since there isn’t an actual border assigned any longer. I tend to keep it assigned for consistency.

The image is still left-justified and the clear property is assigned to make sure no floating elements are allowed on the left side of the image.

I don’t particularly like this effect on photographs, but it serves well for graphics that look better without a border, like this one.

The html code to assign this CSS looks like this:

<img class="left" src="http://farm3.static.flickr.com/2170/1505619878_b4244e924c_m.jpg" width="160" height="240" alt="That's SO NOT Funny" />

The following CSS will tell a browser to display an image on the right, with or without a border, and with the text wrapped to the left.

                .post img.right {
			padding: 3px;
			margin: 0.5em 0 0.5em 15px;
			border: 3px double #bbb;
			float: right;
			clear: right;
		}

		.post img.right-noborder {
			padding: 3px;
			margin: 0.5em 0 0.5em 15px;
			border: 0px;
			float: right;
			clear: right;
		}

It is basically the exact opposite of the CSS above that justifies images left.

And that’s it.
No really, THAT IS ALL.

You can paste these directly below last week’s code in your stylesheet if you want to full around with them. Change the colors, change the pixels on the border, personalize it and make it yours. That is the greatest part of CSS … the options are seemingly endless.

Like I mentioned last week, you can easily add these styles to any images uploaded to your WordPress via the upload feature; just upload the image(s) and add the style class the same exact way I did above into the image source. NO MATTER WHERE you pull the image from (flickr, free photo storage sites, etc..) you can assign any class written within your blog’s stylesheet.