« Prev Post:


Intellectual growth should commence at birth and cease only at death. »» Albert Einstein

» Next Post

Pretty Blog Pictures Thanks To CSS!

Posted on November 19, 2008
Stumble it!  |  Email This Post Email This Post   |  Print This Post Print This Post   |

Part of the Wonderful WordPress Wednesdays Series - Previous in series         Next in series

Welcome to the seventh installment of my Wonderful WordPress Wednesday series.

As you may have noticed I haven’t exactly been keeping to a weekly schedule with this series and, unfortunately, I probably won’t be returning to one until 2009. But this little discovery was too great to not share with y’all while it was fresh in my mind.

Last October I ran a review contest to get some quality feedback on Philaahzophy.  The best piece of advice I received  was to add a CSSClass to my in post images so that they looked more uniform.  I did a quick bit of research and learned that I could style all of my pictures by adding

class="pic"

with the IMG tag of my pictures and the following to my style.css file (through Presentation > Theme Editor in my wp-admin)-

.pic {
padding:5px;
background-color:#e1ccac;
border: 1px solid #660000;
margin: 6px;
}

That’s what I’ve done ever since to put that nice little border around all of my images here at Philaahzophy and on my other blogs as well.  However, since I don’t host my own images (which is both a bandwidth saving and revenue generating decision) I don’t insert pictures into my post by way of the image button in the post editor, but rather I copy and paste my image host’s code directly into my post.  I then have to go back into that code and type class=”pic” in the appropriate place.  If (read: when) I forget to include the code my blog images look like crap.  A better way was needed.

Today I found that better way!  Leaving my old code behind I inserted the following line into my style sheet-

#main a img {padding:5px;background-color:#e1ccac;border: 1px
solid #660000;margin: 6px;}

Now the same attributes I was getting with the “class” tag are automatically applied to all images included in my posts!  Woohoo!  Ain’t automation grand?

Now, I know very, very little about CSS, so realizing both that I could do this and exactly where to write the code took me quite some time to realize.  In fact, when I went to my other blogs I couldn’t find anything similar in their theme files.  Again I poked around a bit and eventually discovered that to get the same results on those blogs I needed to use the following code-

.post a img {
	padding:5px;
        background-color:#D7E1FF;
        border: 1px solid #9DB7FF;
        margin: 6px;
}

So you might need to try a couple of different formats to get the results you want. Obviously, you’ll also want to set your own colors, etc. But if you’ve just got plain old regular images sitting on your blog at the moment, this will make everything that much prettier and who can really complain about that? Using CSS also gives the benefit without the need to add yet another pliugin which will slow your blog’s performance.

Part of the Wonderful WordPress Wednesdays Series - Previous in series        Next in series

The Complete Wonderful WordPress Wednesdays Series-


Tags: , , , , , , , , , ,
Related Posts: » Filed Under: Blogging, Wonderful WordPress Wednesdays
» Trackback to: Pretty Blog Pictures Thanks To CSS!


No Responses to “Pretty Blog Pictures Thanks To CSS!”


 

 

Comments

Leave a comment

CommentLuv Enabled

« Prev Post:

» Next Post



  • Categories

  • Translator


  • Pages

Google