Build Your Own Business Website header image

How to Add Frame Around an Image Using CSS

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

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.

In this session we show how to add a frame around an image using CSS. We inspect the code and find the correct selector to use so that every image in the sidebar gets the new style. And then write out the code.

Video Transcript:

Member: What do I do now?

Rick: Well so what I understood that you want to do is you wanted to put a decorative border essentially around the image. A frame around the image.

Member: Yes,  I have watch the videos and things on your video on the frames and things like that but I still haven’t got my head around you know how I can use the frames in different areas. And I do like them and I do know is that the cache I use seem to have frames, is that right?

Member: Is that easy to do that?

Rick: I do have frames around the images in Carta, yes.

Member: Yeah and is that regardless if they are in the sidebar or with a…

Rick: No, no it is not. It is actually; it only kicks in for featured images in the post.

Member: Oh, I see.

Rick: So, which site are we talking about?

Member: The holidaybydesign?

Rick: Okay and so, let’s see…

Member: Oh, I’ve been messing around with the header.

Rick: That’s okay, which page will I find the image on?

Member: Ah, the blog probably. Oh you’re there, there as well.

Rick: Okay, so…

Member: Yeah.

Rick: I can show you how we would do it for something like this.

Member: Yes, yes that’s what I want.

Rick: So, actually what I really want to do is…do this in firefox because I have been demonstrating this stuff in Firefox more lately. So let me just kill a bunch of stuff here. Okay, the first thing you want to do is figure out what selector you want to use. And the easiest way to do that is just to right-click on the image and inspect the element and once you’ve done that you can see that this has a “img alignleft-size-full-wp-image-190”.

Member: Uhuh.

Rick: And I think actually what I would do is since you’re doing this inside of a text widget I think what I would do is I would pick <div>,<div>, <img>. So, those are the; that’s the selector  I would use so “.sidebar .textwidget img  and then what I would do is let’s see I’m just going to come down to the bottom down here. Am I really all the way down to the bottom? So, what I would do is something like “.sidebar .widget img {}”. This selector would mean that every image in the sidebar would get this style.

Member: Okay.

Rick: So anytime you put an image in the sidebar it would get this style we are doing.

Member: I see.

Rick: And then, what I would do is give it a background color; do you want the frame to look like this frame here?

Member: Yeah, probably.

Rick: Okay, so let’s just get that background color so I would say…background-color,

Member:  Does it matter where you start there with background? Oh you know, you’ve got it indented in?

Rick: It doesn’t actually matter but typical way of doing it will indent it.

Member: Aye,

Rick: That is you know best practice for reading it. And Thesis will automatically do that for you in your custom css anyway for you.

Member: Ah…

Rick: So, .sidebar .widget img {background-color: #f6eedc} and we are going to paste that color in.

Member: A semi-colon or a colon?

Rick: Yes, so the way this works is you take the attribute ” background-color ” and then colon, value “#f6eedc “, semi-colon.

Member:  …#f6e, oh that’s the color.

Rick: That’s the color, right.

Member: I see.

Rick: So then we can say “padding:” and that looks like about 15px. Yeah, it looks pretty close and then it also has a border with a slightly  “border:” and then we are going to say “1px solid” and then, well I’m going to put the color in there again but it’s not the right color because we really want your darker color here.  And then I’m just going to copy the style that you have here, right.

Member: Uhuh…

Rick: And so, that style has this rgb value which is background-color; then “border: 1px solid #ECDDBA”. That border color right there. So, come back over to the style editor back down to our style at the very bottom and let’s just make sure that we aren’t…well, you can see now that every time you put an image in your sidebar inside of a widget it’s going to have this. It is going to compress the image a little bit you know shrink the image down so it still fits.

Member: Yeah, sure.

Rick: And then put that border around it which looks very much like this border and maybe 15px is too much. Maybe it’s just 12px or 13px, yeah that’s more like it.

Member: Okay.

Rick: And let’s just make sure that we aren’t getting too big here; div id,  let’s see <div> oh yeah that’s working just fine. So the sidebar and then the text widget; that’s exactly the right size and then the image, perfect. So, I’m going to come back over here to the style editor I will just copy this and paste it in but essentially what we did was we said we’re not going to do this to every image everywhere. We are just going to do this to the images that you place in the sidebar.

Member: The only thing about it though is I’ve made an image if you go back to; if you just click over my home page for a second.

Rick: I’m going to paste that code so we don’t lose it.

Member: Yeah.

Rick: Go back to the home page, okay.

Member: I’ve made; see with this contact us thing is just one I started from somewhere just to throw in the hole.

Rick: Yeah.

Member: That I’ve made, you know I’ve made one to fit to go in there for my own.

Rick: Yeah.

Member: With my own logo on it. So and would it has a gold border around it don’t; so, would that. I don’t really want another border around it.

Rick: Well, can you make it so that you remove that? Border?

Member:  Well, it really fits in with my logo. It’s got the gold you know the color? If you look at my new header the one I’m just working with.

Rick: Okay, then you would have to create…let’s see sidebar widget; oh, this isn’t a widget. This is inside the text box, isn’t it.

Member: I can’t remember.

Rick: That is, that is inside a text box. So it’s not even going to apply to it.

Member: Okay, so right.

Rick: Right, if you put your other image in the text box it won’t apply.

Member: If I put the contact us in the text box.

Rick: Right, cause this image is in a text box.

Member: Yes.

Rick: So, if you put your version of this image in that same text box the style that we’ve created won’t apply to it; because it’s not in a widget.

Member: Okay.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one