Customize the Product Review Display with CSS
Welcome back to the sixth and final part of Lesson 16, the final lesson in the Build Your Own E-Commerce Website tutorial series. In this final part of the lesson we are going to use custom css to style each one of these product comments on our ecommerce website so that it looks similar to this.
Identify the HTML Structure in Firebug
We’re going to start off by doing that in Firefox. So open that up, refresh Firefox and go to the Home page. Scroll down here and we can see what this looks like now. Let’s start off by inspecting that element in the ecommerce website and taking a look at our HTML structure. You can see that we have this ul class=’customized-recent-comments’ that’s picking up all of the widget container. Then inside of that you have an li element for each one of the comments inside that ul. So we’re going to start off by customizing the li item. Let’s open up Web Developer and go to our custom.css.
Scroll down here for a moment below the Advanced Most Recent Posts Widget and I think I’m just going to come all the way down there, copy that, press Enter, paste, Enter again. Now this is going to be the Custom Recent Comments Widget.
We want to address ourselves here to the li. So we’re going to say li, dot, recentcomment. We’ll copy recentcomment there and say li, dot, and then paste that recentcomment, and then give ourselves a line, opening bracket, closing bracket, go back up, tab in a bit. First we’re going to give it a border, colon, and I want to do it a dashed border. I want it to be 1 pixel and a different color, and we’ll use a green color here, 4DBA3D. So that’s our border.
Obviously we don’t want the text up against the border like that so let’s go ahead and give it a little bit of padding, 8 pixels of padding. Okay that makes that stand off nicely.
Add Styling to the Comment Body of the Product Review Display
I don’t like the way this butts up against the avatar and essentially indents over so I’m going to give this section a top margin and that section is called comment-body, the div class=’comment-body’ is what we wrapped this and this in. So let’s take comment-body and dot, comment-body, Enter, opening bracket, closing bracket, tab over and in this case we are going to give it a margin top, and let’s say margin-top, colon, 5px, semi-colon. You can see how that drops down there nicely. I’m going to give it 10 pixels though, give myself a little bit of room there and that looks pretty good.
Next I don’t want as much space below this text and I want more space above it. If we select that text down here you can see that is controlled by li, dot, widget p, and it’s got a nice big margin across the bottom there.
So we’re going to change li, dot, widget p for this section and we’re going to do by coming down here and give ourselves some space, li, dot, and then widget and then instead of saying just p we’re going to say comment-body p. That way this only applies to this specific instance and then Enter and a bracket, a couple of lines, a closing bracket. We go up, it’s tab, tab, tab, over, and in this case I want to say margin-top, colon, say 10 pixels. Then we’re going to say margin-bottom, colon, 0 pixels and maybe we’ll make this one 8 since that’s the number we’ve been using elsewhere.
Then the only other thing I want to do is to make that text italic. So we’ll say font-style, colon, italic. Okay, so that’s getting closer.
Add Styling to the Avatar for the Product Review Display
I don’t want this little avatar sticking over like that. If we come up and select the avatar and then look at the image, because that’s what’s controlling it, you can see that it’s got a little bit of margin on the left and here it says that margin is 0.883em. We want that margin to be zero em. We’ll come right here and drop down a line and say dot, avatar, i-m-g, and then opening bracket, couple lines, closing bracket, up, one, two, three, margin, colon, 0px and now that moves right over there. I think that pretty much handles it.
We have the box, the text and this laid out the way we want. I’m going to call that good. So now I’m going to copy all of this from Web Developer, and then I want to open the custom.css file. So Open that file. This is for estore16 and we’ll come down here, Enter, paste, Enter. We pasted that code in, we’ll save it, open up Filezilla and we’ll upload it. Then we’ll come back to our site and refresh. Let’s close that and close that and there we have it.
Review the Completed Product Review Display
Our Product Reviews for our ecommerce website are nicely styled so let’s take a look at it in another browser. Let’s look at it in Chrome and we go to this site and refresh it. Okay it looks fine in Chrome. Let’s grab that URL and open it up in Internet Explorer, paste it and then scroll down and it looks fine in Internet Explorer as well.
So that entirely wraps up Lesson 16 of the Build Your Own E-Commerce Website tutorial series. I’ve enjoyed teaching this series and I hope that you got a lot out of it.