Editing the Style of Featured Image Thumbnails

Have you been wondering how to remove the default one pixel border around the featured image thumbnail? While I love that you can edit the size and proportions of the thumbnail easily now within the Theme’s Options Panel (located under the Appearance Tab of your Dashboard), there was no hint as to where the styling for these images might be located. After editing all of the various .img classes in the css, I finally began digging around in the functions.php and found that Artisteer actually assigns the avatar class to the post thumbnail (not avatar img which is also in the css, but just avatar!) I’m pleased to now be able to very easily edit the appearance of the thumbnail image, and I’m going to show you how you can as well.

1.) Click on the Editor Tab under the Appearance Panel in your WordPress Dashboard.

2.) Now, go into your stylesheet (styles.css) file and look for the following code toward the very bottom of the file:

div.avatar

3.) Now, adjust the styling as desired. Below is an example of the default styling which includes the small gray border. However, you could have a border with a different color, pixel size, style, padding or background so that the image appears to be matted and framed, change the float to where you want the image to appear, etc. The options are pretty limitless, and the only part you don’t want to change is the position from relative. I’ve included some notes to help you out as you edit. That needs to stay as is so that it doesn’t mess up any alignment or appear in a funny spot within your post.


div.avatar
{
position:relative;
margin: 5px 0; (for more specific margins, add four separate pixel entries side-by-side instead of just the two, or give specific names such as margin-top. The margin creates space surrounding your image.)
border: 1px solid ; (for no border, simply put border: none;)
padding: 1px; (the padding creates space between your image and the border you give it.)
background: #fff; (for no background, simply put background: none;)
float:left;
}

4.) Now, here comes the fun part. Why not add a hover feature to your image as well? Since Artisteer automatically makes the image a link, let’s highlight that fact. Below is the code I used for the thumbnails on this site. Note the addition of the “a” after div.avatar.

div.avatar a
{
  position:relative;
  margin: 0 5px;
  border: 1px solid #c7c7c7;
  padding: 5px;
  background: #d9d9d9;
  float:left;
}

div.avatar a:hover
{
  position:relative;
  margin: 0 5px;
  padding: 5px;
  border: 1px solid #bababa;
  background: #c7c7c7;
  float:left;
}

Notice the size of the border, the color, the margin around the image (giving space between the image and the other text), and the padding between the image itself and the border.

Now take a look at the hovered image code directly below it. Notice that my margin and padding are the same, but my border color and background color have changed.

If you want to add a nice a nice shadow effect to your images, see the following detailed post here.

I hope that helps! Let me know if you have any questions or comments, and as always contact me if you are interested in customized graphic design work.

© 2011, reflectingthedesigner.com. All rights reserved.

April 10th, 2011 at 8:52 am

Hi
I begin to use Artisteer 3 and I like to show excerpts in my home page along with a thumbnail. I’ve already figured out how to do this, but the problem is that the thumbnail is showing beside the title of the post instead of along with the excerpt (text).
I want my home page to show the thumbs like your home page. Any idea?
Sorry about my English (I’m from Brasil!)

April 10th, 2011 at 9:07 am

You’ll just need to go into the wrappers.php file and move the echo $thumbnail;?> directly above the div for the post content. You’ll then want to be sure to adjust the padding-top as well as padding-right in the css so it aligns how you would like it to. Hope that helps!

April 10th, 2011 at 9:20 am

Thank you!
I’ll try
Great blog, i’ll subscribe to your feeds.

Bob
May 26th, 2011 at 2:07 pm

I find it odd that Artisteer, for all its built in design functions is woefully lacking in such detail. Moreover, I find one serious drawback is that is doesn’t allow for a special overriding area for CSS or a child theme. As it stands, assuming you can figure out if the program sticks something in php or css, once you make changes or update the theme, you lose and have to reinstate the changes. It’s tedious and unnecessary and even the most basic WP themes have started adopting such a feature.

LEAVE A COMMENT

Powered by sweet Captcha

Anti-Spam Protection by WP-SpamFree