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.

Gather round one and all because we have serious business to attend to – together we need to reinvent the Blogroll. Yes, you read right – REINVENT.

When I was working through this new design of mine, once again I rammed up against the idea of a Blogroll. In the past, just like nearly every single one of you, I have experimented with different forms of the Blogroll. I’ve kept a looooooooooooong list of text links that no one in their right mind would sift through. I’ve kept a short list of actual daily reads. I’ve organized it by categories, and then, alphabetically, because I just might be a tad bit obsessive compulsive (just a smidgeon). For the past 6 months I’ve just dropped the Blogroll altogether in the hopes that I’d never have to mess with the gaggle of text links again. BUT! That doesn’t work. You know why? BECAUSE WE ARE A COMMUNITY.

Yep, we are a community of bloggers and we are supposed to give to each other. In the blogging world, that means a link.

Now, I’ll be honest, I don’t like reading through long lists of text links any more than I like standing in long lines. So, when I made my new design I kept trying to think of how I could include the whole idea of spreading the love WITHOUT a coastline of text links wrapping one side or the other of my web page. I started thinking of what I would click on; what would attract ME? What would I like to see at other sites? Me, myself and I brainstormed and it didn’t take long for us to realize that what the traditional Blogroll was missing was IMAGES. I am a visual person and linger where photographs, graphics, designs, etc… are thoughtfully taken/created and blogged.

And that is how I came to implement a visual Blogroll in my new design.

But it couldn’t stop there, because I’m also a search engine lunatic. Images aren’t enough. I mean images are nice for PEOPLE, but search engines can’t read them. I wanted to hit both angles at once. And so, I realized, there would need to be an image for eye candy and a text link for the search engines. And honestly, I thought that combination made the most perfect Blogroll ever.

So, I asked you guys to let me know if you’d be interested (you were), integrated the idea into my design, tossed it Jessica’s way for her to review, and to my delight she was just as excited as I was about it.

Continue Reading

I know, I know … Jessica SAID I’d have the details of The Blogroll New World Order up by now, BUT little did she know that I had a weekend brimming with activity, Activity, ACTIVITY! I have barely had time to read in my steamy new novel from Karen, let alone blog.

I have, however, taken photos to prove I’m not ignoring y’all for no reason. I swear. Really. I could never ignore this online community of mighty fine women and the growing number of mighty fine men.

All day long on Friday and Saturday I was tearing off bits of masking tape and labeling like a mad woman. Yes, a mad woman. Who else would mark a shirt $0.25 that was $30.00 in the store? Exactly. Garage sales bring out the freak in me. I find myself tearing into anything and everything. It goes beyond decluttering (which I adore) to a manic desire to simplify, downsize, GET RID OF STUFF! Oh, and making money is nice too – very nice indeed.

Both Friday and Saturday turned out to have the most fabulous weather. Okay, so it was 40 degrees until the sun peeped out and shone down, but after 100+ degree weather and enough humidity to make a fish feel at home out of water, I wasn’t complaining. I put on a windbreaker and smiled at myself in every reflection I passed – MAN! if I don’t LOVE how my hair works the two days a year we have no humidity.

Continue Reading