Build Your Own Business Website header image

How to Customize the Post Box in Thesis 2.1 – Part 4 – Style the Featured Image Thumbnail

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

So we’ve got this Post Title styled for the Thesis 2 Post Box and now we’re going to move on to styling the image. The image in this example here essentially has a frame and that frame, in this case, is a border with padding and a background color.

Add a “Frame” Around the Image

What we want to do is give ourselves a little bit of a frame. To do that we’re going to start off with the border and then we’re going to give it some padding and a background color. So refresh this and inspect this. Again, we’re talking about our .home_archive.post_box and image, I think that’s all we really need, .home_archive.post_box image.

Add Border

Let’s come back over to the style editor .home_archive.post_box and then image img. We’ll start off with border and since it’s border all the way around we’ll just say 1px solid and #888.

Add Padding

Now we want to actually produce the frame so we’re going to say padding:10px and that puts padding all the way around it. Well that’s a little bit much so let’s say 5px. Okay there’s padding.

Add Background Color

Then we want a background color and I think the background color I’m going to pick is this color here. So we’ll say background-color paste that color.

And now we have our frame around our image and it’s that simple really. Anytime you want to put a frame around an image, all you have to do is give it a border, padding and a background color and you’ve got it made.

So we’re going to take this little piece of code and paste that in our custom CSS. Save our custom CSS and refresh it. And now we’ve got that working. Note this line is a little bit close here so I think what we want to do is move this over just a tad bit. Instead of margin-left of 220 maybe 230. Let’s come back over here and say 230.

Review the Post Box at responsinator.com

While we’re at it we may as well just take a quick look at it again in the responsinator or by looking at it responsively. So that looks pretty good. Well, I think maybe we’re going to have to do a couple of things. At some point on this we’re going to want to give it a minimum width, give our title a minimum width. But for the time being we’re just going to leave it like this and then we’ll make those kind of tweaks to it later..

0 Comments… add one
0 comments… add one

Leave a Comment