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.
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.
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..