Tame your posts: Part 1 - Images
By ezra vancilOk, so I'm a control freak. But, if you think about it that's actually not a bad quality for a designer,Ok, so I'm a control freak. But, if you think about it that's actually not a bad quality for a designer, though my wife may differ. My wife and I had a little tiff the other day over a blog post. See, she found a tragic story of someone being persecuted in a foreign country, that i don't remember right now, and she wanted to post it right away for the other members to see. It was a worthy post for my other network, little pray box, so why did I nearly fall over the coffee room table trying to delete it. Well, because I'm a control freak and the post looked horrible, with bullets and ordered lists naked and plain, images that had no style. It simply made my design look bad. Man, did she get mad; she said I cared about my site more than the people in whatever country that was. I tried to explain that my site looking like that was like her out to dinner with a dangling booger. She didn't get it. I finally had some time and fixed the post up a bit, and then I decided I wouldn't allow my members to put ugly lists and plain-jane pics on my blog. So I got out the CSS. Now the truth is, they can always override my styles if they are handy with the HTML editor in the post section. But I don't think many will, and if they do, they will be banned. :) We'll work with the few tags that are provided in a blog post.
- ,
- ,
, and there is also and
but we will hit those later.
Images
Here is how to give your member's or your images a little style. This is a simple example, but with a little imagination, you could do wonders. If anything you can bring a little pf your sites theme and colors into the posts and therefore have more consistency... and you can't get enough of that.
I will style this in my site theme.css, that way whenever someone posts a image it will have the style applied.
We will be working with the "img" tag, but I've got "imgs" all over the site so I have to narrow it down to just the blog posts and I'll do it with the class ".blog-entry"
We'll grab the post IMG by telling it who its daddy is:
.blog-entry img { padding: 10px; }We're going to make a frame on this, so we need some padding:
.blog-entry img {
padding: 10px;
}Give the background a slight color variation:
.blog-entry img { padding: 10px;
background: #ebf1cf;
}and now our border and wa'la (You coul also use the "outline" property for multi-colored double outline):
.blog-entry img { padding: 10px; background: #ebf1cf;
border: 1px solid #e2e7b1;
}Here is The Result:
NEXT
TIME
In the next article of Tame your Post, we are going to look at a few potential problems with styling your LINKS and IMG elements and see what we can do to fix them.
<
2 3 4
